w3ctech

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
    <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;
}

    <!-- HTML 文档 -->
<head>
<link href='style.css' rel='stylesheet'></link>
</head>
<body>
<p>use 'link' to set style</p>  
</body>
    文档想要链接多少样式表都行，为每个样式表使用一个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 属性值的次序：

  1. 元素内嵌样式
  2. 文档内嵌样式
  3. 外部样式表
  4. 用户样式
  5. 浏览器样式

2.2 调整层叠次序 !imporatnt

使用 !imporatnt 语句可以把样式属性值标记为重要，改变正常的样式层叠次序。不管这种样式属性定义在什么地方，浏览器都会予以优先考虑。

p {
  color: #f0f !important;
  background: #ccc;
}

2.3 同级样式冲突 specificity

如果有两条定义于同一层次的样式都能应用于同一元素，而且它们都包含浏览器要求索的 CSS 属性值，这时候就需要依靠 专一程度和定义次序 来解决同级样式冲突

2.3.1 专一程度

选择器的特殊性：

  1. 选择器中 id 的数目（0-1-0-0）
  2. 选择器中 class、property 和 pseudo class 的数目（0-0-1-0）
  3. 选择器中 element 和 pseudo element 的数目（0-0-0-1）
  4. 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微信

扫码关注w3ctech微信公众号

共收到0条回复