fearnliu / fuzzy-enigma Goto Github PK

CSS2.2的处理模型

CSS2.2标准中介绍了一个支持CSS的UA（用户代理，通常是浏览器，下文相同，不再赘述）如何工作的概念模型，虽然具体实现是由UA自己决定，但这个概念模型对于我们学习前端基础知识还是很有帮助的

此模型中，UA通过以下步骤处理源代码：

1. 解析源代码并创建文档树
2. 识别目标媒体类型，通常是screen屏幕
3. 检索与目标媒体类型指定的文档相关联的所有样式表
4. 通过为适用于目标媒体类型的每个属性分配一个值来为文档树中的每个元素添加注释。属性赋值依据CSS级联和继承机制。部分值的计算取决于适用于目标媒体类型的格式化算法
5. 从注释文档树中，生成格式化结构。通常，格式化结构与文档树非常相似，但也可能有很大不同，特别是当作者使用伪元素和生成内容（content）时。首先，格式化结构不必是“树形”的——结构的性质取决于实现。其次，格式化结构也许比文档树包含更多或更少信息。例如，如果文档树中某个元素的display属性值为none，则该元素在格式化结构中不会生成任何内容。另一方面，列表元素在格式化结构中也许生成更多信息：列表元素的内容和列表元素的样式信息（例如，列表项头部的图片）。
6. 将格式化结构传送到目标媒体。（例如，打印结果，在屏幕上显示它们，将它们渲染为语音等）。

画布

对于所有媒体而言，术语画布描述了”用于渲染格式化结构的空间“。画布对于空间的每个维度是无限的，但是渲染通常发生在画布的有限区域内，由UA根据目标媒体建立。例如，UA在屏幕上渲染通常会施加最小宽度并且基于视口尺寸选择初始宽度。UA渲染到页面时通常施加宽度和高度限制。听觉用户也许对音频空间施加限制，但不及时。

CSS2.2的寻址模式

CSS2.2选择器和属性允许样式表引用文档或UA的以下部分：

• 文档树中的元素以及它们之间的某些关系（CSS元素选择器，关系选择器）
• 文档树中元素的属性以及这些属性的值（CSS属性选择器）
• 元素内容（content）的某些部分（CSS伪元素）
• 文档树中处于某种状态的元素（CSS伪类）
• 文档将在其中渲染的画布的某些方面
• 一些系统信息

CSS属性定义

W3C的CSS2.2规范针对CSS属性定义的约定如下图所示

Value

一个CSS的属性值通常由以下一种或多种类型的组件值构成：

1. 关键字值（例如，auto，inherit，unset等）
2. 基本数据类型，由<和>包裹着，例如规范中的<length>和<percentage>等
3. 与具有相同名称的属性具有相同范围值的类型，这种情况下，类型名字与属性名字相同，例如<'border-width'>
4. 非终端数据类型，不与属性同名；例如<border-width>

在这些定义中出现的其他单词必须是字面量形式的关键字，不带引号（'），斜杠（/），逗号（,）等。

以上几中类型的组件值可能按照以下组合构成属性值：

• 并列排布的单词，这意味着它们所有必须以被给出的顺序出现
• 单竖线符号（|）分隔的组件值，有且只有操作符某一侧的值必须出现
• 双竖线符号（||）分隔的组件值，它们其中一个或多个可以任何顺序出现
• 双且符号（&&）分隔的组件值，它们所有必须出现，可以任何顺序出现
• 中括号（[ ]）包裹的组件值，主要用于划分分组

以上几种操作符的优先级由强到弱依次如下：

 并列排布 强于 && 强于 || 强于 |

例如：

a b | c || d && e f

等价于

[ a b ]  |  [ c  ||  [ d  &&  [ e f ] ]

另外，每个类型值，关键字或者分组后面可以跟随以下修饰符：

• *，表示其之前的类型、单词或者分组可以出现0次或者多次
• +，表示其之前的类型、单词或者分组可以出现1次或者多次
• ?，表示其之前的类型、单词或者分组可以出现0次或者1次
• {A, B}，表示其之前的类型、单词或者分组至少出现A次，至多出现B次。

Initial

指明属性的初始值。

Applies to

列出属性适用的元素。所有元素都被认为具有所有属性，但是某些属性对某些类型的元素没有渲染效果。

Inherited

指明属性的值是否可以从祖先元素继承。

Percentage values

指明如何解释属性的百分比，前提是百分比对于属性值是合法的。如果此处为N/A，则表示属性不接受百分比值。

Media groups

指明属性可以应用的媒体组。

Computed value

描述属性的计算值。

简写属性

有些属性是简写属性，就是多个简单属性放在一起的速记写法，也可以理解为综合了多个简单属性的复合属性。

例如，font属性就是font-style，font-varinat，font-weight，font-size，line-height，font-family多个属性的简写属性。

值得注意的是，当省略了简写属性中某些对应位置上的值时，那么对应的简单属性就会被分配到其属性的Initial Value

语法

关键字

关键字具有标识符的形式，关键字不得放在双引号之内。

供应商特定扩展

在CSS中，标识符可以-或_开头。以-或·_开头的关键字和属性名称保留用于特定供应商的扩展。此类供应商扩展具有以下形式之一：

• - + 供应商标识符 + - + 有意义的名字
• _ + 供应商标识符 + - + 有意义的名字

初始短划线或下划线会保证不被任何当前或未来的CSS Level用于属性或者关键字。因此，典型的CSS实现可能无法识别这些属性，并可能根据处理解析错误的规则忽略它们。然而，由于最初的短划线或下划线语法是语法的一部分，所以CSS2.2实现者应该始终能够使用符合CSS的解析器，而不管它们是否支持任何供应商特定扩展。

CSS开发者应该尽量避免使用供应商特定扩展。

字符和案列

以下规则始终成立：

• 所有CSS语法在ASCII范围内都是不区分大小写的（即[a-z]和[A-Z]是等价的），除了不受CSS控制的部分。例如，HTML的id和class属性名称，URI的语法。

• CSS中，标识符（包括元素名称，类和选择器中的ID）只能包含字符[a-zA-Z0-9]和 ISO 10646字符U+0080及以上，加上连字符和下划线；它们不能以数字、两个连字符（--）或数字后跟着连字符开头。标识符也可以包含转义字符和ISO 10646字符作为数字代码。

• CSS2.2中，反斜线（\）字符可以表示三种类型的字符转义之一。在CSS注释中，反斜线代表自身，如果反斜线紧接在样式表的末尾，它也代表它自身。

  首先，在一个字符内部，一个反斜杠后跟新行被忽略。在字符串外部，一个反斜杠后跟一个新行表示它自身。
  其次，它取消了特殊CSS字符的含义。

语句

一个CSS样式表由一系列语句组成。有两种语句：at-rules和规则集。语句之间可能会有空白字符。

At-rules

At-rules 以一个at关键字开始，@字符后跟一个标识符（例如@import和@page）。

一个 at-rule 包含一切直到下一个分号或下一个块，无论哪一个先出现。

实现CSS2.2的UA必须忽略出现在块内或者跟在除@charset或@import规则以外的任何非忽略语句的后面的任何@import规则。

块

一个块以左花括号（{）开始，以配对右花括号（}）结束。其之间可以是任何token，但圆括号(( ))，方括号([ ])和花括号({ })必须总是成对出现，可以嵌套。
单引号和双引号也必须在匹配对中出现，并且它们之间的字符被解析为一个字符串。

规则集、声明块和选择器