W3C规范阅读随笔

写在前面的

该博客为我阅读 CSS 2.1 规范时的随笔。为了方便与原规范中的章节对应上，章节信息与相关 W3C 规范中的内容保持一致。以下只记录了本人认为对于 CSS 编写者较为重要的部分，所以章节信息并不连续。

Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification 地址为：https://www.w3.org/TR/2011/REC-CSS2-20110607/。

1 关于 CSS 2.1 规范

1.4.2 CSS 属性定义

值（Value）
初始值（Initial）
应用（Applies to）
继承（Inherited）
百分比（Percentages）
媒体类型组（Media）
计算值（Computed value）

注意：以上信息每个属性都会定义的。

2 CSS 2.1 简介

2.3 CSS 处理模型

本节展示了一种支持 CSS 的用户代理可能使用的工作模型，这只是一种概念模型，实际实现可能不同：

解析源文档并创建文档树。（备注：文档树是源文档中编码的元素构成的树状结构）
识别目标媒体类型。
根据某种特定的媒体类型检索与文档关联的所有样式表。
在文档树中为每个元素的每个属性分配一个适用于目标媒体类型的值做标记。根据级联和继承中描述的机制为属性赋值。
计算值的部分取决于特定媒体类型的格式化算法。例如，如果目标媒体是屏幕（screen），则用户代理应用视觉格式化模型。
根据标记后的文档树生成一个格式化结构。通常，格式化结构与文档树非常相似，但也可能显著不同，特别是当作者使用伪类元素并生成内容时。首先，格式化结构根本不必是“树形”——结构的形式取决于具体实现方式。第二，格式化结构可以包含比文档树更多或更少的信息。例如，如果文档树中的元素具有值为“none”的“display”属性，则该元素将不会在格式化结构中生成任何内容。另一方面，列表元素可以在格式化结构中生成更多信息：列表元素的内容和列表样式信息。
将格式化结构转换到目标媒体（例如，打印结果，在屏幕上显示，呈现为语音等）。

2.3.1 画布（canvas）

备注：这里的“canvas”是用户代理层的术语，而不是 html 中的 canvas 标签。

画布描述了“渲染格式化结构的空间”。画布对于空间的每个维度都是无限的，但渲染通常发生在画布的有限区域内，由用户代理根据目标媒体创建。例如，呈现给屏幕的用户代理通常约束宽度，并基于视口的尺寸选择初始宽度。呈现给页面的用户代理通常约束宽度和高度。听觉用户代理可以在音频空间中施加约束，但不能在时间上进行约束。

2.4 CSS 设计原则

向前与向后兼容
对结构化文档的补充
供应商，平台和设备的独立性
可维护性
简洁
网络性能
灵活性
丰富性
可选的语言绑定
可访问性

4 语法和基本数据类型

备注：文档中使用 BNF 范式详细声明了 CSS 的词法与语法。据说 Webkit 是使用 Flex 和 Bison 解析器生成器，通过 CSS 语法文件自动创建解析器。

4.3 值

1 整数和实数

2 长度

在零长度之后，单元标识符是可选的。

长度单位有两种：相对单位和绝对单位。相对长度单位指定相对于另一个长度属性的长度。使用相对单位的样式表可以更容易地从一个输出环境缩放到另一个输出环境。

相对单位有：

em：关联字体的“font-size”
ex：关联字体的“x-height”（备注：“x-height”表示字符“x”的高度）

“em”单位等于使用它的元素的“font-size”属性的计算值。例外是当“em”出现在“font-size”属性本身的值时，在这种情况下，它指的是父元素的字体大小。

“ex”单位由元素的第一个可用字体决定。例外是“ex”出现在“font-size”属性的值中，在这种情况下，它指的是父元素的“ex”。

绝对长度单位是固定的。绝对单位包含物理单位（in，cm，mm，pt，pc）和 px 单位。

in：英寸 - 1in 等于 2.54cm
cm：厘米
mm：毫米
pt：磅（points）- CSS 中的 1pt 等于 1in 的 1/72
pc：倍卡（picas）- 1pc 等于 12pt
px：像素单位 - 1px 等于 0.75pt

