CSS的层叠与继承
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
开发工具与关键技术: MVC
撰写时间:2021/5/8
1、继承:我们的CSS中很多的属性也是可以继承的,
其中相当一部分是跟文字的相关的,比如说颜色、字体、字号。当然还有一部分是不能继承的:例如边框、内外边距。
下图是一些CSS文字样式表包括属性,样式效果以及用法和值
2、层叠:层叠是CSS的核心机制。
层叠的工作机制:当元素的同一个样式属性有多种样式值的时候,CSS 中的“层叠(cascading)”表示样式单规则应用于 HTML文档元素的方式。
具体地说,CSS 样式单中的样式形成一个层次结构,更具体的样式覆盖通用样式。样式规则的优先级由 CSS 根据这个层次结构决定,从而实现级联效果。
3、CSS权重
CSS权重指的是样式的优先级,有两条或多条样式作用于一个元素,权重高的那条样式对元素起作用,权重相同的,后写的样式会覆盖前面写的样式。
4、CSS就是靠层叠机制来决定最终应用哪种样式。
5、层叠规则:
①层叠规则一:找到应用给每个元素和属性的声明。
说明:浏览器在加载每个页面时,都会据此查找到每条CSS规则,
并标识出所有受到影响的HTML元素。
②层叠规则二:按照顺序和权重排序。
按顺序:说明:浏览器依次检查CSS样式的来源,并设定匹配的属性,如果匹配的属性在下一个来源也有定义,则更新该属性的值,如此循环。
权重排序:!important
③层叠规则三:按等级排序。
可以把样式的应用方式分为几个等级,按照等级来计算权重
1、内联样式,如:style=””,权重值为1000
2、ID选择器,如:#content,权重值为100
3、类,伪类,如:.content、:hover 权重值为10
4、标签选择器,如:div、p 权重值为1
6、如下图两条样式同时作用一个div,上面的样式权重值为1,下面的行间样式的权重值为1000,
所以文字的最终颜色为blue
7、如下图
第一条样式的权重计算: 1+100+10+1,结果为112;
第二条样式的权重计算: 100+10+1,结果为111;
h2标题的最终颜色为red
④层叠规则四:顺序决定权重。
说明:如果两条规则都影响到某元素的同一属性,而它们的特制度也相同,
则位置最靠下的胜出。
规则一:在特指度相同的情况下,按排列
这是我所学到的在CSS中的继承与层叠,所以我要分享给你们,希望可以帮助到你们。
以上就是我的分享,新手上道,请多多指教。如果有更好的方法或不懂得地方欢迎在评论区教导和提问喔!