CSS 理解样式层叠
CSS(层叠样式表)用于规定HTML文档的呈现形式(外观和格式编排),通过学习 《HTML权威指南》
、《CSS权威指南》
和 《精通jQuery》
,结合自己的实践经历,说说 CSS 样式层叠的那些事儿.
1 样式的来源
样式的来源有以下几种:
- 元素内嵌样式(将样式直接应用于元素,style属性)
- 文档内嵌样式(创建可用于多个元素的样式,style元素)
- 外部样式表样式(创建可用于多个HTML文档的样式,link元素)
- 浏览器样式
- 用户样式
1.1 元素内嵌样式
把样式应用到元素上,最直接的是使用全局属性style
<body> <p style="font-size: 16px;background-color: #ccc;">use Global Attribute 'style' to set style</p> </body>
1.2 文档内嵌样式
使用style元素
定义文档内嵌样式<head> <style> p { font-size: 16px; background-color: #ccc; } </style> </head> <body> <p>use 'style' to set style</p> </body>
1.3 外部样式表样式
使用link元素
将一个样式表应用于一个 HTML 文档/* style.css 文件 */ p { font-size: 16px; background-color: #ccc; }
文档想要链接多少样式表都行,为每个样式表使用一个link元素即可。如果不同样式表中的样式使用了相同的选择器,那么这些<!-- HTML 文档 --> <head> <link href='style.css' >http://www.0771ybyy.com/news/1799.html<rel='stylesheet'></link> </head> <body> <p>use 'link' to set style</p> </body>
样式表的导入顺序很重要!
这种情况下使用的是后导入的样式NOTE:
后来居上原则
1.3.1
可以用@import 语句将样式从一个样式表导入到另一个样式表中@import
一个样式表想导入多少别的样式表都行,>http://www.0771ybyy.com/news/1802.html<只要为每个样式表使用一条 @import 语句即可。@import 语句必须位于样式表顶端,样式表自己定义的样式不能出现在它之前。/* combined.css 文件 */ @import 'style.css' p { color: #fff; }
NOTE:
最好不要使用 @importEXPLAIN:
为什么? - 浏览器处理 @import 语句的效率往往不如处理多个link元素并靠样式层叠解决问题
1.3.2 @charset
在 CSS 样式表中可以出现在 @import 语句之前的只有 @charset 语句。@charset 语句用于声明样式表使用的字符编码。
如果样式表未声明使用的字符编码,那么>http://www.0771ybyy.com/news/1803.html<浏览器将使用载入该样式表的 HTML 文档声明的编码。要是 HTML 文档也没有声明编码,那么默认情况下使用的是UTF-8@charset 'UTF-8'>http://www.0771ybyy.com/news/1801.html< @import 'style.css' p { color: #fff; }
1.4 浏览器样式
浏览器样式(用户代理样式:user agent
)是元素尚未设置样式时浏览器给它设置的默认样式。这些样式因浏览器而略有差异。i.e.
浏览器对 a 标签的样式一般设置为:a { color: #00f; text-decoration: underline; }
1.5 用户样式
大多数浏览器都允许用户定义自己的样式表(custom.css
),这类样式表中包含的样式称为用户样式。/* custom.css 文件 */ a { color: #f0f; background: >http://www.0771ybyy.com/news/1800.html<#ccc; }
2 样式的层叠
2.1 层叠的次序
cascading order
浏览器要显示元素时求索一个 CSS 属性值的次序:
-
元素内嵌样式
-
文档内嵌样式
-
外部样式表
-
用户样式
-
浏览器样式
2.2 调整层叠次序 !imporatnt
使用 !imporatnt
语句可以把样式属性值标记为重要,改变正常的样式层叠次序。不管这种样式属性定义在什么地方,浏览器都会予以优先考虑。
p {
color: #f0f !important;
background: #ccc;
}
2.3 同级样式冲突 specificity
如果有两条定义于同一层次的样式都能应用于同一元素,而且它们都包含浏览器要求索的 CSS 属性值,这时候就需要依靠 专一程度和定义次序
来解决同级样式冲突
2.3.1 专一程度
选择器的特殊性:
- 选择器中
id
的数目(0-1-0-0) - 选择器中
class
、property
和pseudo class
的数目(0-0-1-0) - 选择器中
element
和pseudo element
的数目(0-0-0-1) -
NOTE:
结合符和通配选择符对特殊性没有任何贡献
浏览器将这三类评估所得值结合起来,由此辨识最特殊的样式并采用其属性值。在评定“专一程度”时要按照 a-b-c-d
的形式生成一个数字。(a代表在5类样式表中的次序,因为这里讨论的是同级样式,因此都可默认为 0;bcd 分别代表上述三类特征的统计结果) WARN:
它不是一个四位数,而是 逐位比较
,即:0-1-0-0 这个得分比 0-0-5-5 这个得分代表的专一程度更高。
2.3.2 定义次序
如果同一个样式属性出现在具体程度相同的几条样式中,那么浏览器会根据其位置的先后顺序选择所用的值 NOTE: 后来居上原则
3 样式的继承 inheritance
如果浏览器在直接相关的样式中找不到某个属性的值,就会求助于继承机制,使用父元素的这个样式属性值 WARN:
并非所有 CSS 属性都是可以继承的 NOTE:
与元素外观(文字颜色、字体等)相关的样式会被继承;与元素在页面上的布局相关的样式不会被继承。 NOTE:
在样式中使用 inherit
可以实现 强行实施继承
,明确指示浏览器在该属性上使用父元素的样式值。
p {
color: #fff;
border: medium solid #000;
}
span {
border: inherit; /* border: medium solid #000; */
}