设备分辨率对像素（px）单位存在影响，1px的面积在高分辨率的器件中可能由多个点覆盖。备注：移动端 1px 细线的问题

3 百分比

百分比值总是关联另一个值，例如长度。每个接受百分比的属性也定义了百分比所关联的值。该值可以是同一元素的另一个属性值、祖先元素的属性值或格式化上下文的值（例如，包含块的宽度）。

4 URL 和 URI

URI值（统一资源标识符，Uniform Resource Identifiers），用来在属性值中指定 URI 的函数符号是“url()”。如下：

body { background: url("http://www.example.com/pinkish.png") }

URI值的格式是“url(”后跟可选的空格和一个可选的单引号(')或双引号(")字符，接着是URI本身，后跟可选的单引号(')或双引号(")字符，后跟可选空格，后跟')。这两个引号字符必须相同。

5 计数器

6 颜色

颜色要么是一个关键字，要么是一个（符合）RGB 规范的数值。

7 字符串

字符串既可以用双引号编写，也可以用单引号编写。

8 不支持的值

如果 UA 不支持某个值，则在解析样式表时忽略该值，就好像该值是非法值一样。

6 属性赋值、层叠（Cascading）和继承

6.1 指定值、计算值和实际值

一旦用户代理解析文档并构建文档树，它就必须为树中的每个元素分配一个允许在目标媒体类型中使用的值。

属性最终的值通过四个步骤来进行计算：规范中指定的值（specified vlaue，指定值），然后处理得到一个可以用于继承的值（计算值，computed value），接着在必要时转换为使用值（使用值，used value），最后根据本地环境的限制进行转换（实际值，actual value）。

6.1.1 指定值（specified value）

用户代理必须首先基于以下机制（按优先级顺序）为每个属性分配指定值：

如果级联产生一个值，则使用它。
否则，如果该属性可继承，并且该元素不是文档树的根，则使用父元素的计算值。
否则使用属性的初始值。每个属性的初始值在属性定义中指定（备注：属性定义也在CSS规范中）。

6.1.2 计算值（computed value）

指定值通过层叠被计算为计算值，例如，URI 被转换成绝对的，“em”和“ex”单位被计算为像素或者绝对长度。

6.1.3 应用值（used value）

处理计算值时，尽可能不要格式化文档。然而，有些值只能在文档布局完成时确定。例如，如果一个元素的宽度是其包含块的特定百分比，在包含块的宽度确定之前无法确定这个宽度。

6.1.4 实际值（actual value）

原则上，应用值应该用于渲染，但用户代理可能无法在给定的环境中利用该值。例如，用户代理或许只能用整数像素宽度渲染边框，因此不得不对宽度的计算值做近似处理，或者用户代理可能被迫只能用黑白色调而不是全彩色。实际值是经过近似处理后的应用值。

6.2 继承

继承是基于文档树的，并且不会被匿名框截断。文档树中元素的某些属性可以被其子元素继承，每个 CSS 属性都定义了它是否可继承。

当继承发生时，元素继承计算值。父元素计算值成为子元素的指定值和计算值。

备注：继承的值的权重最小。

2.1 “inherit”

每个属性都可以使用“inherit”这个级联值，这意味着，该属性将使用其父元素属性的指定值。

如果在根元素上设置“inherit”值，则使用属性的初始值。

6.3 @import 规则

“@import”规则允许用户从样式表中导入其它的样式规则。在 CSS 2.1 中，任何“@import”必须先于所有其他规则（“@charset”规则除外）。“@import”关键字后面必须包含样式表的 URI。也允许是字符串，它将被解释为周围有URL(…)。

用户代理可以避免为不支持的媒体类型检索资源，因此作者可以指定与特定媒体相关的“@import”规则。这些条件导入在 URI 之后指定逗号分隔的媒体类型。

@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;

6.4 层叠（cascade）

备注：层叠是为了解决样式重叠问题。

样式表可能有三个不同的来源：作者、用户和用户代理。

作者：作者根据文档语言的约定来给源文档指定样式表。例如，在HTML中，样式表可以包含在文档中或链接到外部。
用户：用户可以给特定文档指定样式信息。例如，用户可以指定一个包含样式表的文件，或者用户代理可以提供生成用户样式表的界面（或者与此类似的功能）。
用户代理：一致的用户代理必须应用默认样式表。用户代理的默认样式表应该以满足文档语言的一般呈现期望的方式呈现文档语言的元素（例如，对于视觉浏览器，HTML中的em元素使用斜体字体表示）。有关HTML文档的推荐默认样式表，请参见HTML的示例样式表。

注意，用户可以修改影响默认样式表的系统设置（例如，系统颜色）。然而，一些用户代理无法更改默认样式表中的值。

从这三个来源的样式表将在范围内重叠，并且它们根据层叠进行交互。

CSS 层叠给每个样式规则分配权重。当应用几个规则时，权重最大的规则优先。

默认情况下，作者样式表中的规则比用户样式表中的规则具有大的权重。

6.4.1 层叠顺序

找到某个元素的某个属性的值，用户代理必须按照下列步骤进行优先级排序：

找到所有适用于目标媒体类型的元素的属性声明。如果关联的选择器匹配存在的元素，并且目标媒体包含在作用于该声明的 @media 规则的媒体列表，则应用该声明
根据重要性（常规或重要）和来源（编写者，用户或用户代理）排序，升序优先级为：
1. 用户代理声明
2. 用户常规声明
3. 编写者常规声明
4. 编写者重要声明
5. 用户重要声明
相同重要性和来源的规则根据选择器的特殊性（排序：更特殊的选择器将覆盖一般的。伪元素和伪类被分别算作常规元素和类）
最后，根据指定顺序排序：如果两个声明的权重，来源和特殊性都相同，后声明的生效。引入的样式表（译注：这里应该是指'@import'，而不是广义的通过各种方式引入样式表）中的声明被认为在样式表自身的所有声明之前

6.4.2 “!important”规则

“!important”规则的权重高于没有“!important”标志的规则。

4.3 计算选择器的特殊性（specificity）

选择器的特殊性计算如下：

如果是在“style”属性中的规则，则 a = 1，而使用选择器的规则，则为 a = 0（在 HTML 中，元素的“style”属性的值是样式表规则。这些规则没有选择器，所以a＝1，b＝0，c＝0，d＝0。）
b = 选择器中 id 属性的数目
c = 选择器中其他属性和伪类的数目
d = 选择器中元素名称和伪元素的数目

例子如下：

 *             {}  /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */
 li            {}  /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
 li:first-line {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
 ul li         {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
 ul ol+li      {}  /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
 h1 + *[rel=up]{}  /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
 ul ol li.red  {}  /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
 li.red.level  {}  /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */
 #x34y         {}  /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
 style=""          /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */

7 媒体类型

样式表最重要的特征之一是，能让文档呈现在不同的媒体上：屏幕上、纸上、语音合成器、盲文设备等。

某些 CSS 属性只针对某种特定媒体而设计（例如，“page-break-before”属性仅适用于分页媒体）。然而，也存在不同媒体类型可以共享的属性，但该属性需要不同的值。例如，“font-size”属性对于屏幕和打印媒体都是有用的。两种不同的媒体类型，对共享属性要求不同的值；文档通常在计算机屏幕上比在纸上需要更大的字体。因此，有必要让样式表或样式表的一部分适用于某些特定媒体类型。

目前有两种方法来限制样式表用于某种特定的媒体：

使用 @media 或 @import 规则，在样式表中指定目标媒体。

@import url("fancyfonts.css") screen;
@media print {
  /* style sheet for print goes here */
}

在文档语言中指定目标媒体。例如，在HTML 4 中，“link”元素上的“media”属性限制外部样式表用于指定的媒体：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
   <HEAD>
      <TITLE>Link to a target medium</TITLE>
      <LINK REL="stylesheet" TYPE="text/css" 
     MEDIA="print, handheld" HREF="foo.css">
   </HEAD>
   <BODY>
      <P>The body...
   </BODY>
</HTML>