CSS三大特性🎨
CSS三大特性是前端开发中所必用到的
下面来解释一下三大特性的概念与规则
拉架的层叠性
CSS的全名为层叠样式表,所以可见层叠性的重要性。
- 特性:层叠性主要用于解决样式冲突, 也就是拉架。
样式冲突:一个元素被多种选择器添加了相同的属性,那么将按最底部的属性值来渲染
- 原理:这与浏览器的渲染原理有关
在打开一个网页时,浏览器会先下载文档(也就是我们的document),加载文档的head样式资源
依次加载dom与样式,所以同权重情况下下面的样式会覆盖上面的样式 - 案例时间:
<div>层叠</div> <style> div{ width: 300px; height: 150px; background-color: red; background-color: rgb(43, 159, 226); color:pink; color:#fff; } div{ color:rgb(236, 240, 236); } </style> 复制代码
如图所示:div的背景颜色:rgb(43, 159, 226);字体颜色:color:rgb(236, 240, 236);
功名利禄的权重
因为层叠是对同权重的规则,所以权重的出现会直接打破层叠的规则,即谁的权重大谁就被渲染
- 概念:CSS权重指的是样式的优先级,有两条或多条样式作用于一个元素,权重高的那条样式对元素起作用,权重相同的,后写的样式会覆盖前面写的样式
- 规则:
Name | 0,0,0,0 |
元素 | 0,0,0,1 |
类/伪类 | 0,0,1,0 |
ID | 0,1,0,0 |
行内式 | 1,0,0,0 |
!import | 无穷大 |
- 案例时间:
<p id="txt" class="txt">CSS的权重</p> <style> #txt{ color: black; } p .txt{ color: blue; } </style> 复制代码
图片所示:段落的颜色最后为黑色,而按层叠来讲颜色应该是蓝色,这就是因为id选择器的权重较大,所以最后渲染为黑色。
子承父业的继承
html标签拥有父子关系,那么在其元素上也有子承父业的规则
- 概念:子标签会继承父标签的能继承的样式
- 可继承的属性:字体,文本,元素可见性,等等
- 不可继承的属性:盒子模型属性,北京属性,定位属性,outline,display
- 案例时间
<div class="father"> 父亲 <p class="son">儿子</p> </div> <style> .father { width: 300px; height: 200px; font-size: 20px; font-weight: 700; text-align: right; background-color: rgb(0, 98, 128); color: rgb(241, 243, 239); position: relative; } .son { width: 50%; height: 90%; background-color: rgb(0, 183, 255); position: absolute; bottom: 0; left: 0; color: #fff; } </style> 复制代码
图片所示:子标签继承了父元素的字体颜色,文本,没有继承定位等。
PS:
- 子标签继承过来的元素的权重据文献表明为0.1,即我们用元素选择器就可以覆盖掉继承的属性
- 为什么要用继承呢?因为继承减少了代码冗余,降低CSS的复杂性
- 合理运用CSS三大特性,在开发大量中减少了样式bug,减少秃头。