Css3新特性、优先级、常用属性及应用案例

CSS是层叠样式表（Cascading StyleSheet）。 在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。下面,传智播客将针对Css3的新特性、常用属性及应用案例进行解读。

一、 Css3新特性与常用属性

1. 解读Css3—css3和css2的区别

css3=css2 扩展和 优化

2. 解读Css3—css3的新增的语法

l 伪类选择器

l 选择器:first-child  第一项

l 选择器:last-child  最后一项

l 选择器:nth-child(n)  第几项  li:nth-child(2) {  }

l 选择器:nth-child(2n+1) 奇数项

l 选择器:nth-child(2n)偶数项

l 选择器:nth-child(odd) 偶数项

3. 解读Css3—css3新增的属性

注意：必须是html5 才有

网站的地址  css3

l text-shadow：水平 垂直 模糊距离 颜色;

水平 正值向右 负值 左

垂直  正值  下 负值 上

如果设置多个阴影用逗号相隔

l box-shadow ：水平 垂直  模糊强调  模糊距离  颜色  内/外阴影

模糊距离  焦距，值越大 ，阴影的范围越大，反之，变小

l 必须是ie9+

属性值有：

l border-radius ：左上 右上  右下  左下

设置容器是否有圆角

效果

l background-size：数值宽度;  高度值等比例改变

background-size:宽度值 高度值;

注意：背景图片的基础上

解读Css3—定位

页面排版能用float，不同定位

static :静态定位，如果不设置默认

l fixed: 固定定位

position:fixed; 固定到浏览器窗口的某个位置

设置完之后，层级高

不占据原来的位置

l relative：相对定位  ，为绝对定位而生的

设置完之后

特点：占空间，层级高于普通的元素 ，自身为参考点

l absolute ：绝对定位

不占空间，层级高

如果结合定位坐标 找的是（父元素，或祖先元素），是否有定位，

他们的父元素或祖先设置的通常是相对定位

父元素设置的是相对定位 position:relative

里面的设置绝对定位 position  absolute;

效果如下

通常 结合 定位的坐标 。在容器的什么位置

l top  顶部

l right 右边

l bottom 下边

l left   左边

二、 应用案例

1. 解读Css3—实现论坛的首页和登录的页面

扩展

解读Css3—优先级

id>   class >  标签

比喻：100  10     1

复合选择器  后代

写的越精确，优先级越高

.one .two ul li  22

#one ul li   102

#one ul li  a   103

#one .two ul li a  ====113

继承