css叠层_CSS 理解样式层叠

CSS 理解样式层叠

@author: GreenMelon @吾南蛮野人 caigua 1270155919

@date: [2015-09-05 15:31]

@(keywords)[cascading]

[TOC]

前言

CSS(层叠样式表)用于规定HTML文档的呈现形式(外观和格式编排)，通过学习 《HTML权威指南》、《CSS权威指南》 和 《精通jQuery》，结合自己的实践经历，说说 CSS 样式层叠的那些事儿.

1 样式的来源

样式的来源有以下几种：

元素内嵌样式(将样式直接应用于元素，style属性)

文档内嵌样式(创建可用于多个元素的样式，style元素)

外部样式表样式(创建可用于多个HTML文档的样式，link元素)

浏览器样式

用户样式

1.1 元素内嵌样式

把样式应用到元素上，最直接的是使用 全局属性style

use Global Attribute 'style' to set style

1.2 文档内嵌样式

使用 style元素 定义文档内嵌样式

p {

font-size: 16px;

background-color: #ccc;

}

use 'style' to set style

1.3 外部样式表样式

使用 link元素 将一个样式表应用于一个 HTML 文档/* style.css 文件 */

p {

font-size: 16px;

background-color: #ccc;

}

use 'link' to set style

文档想要链接多少样式表都行，为每个样式表使用一个link元素即可。如果不同样式表中的样式使用了相同的选择器，那么这些 样式表的导入顺序很重要！ 这种情况下使用的是后导入的样式

NOTE: 后来居上原则

1.3.1 @import

可以用@import 语句将样式从一个样式表导入到另一个样式表中/* combined.css 文件 */

@import 'style.css'

p {

color: #fff;

}

一个样式表想导入多少别的样式表都行，只要为每个样式表使用一条 @import 语句即可。@import 语句必须位于样式表顶端，样式表自己定义的样式不能出现在它之前。

NOTE: 最好不要使用 @import

EXPLAIN: 为什么？

浏览器处理 @import 语句的效率往往不如处理多个link元素并靠样式层叠解决问题

1.3.2 @charset

在 CSS 样式表中可以出现在 @import 语句之前的只有 @charset 语句。@charset 语句用于声明样式表使用的字符编码。@charset 'UTF-8'

@import 'style.css'

p {

color: #fff;

}

如果样式表未声明使用的字符编码，那么浏览器将使用载入该样式表的 HTML 文档声明的编码。要是 HTML 文档也没有声明编码，那么默认情况下使用的是UTF-8

1.4 浏览器样式

浏览器样式(用户代理样式：user agent)是元素尚未设置样式时浏览器给它设置的默认样式。这些样式因浏览器而略有差异。

i.e. 浏览器对 a 标签的样式一般设置为：a {

color: #00f;

text-decoration： underline;

}

1.5 用户样式

大多数浏览器都允许用户定义自己的样式表(custom.css)，这类样式表中包含的样式称为用户样式。/* custom.css 文件 */

a {

color: #f0f;

background: #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; */

}

扫码关注w3ctech微信公众号