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

2019-04-0511:28:50网页制作Comments2,247 views字数 1091阅读模式

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

Css3新特性、优先级、常用属性及应用案例文章源自菜鸟学院-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

Css3新特性、优先级、常用属性及应用案例文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11246.html

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

Css3新特性、优先级、常用属性及应用案例文章源自菜鸟学院-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

Css3新特性、优先级、常用属性及应用案例文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11246.html

属性值有:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11246.html

Css3新特性、优先级、常用属性及应用案例文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11246.html

l border-radius :左上 右上  右下  左下文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11246.html

设置容器是否有圆角文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11246.html

Css3新特性、优先级、常用属性及应用案例文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11246.html

效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11246.html

Css3新特性、优先级、常用属性及应用案例文章源自菜鸟学院-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

Css3新特性、优先级、常用属性及应用案例文章源自菜鸟学院-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

Css3新特性、优先级、常用属性及应用案例文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11246.html

设置完之后文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11246.html

Css3新特性、优先级、常用属性及应用案例文章源自菜鸟学院-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

Css3新特性、优先级、常用属性及应用案例文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11246.html

Css3新特性、优先级、常用属性及应用案例文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11246.html

Css3新特性、优先级、常用属性及应用案例文章源自菜鸟学院-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

Css3新特性、优先级、常用属性及应用案例文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11246.html

Css3新特性、优先级、常用属性及应用案例文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11246.html

Css3新特性、优先级、常用属性及应用案例文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11246.html

Css3新特性、优先级、常用属性及应用案例文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11246.html

Css3新特性、优先级、常用属性及应用案例文章源自菜鸟学院-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

  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/zhizuo/11246.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定