CSS是层叠样式表(Cascading StyleSheet)。 在网页制作时采用层叠样式表技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。下面,传智播客将针对Css3的新特性、常用属性及应用案例进行解读。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11246.html
一、 Css3新特性与常用属性文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11246.html
1. 解读Css3—css3和css2的区别文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11246.html
css3=css2 扩展和 优化文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11246.html
2. 解读Css3—css3的新增的语法文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11246.html
l 伪类选择器文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11246.html
l 选择器:first-child 第一项文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11246.html
l 选择器:last-child 最后一项文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11246.html
l 选择器:nth-child(n) 第几项 li:nth-child(2) { }文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11246.html
l 选择器:nth-child(2n+1) 奇数项文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11246.html
l 选择器:nth-child(2n)偶数项文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11246.html
l 选择器:nth-child(odd) 偶数项文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11246.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11246.html
3. 解读Css3—css3新增的属性文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11246.html
注意:必须是html5 才有文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11246.html
网站的地址 css3文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11246.html
l text-shadow:水平 垂直 模糊距离 颜色;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11246.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11246.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11246.html
水平 正值向右 负值 左文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11246.html
垂直 正值 下 负值 上文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11246.html
如果设置多个阴影用逗号相隔文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11246.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11246.html
l box-shadow :水平 垂直 模糊强调 模糊距离 颜色 内/外阴影文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11246.html
模糊距离 焦距,值越大 ,阴影的范围越大,反之,变小文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11246.html
l 必须是ie9+文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11246.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11246.html
属性值有:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11246.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11246.html
l border-radius :左上 右上 右下 左下文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11246.html
设置容器是否有圆角文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11246.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11246.html
效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11246.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11246.html
l background-size:数值宽度; 高度值等比例改变文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11246.html
background-size:宽度值 高度值;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11246.html
注意:背景图片的基础上文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11246.html
解读Css3—定位文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11246.html
页面排版能用float,不同定位文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11246.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11246.html
static :静态定位,如果不设置默认文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11246.html
l fixed: 固定定位文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11246.html
position:fixed; 固定到浏览器窗口的某个位置文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11246.html
设置完之后,层级高文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11246.html
不占据原来的位置文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11246.html
l relative:相对定位 ,为绝对定位而生的文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11246.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11246.html
设置完之后文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11246.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11246.html
特点:占空间,层级高于普通的元素 ,自身为参考点文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11246.html
l absolute :绝对定位文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11246.html
不占空间,层级高文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11246.html
如果结合定位坐标 找的是(父元素,或祖先元素),是否有定位,文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11246.html
他们的父元素或祖先设置的通常是相对定位文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11246.html
父元素设置的是相对定位 position:relative文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11246.html
里面的设置绝对定位 position absolute;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11246.html
效果如下文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11246.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11246.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11246.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11246.html
通常 结合 定位的坐标 。在容器的什么位置文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11246.html
l top 顶部文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11246.html
l right 右边文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11246.html
l bottom 下边文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11246.html
l left 左边文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11246.html
二、 应用案例文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11246.html
1. 解读Css3—实现论坛的首页和登录的页面文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11246.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11246.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11246.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11246.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11246.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11246.html
扩展文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11246.html
解读Css3—优先级文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11246.html
id> class > 标签文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11246.html
比喻:100 10 1文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11246.html
复合选择器 后代文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11246.html
写的越精确,优先级越高文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11246.html
.one .two ul li 22文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11246.html
#one ul li 102文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11246.html
#one ul li a 103文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11246.html
#one .two ul li a ====113文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11246.html
继承文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11246.html