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,非常不方便









每个角都各有两个方向的偏移可以设置。

案例：安卓机器人。