web前端培训：本期教程CSS 三大特性

　　CSS 有三个非常重要的三个特性：层叠性、继承性、优先级：

　　1. 层叠性

　　相同选择器给设置相同的样式，此时一个样式就会覆盖(层叠)另一个冲突的样式。层叠性主要解决样式冲突的问题。

　　层叠性原则：

　　样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式。

　　样式不冲突，不会层叠。

　　CSS 层叠性口诀：长江后浪推前浪，前浪死在沙滩上。

　　2.继承性

　　现实中的继承: 我们继承了父亲的姓

　　CSS中的继承: 子标签会继承父标签的某些样式，如文本颜色和字号。简单的理解就是：子承父业。

　　恰当地使用继承可以简化代码，降低 CSS 样式的复杂性

　　子元素可以继承父元素的样式(text-，font-，line-这些元素开头的可以继承，以及color属性)

　　继承性口诀：龙生龙，凤生凤，老鼠生的孩子会打洞。

　　行高的继承性

　　body {

　　font:12px/1.5 Microsoft YaHei;

　　}

　　注意：

　　行高可以跟单位也可以不跟单位

　　如果子元素没有设置行高，则会继承父元素的行高为 1.5

　　此时子元素的行高是：当前子元素的文字大小 * 1.5

　　body 行高 1.5 这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高

　　3.优先级

　　优先级的选择器权重如下表所示。

　　优先级注意点:

　　1. 权重是有4组数字组成,但是不会有进位。

　　1. 可以理解为类选择器永远大于元素选择器, id选择器永远大于类选择器,以此类推..

　　2. 等级判断从左向右，如果某一位数值相同，则判断下一位数值。

　　3. 可以简单记忆法: 通配符和继承权重为0, 标签选择器为1,类(伪类)选择器为10, id选择器100, 行内样式表为1000, !important 无穷大.

　　4. 继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0。

　　权重叠加：如果是复合选择器，则会有权重叠加，需要计算权重。

　　div ul li ------> 0,0,0,3 .nav ul li ------> 0,0,1,2

　　a:hover -----—> 0,0,1,1

　　.nav a ------> 0,0,1,1

web前端培训：本期教程CSS 三大特性相关推荐

web前端学习128-134（CSS三大特性---层叠性，继承性，优先级）
文章目录 1 CSS的三大特性 1.1 层叠性 1.2 继承性 1.3 优先级 1 CSS的三大特性 CSS有三个非常重要的三个特性︰层叠性.继承性.优先级. 1.1 层叠性相同选择器给设置相同的样 ...
web前端培训如何使用CSS连接数据库
以下文章来源于前端开发它是如何工作的? 首先我们需要用到一组被亲切地称为Houdini的api,它让你的浏览器能够通过Javascript对象模型来控制CSS.换言之,这意味着您可以定制CSS样式. ...
web前端培训开发，CSS的伪类和伪元素
随着Web应用程序功能的日益复杂和复杂,Web开发人员需要灵活的工具来满足不断增长的用户期望.好消息是,Web开发生态系统为我们提供了很多选择,老牌公司和开源社区都在竞相构建更强大的库,框架和应用程序 ...
web前端培训：CSS中单行文本溢出显示省略号的方法
CSS中单行文本溢出显示省略号的方法你知道吗?在web前端技术学习中,这个问题其实是属于老生常谈了,因为css单行文本的应用是非常频繁的,比如网站最基本的文章列表,标题会很长,而显示列表的区域宽度却没 ...
从零开始学前端：CSS元素模式的转换和CSS三大特性 --- 今天你学习了吗？（CSS：Day12）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:复习课程 - 今天你学习了吗?(CSS:Day11) 文章目录从零开始学前端:程序猿小白也可以完全掌握! ...
Web前端开发精品课HTML CSS JavaScript基础教程JavaScript部分知识点总结
内容来自莫振杰Web前端开发精品课HTML CSS JavaScript基础教程章节总结第24章 JavaScript简介 1.HTML是网页的结构,CSS是网页的外观,而JavaScript是网 ...
【前端基础之css2(emmet语法、CSS复合选择器、元素的显示模式、Snipaste截图工具、小米侧边栏制作、CSS背景、CSS三大特性、盒子模型、PS基本操作】
emmet语法快速生成HTML标签: 快速生成CSS样式语法: 方法1(没有找到对应的文件,所以用了方法2): 方法2: 左下角选择设置搜索框输入"格式化",勾选上如图三个选项 ...
Web前端开发精品课HTML CSS JavaScript基础教程HTML部分知识点总结
内容来自莫振杰Web前端开发精品课HTML CSS JavaScript基础教程章节总结第1章 HTML简介 1.前端技术简介 (1)从Web1.0到Web2.0,网页制作已经变成前端开发了. ...
Web前端开发精品课HTML CSS JavaScript基础教程CSS部分知识点总结
内容来自莫振杰Web前端开发精品课HTML CSS JavaScript基础教程章节总结第11章 CSS简介 1.HTML是网页的结构,CSS是网页的外观,JavaScript是网页的行为. 2. ...

web前端培训：本期教程CSS 三大特性

web前端培训：本期教程CSS 三大特性相关推荐

最新文章

热门文章