H5C303

H5C303

1、CSS3

一些js功能可以通过css3实现。
坚持渐进增强原则。
另一侧：优雅降级hack

3、选择器
1）属性选择器：根据指定名称的属性来查找元素

E是元素

li[style]{

}//含style属性的li元素
li[class=cc]{

}
选择class属性为cc的li属性。注意不必加引号
li[class*=cc]{
}
查找拥有指定属性及相应值的Li元素,可以在任意位置
li[class^=cc]{
查找拥有指定的a属性并且该属性值以cc开头的li元素
}

在这里的开头和结尾不一定要是一个完整的单词。
2）伪类选择器
兄弟伪类：以某元素或兄弟元素的位置来获取元素的结构伪类

相对于父元素的结构伪类
都是相当于相应元素的父元素来说的

注意：E限定了被选择元素的类型，其他类型元素是不满足要求的。若第一个元素类型不是E，失效。此时，改用以下语句：

自动过滤不符合条件的元素，同样也有last-of-type


与之前类似，也有限制元素类型的of=type后缀的语句。

使用表达式：

无法选取中间的元素

3）伪类样式target
结合锚点使用，处于当前锚点的元素会被选中
锚点：即href=‘id值’

4）伪类元素：before/after

伪元素并不在文档中生成。



before与after仅示区分，表示各个dom元素都有该两个隐形的伪元素。
5）其他元素的使用
首字下沉：

4、颜色模式
1）RGB ：

通过预设值或者是颜色拾取器可以进行颜色的设置
通过rgb设置：
background-color:rgb(红，绿，蓝)
2）HSL模式



3)设置透明 色的方式
利用opacity设置透明度会把该元素下的子元素的透明度都改变。
这时可利用rgba()中的最后一个参数设定透明度，将只改变当前元素的透明度
或者hsla()即可

5,文本阴影
可对文字产生阴影和模糊主体
看在css3之前可通过ps制作。
右键图层-投影




可依次设置多个阴影

这里有两点要注意：transparent是作为color的值，还有就是可以用rgba和hsla表示颜色。

6、盒模型
边框和padding值都是在盒子的外边追加，所以会把盒子撑大


设置box-sizing:border-box的样式即可

7、边框圆角
之前需要使用PS,非常不方便




每个角都各有两个方向的偏移可以设置。
案例：安卓机器人。