# 4语法和基本数据类型
> by [九月](https://i.getshell.cn/)
[TOC]
## 4.1语法
本节讨论了对于任一版本的CSS（包括CSS2.2）都相同的语法（及向下兼容的解析规则）。CSS以后的版本将保持这一核心语法，尽管它们可以加入额外的语法限制。
这些描述是标准化的。在[附录 G](https://www.w3.org/TR/CSS22/grammar.html)中的语法规则是它们的补充和完善。
在本说明书中，表述“紧接之前”或“之后立即”表示没有中间空白或注释。
### 4.1.1标识化
CSS的所有级别——级别1，级别2以及将来的级别——都使用相同的核心语法。这就可以让用户端解析（尽管不是完全理解）样式表，而这些样式表可能是以用户端出现时还没有的CSS级别写成的。设计者以此来创建可以在老的用户端上工作的样式表，同时又保持使用最新级别的CSS。
在词汇级别，CSS样式表包含一系列的表征。CSS2的表征见下表所列。定义采用Lex样式规范表达式。八进制数参见ISO 10646（[[ISO10646]](https://www.w3.org/TR/CSS22/refs.html#ref-ISO10646)）。在Lex中，如果出现多重匹配，则最长的那个匹配决定了表征。
~~~
标识 语义
IDENT {ident}
ATKEYWORD @{ident}
STRING {string}
BAD_STRING {badstring}
BAD_URI {baduri}
BAD_COMMENT {badcomment}
HASH #{name}
NUMBER {num}
PERCENTAGE {num}%
DIMENSION {num}{ident}
URI {U}{R}{L}\({w}{string}{w}\)|
{U}{R}{L}\({w}([!#$%&*-\[\]-~]|{nonascii}|{escape})*{w}\)
UNICODE-RANGE u\+[?]{1,6}|
u\+[0-9a-f]{1}[?]{0,5}|
u\+[0-9a-f]{2}[?]{0,4}|
u\+[0-9a-f]{3}[?]{0,3}|
u\+[0-9a-f]{4}[?]{0,2}|
u\+[0-9a-f]{5}[?]{0,1}|
u\+[0-9a-f]{6}|
u\+[0-9a-f]{1,6}-[0-9a-f]{1,6}
CDO <!--
CDC -->
: :
; ;
{ \{
} \}
( \(
) \)
[ \[
] \]
S [ \t\r\n\f]+
COMMENT \/\*[^*]*\*+([^/*][^*]*\*+)*\/
FUNCTION {ident}\(
INCLUDES ~=
DASHMATCH |=
DELIM any other character not matched by the above rules, and neither a single nor a double quote
~~~
上述包含在花括号（{}）中的宏的定义如下：
~~~
宏 定义
ident {nmstart}{nmchar}*
name {nmchar}+
nmstart [a-zA-Z]|{nonascii}|{escape}
nonascii [^\0-\177]
unicode \\[0-9a-f]{1,6}[ \n\r\t\f]?
escape {unicode}|\\[ -~\200-\4177777]
nmchar [a-z0-9-]|{nonascii}|{escape}
num [0-9]+|[0-9]*\.[0-9]+
string {string1}|{string2}
string1 \"([\t !#$%&(-~]|\\{nl}|\'|{nonascii}|{escape})*\"
string2 \'([\t !#$%&(-~]|\\{nl}|\"|{nonascii}|{escape})*\'
nl \n|\r\n|\r|\f
w [ \t\r\n\f]*
~~~
以下是CSS的核心语法。 以下各节介绍如何使用它。 附录G描述了更接近CSS级别2语言的更严格的语法。 根据此语法可以解析的样式表部分，但不能根据[附录G](https://www.w3.org/TR/CSS22/grammar.html)中的语法解析的部分将根据处理解析[错误的规则](https://www.w3.org/TR/CSS22/syndata.html#parsing-errors)被忽略。
~~~
stylesheet : [ CDO | CDC | S | statement ]*;
statement : ruleset | at-rule;
at-rule : ATKEYWORD S* any* [ block | ';' S* ];
block : '{' S* [ any | block | ATKEYWORD S* | ';' S* ]* '}' S*;
ruleset : selector? '{' S* declaration-list '}' S*;
declaration-list: declaration [ ';' S* declaration-list ]?
| at-rule declaration-list
| /* empty */;
selector : any+;
declaration : property S* ':' S* value;
property : IDENT;
value : [ any | block | ATKEYWORD S* ]+;
any : [ IDENT | NUMBER | PERCENTAGE | DIMENSION | STRING
| DELIM | URI | HASH | UNICODE-RANGE | INCLUDES
| DASHMATCH | ':' | FUNCTION S* [any|unused]* ')'
| '(' S* [any|unused]* ')' | '[' S* [any|unused]* ']'
] S*;
unused : block | ATKEYWORD S* | ';' S* | CDO S* | CDC S*;
~~~
“unuse”的用法不在CSS中使用，也不会被任何未来的扩展使用。 它仅包含在这里以帮助处理错误。 （请参阅4.2“处理分析错误的规则”。）
注释的特征不在语法中出现（为了使语法更容易读）。不过，任意数目的这些特征可以出现在其它特征的任何地方。
上述语法中的S表征表示空白。只有字符“空格”（Unicode编码32），“制表符”（9），“换行”（10），“回车”（13）以及“换页”（12）可以出现在空白中。其它类似空格的字符，如“em-space”（8195）和“表意空格”（12288）肯定不是空白的一部分。
### 4.1.2 关键字
关键字以标识符的形式出现。关键字不可以放置在引号（"..."或'...'）之间。因此，
red
是一个关键字，而
"red"
则不是。（它是一个字符串。）其它不合法的例子如：
~~~
width: "auto";
border: "none";
background: "red";
~~~
#### 4.1.2.1 浏览器厂商特定扩展
在CSS中，标示符可以以'-' (划线) 或 '_' (下划线)开始。关键词或属性名以'-'或'_'开始的保留给各种浏览器扩展使用。下面是CSS浏览器厂商特定扩展（Vendor-specific extensions）的公式：
~~~
-浏览器厂商标示符-名称
_浏览器厂商标示符_名称
~~~
例如，如果XYZ组织添加了一个属性来描述显示屏东侧的边框颜色，则可以将其称为-xyz-border-east-color。
~~~
-moz-box-sizing
-moz-border-radius
-wap-accesskey
~~~
我们要保证短划线或下划线不会被任何当前或未来级别的CSS用于属性或关键字。 因此，典型的CSS实现可能无法识别这些属性，并可能根据处理解析错误的规则忽略它们。 但是，由于最初的短划线或下划线是语法的一部分，CSS 2.2实现者应始终能够使用符合CSS的解析器，而不管它们是否支持任何特定于供应商的扩展。
作者应该避免浏览器厂商特定扩展
#### 4.1.2.2历史记录
在撰写本文时，已知存在以下前缀：
| 前缀| 组织 |
| --- | --- |
| -ms-, mso- | Microsoft |
| -moz- | Mozilla |
| -o-, -xv- | Opera Software |
| -atsc- | Advanced Television Standards Committee |
| -wap- | The WAP Forum |
| -khtml- | KDE |
| -webkit- | Apple |
| prince- | YesLogic |
| -ah- | Antenna House |
| -hp- | Hewlett Packard |
| -ro- | Real Objects |
| -rim- | Research In Motion |
| -tc- | TallComponents |
### 4.1.3 字符和大小写
下面的规则总是有效：
* 所有CSS样式表都是大小写不敏感，除了不在CSS控制之下的那些部分。例如，HTML属性“id”和“class”的值的大小写敏感性，字体名称，及URI内容，这些都在本规范讨论范围之外。特别注意，在HTML中元素名称与大小写无关，而在XML中是大小写敏感的。
* CSS中，标识符（包括[选择器](https://www.w3.org/TR/CSS22/selector.html)中的元素名，类和ID）只能包含字符[A-Za-z0-9]以及ISO 10646字符编号161及以上，加上连字号（-）；它们不能以连字号或数字开头。它们还可以包含转义字符加任何ISO 10646字符作为一个数字编码（见下一条）。例如，标识符"B&W?"可以写成"B\&W\?"或"B\26 W\3F"。
注意，Unicode和ISO 10646是码码对应的（参见[[UNICODE]](https://www.w3.org/TR/CSS22/refs.html#ref-UNICODE)及[[ISO10646]](https://www.w3.org/TR/CSS22/refs.html#ref-ISO10646)）。
* CSS2.2中，反斜杠（\）字符表示三种类型的字符转义。
首先，在字符串中，反斜杠后接一个新行将被忽略（即，好象字符串既不包含反斜杠，也不包含新行）。
第二，它取消了特殊的CSS字符的含义。任何字符（除了十六进制数）都可以由反斜杠转义而消除了它本来的含义。例如，"\""是一个包含双引号的字符串。样式表的处理器不可以在样式表中去除这些反斜杠，否则会改变样式表的含义。
第三，反斜杠转义允许作者引用在文档中不易输入的字符。在这种情况下，反斜杠后接最长为六位的十六进制数（0..9A..F），表示ISO 10646（[ISO10646]）中对应于该数值的字符。 如果在十六进制数后跟着数字或字母，那么该十六进制数的结束要标记清楚。有两个方法可以做到：
带一个空格（或其它空白字符）："\26 B" ("&B")
补足十六进制数到六位："\000026B" ("&B")
事实上，这两个方法可以结合起来。在十六进制后只忽略一个空白字符。这就意味着转义之后的真正的空白必须转义或重复一次。
* 反斜杠转义总是被认为是标识符或字符串的一部分（即，"\7B"不是一个标点符号，而"{"则是。"\32"可以用作类名的开头，而"2"就不可以）。
### 4.1.4 语句
任何版本的CSS的CSS样式表，包含一系列的语句（见上面的语法）。有两种语句：@规则和规则集。语句周围可以有空白。
### 4.1.5 @规则
@规则以一个关键字@开始，紧跟在后的是一个[标识符](https://www.w3.org/TR/CSS22/syndata.html#value-def-identifier)（如'@import'，'@page'）。
一个@规则包括到下一个分号(;)或下一个[块](https://www.w3.org/TR/CSS22/syndata.html#block)间的所有内容（以先出现的为分界）。CSS用户端一旦遇上不认识的@规则，它必须忽略这一规则，并继续其后的解析。
CSS2用户端必须[忽略](https://www.w3.org/TR/CSS22/syndata.html#ignore)在块内出现或在其它任何一个规则集之后出现的任何['@import'](https://www.w3.org/TR/CSS22/cascade.html#at-import)规则。
假定一个CSS2解析器遇到如下的样式表：
~~~
@import "subs.css";
H1 { color: blue }
@import "list.css";
~~~
根据CSS2.2，第二个'@import'是非法的。CSS2.2解析器忽略整个@规则，从而有效的样式表缩减为：
~~~
@import "subs.css";
h1 { color: blue }
~~~
下面这个例子中，第二个'@import'规则是无效的，因为它出现在一个'@media' 块中。
~~~
@import "subs.css";
@media print {
@import "print-main.css";
body { font-size: 10pt }
}
h1 {color: blue }
~~~
相反，要实现仅为“print”媒体样式表导入的效果，请使用具有媒体语法的@import规则，例如：
~~~
@import "subs.css";
@import "print-main.css" print;
@media print {
body { font-size: 10pt }
}
h1 {color: blue }
~~~
### 4.1.6 块
块以一个左花括号（{）开始，并以相匹配的右花括号（}）结束。在其间，可以是任何字符。但是，括号（( )），方括号（[ ]）和花括号（{ }）必须成对出现，并可以嵌套。单引号（'）和双引号（"）也必须成对出现，其间的字符被解析为一个字符串。字符串的定义参见上面的[标识化](https://www.w3.org/TR/CSS22/syndata.html#tokenization)。
~~~
这里是一个块的例子。注意，双引号内的右花括号并不匹配本块开始的花括号。而第二个单引号是在转义字符中，从而不匹配第一个单引号：
{ causta: "}" + ({7} * '\'') }
注意，上例尽管不是有效的CSS2.2，但还是一个块的定义。
~~~
### 4.1.7 规则集，声明块和选择器
一个规则集（也称为“规则”）包含一个选择子，以及随后的声明块。
一个声明块（下文中也称为{}块）以左花括号开始（{），以与之匹配的右花括号（}）结束。其间是零个或多个以分号（;）分割的声明的列表。
选择器（参见[选择器](https://www.w3.org/TR/CSS22/selector.html)一节）包含延伸到（但是不包含）第一个左花括号（{）的所有内容。 一个选择子总是和一个{}块相随。如果用户端无法解析选择子（例如，它不是有效的CSS2），它也必须忽略{}块。
CSS2.2赋予选择子中的逗号（,）以特殊的含义。不过，由于还不知道在将来的CSS版本中逗号是否会获得其它的含义，当选择子中任何地方出错后，即使选择子的其它部分可能看起来和CSS2。2吻合，但是整个语句将被忽略。
例如，由于"&"在CSS2.2中不是一个有效的表征，CSS2。2用户端必须忽略整个第二行，也不把H3的颜色设置为红色:
h1, h2 {color: green }
h3, h4 & h5 {color: red }
h6 {color: black }
~~~
下面是一个更复杂的例子。前两对花括号在字符串中，并不标记着选择子的结束。它是一个有效的CSS2语句。
p[example="public class foo\
{\
private int x;\
\
foo(int x) {\
this.x = x;\
}\
\
}"] { color: red }
~~~
### 4.1.8 声明和属性
一个声明要么为空，要么包含一个属性，随后是一个冒号（:），随后是一个值。其间可以有[空白](https://www.w3.org/TR/CSS22/syndata.html#whitespace)。
鉴于选择子器工作的方式，同一选择子的多重声明可以组成以分号（;）分割的组。
~~~
因此，下面的规则：
H1 { font-weight: bold }
H1 { font-size: 12pt }
H1 { line-height: 14pt }
H1 { font-family: Helvetica }
H1 { font-variant: normal }
H1 { font-style: normal }
就等同于：
H1 {
font-weight: bold;
font-size: 12pt;
line-height: 14pt;
font-family: Helvetica;
font-variant: normal;
font-style: normal
}
~~~
一个属性是一个[标识符](https://www.w3.org/TR/CSS22/syndata.html#value-def-identifier)。值中可以出现任何字符，不过括号（"( )"），花括号（"{ }"），单引号（'）和双引号（"）必须匹配成对出现。而不在字符串中的分号必须[转义](https://www.w3.org/TR/CSS22/syndata.html#escaped-characters)。括号，方括号和花括号可以嵌套。在引号中，字符解析为一个字符串。
值的语法由各属性单独规定。在任何情况下，值的构成包含标识符，字符串，数值，长度，百分比，URI，颜色，角度，时间和频率等。
用户端必须[忽略](https://www.w3.org/TR/CSS22/syndata.html#ignore)带有无效属性名或无效值的声明。每一个CSS2属性都有它自己的语法和语义的限制，规定它可以接受的值。
~~~
例如，我们假定CSS2解析器遇到如下的样式表：
H1 { color: red; font-style: 12pt } /* 无效值：12pt */
P { color: blue; font-vendor: any; /* 无效属性：font-vendor */
font-variant: small-caps }
EM EM { font-style: normal }
第一行中，第二个声明带有一个无效值'12pt'。第二行的第二个声明包含未定义的属性'font-vendor'。CSS2解析器将忽略这些声明，从而有效的样式表缩减为：
H1 { color: red; }
P { color: blue; font-variant: small-caps }
EM EM { font-style: normal }
~~~
### 4.1.9 注解
注解以字符"/*"开始，并以字符"*/"结束。它们可以在表征之间的任何位置出现，它们的内容对渲染没有任何影响。注解不能嵌套。
CSS也允许SGML注解的分割符（"<!--"及"-->"）出现在某些特定的地方，但是它们不分割CSS的注解。允许SGML注解的分割符可以使样式规则出现在HTML源文档中的STYLE元素内，并且对于3.2版本以前的HTML用户端是不可见的。更多的信息，请参见HTML 4.0规范[HTML40]）。
## 4.2 解析错误的处理规则
某些情况下，用户端必须忽略一个不合法的样式表的一部分。本规范定义忽略的含义是用户端解析不合法的部分（以找到它的开始和结束），但是不加以任何处理，就如同它不存在那样。
为了保证在将来能为已有的属性加入新的值或加入新的属性，用户端在碰到如下情形时，必须遵循如下规则：
***未知的属性***。用户端必须忽略带有未知属性的声明。例如，如果有这样一个样式表：
~~~
H1 { color: red; rotation: 70minutes }
用户处理这一样式表时，如同
H1 { color: red }
~~~
***非法值*** 用户端必须忽略带有非法值的声明。例如：
~~~
IMG { float: left } /* 正确的CSS2 */
IMG { float: left here } /* "here"不是'float'的值 */
IMG { background: "red" } /* CSS2中关键字不可以加引号 */
IMG { border-width: 3 } /* 长度值必须指定单位 */
CSS2.2解析器将保留第一条规则并忽略其它的规则，就如同：
IMG { float: left }
IMG { }
IMG { }
IMG { }
与将来的CSS规范一致的用户端还可以接受一条或多条其它的规则。
~~~
***声明异常***。用户端必须在声明结束以前处理好声明异常的标识符，同时也要遵循，匹配（），[]，{}，“”和“'成对的规则，并正确处理转义。 例如，声明异常可能是缺少属性名称，冒号（:)或属性值。
当UA期望声明或规则的开始（即，IDENT标记或ATKEYWORD标记）但是发现意外标记时，该标记被认为是畸形声明的第一个标记。 即，对于格式错误的声明而不是格式错误的声明的规则被用于确定哪种令牌在这种情况下被忽略。
例如：
~~~
p { color:green }
p { @foo { bar: baz } color:green } /* unknown at-rule */
p { color:green; color } /* malformed declaration missing ':', value */
p { color:red; color; color:green } /* same with expected recovery */
p { color:green; color: } /* malformed declaration missing value */
p { color:red; color:; color:green } /* same with expected recovery */
p { color:green; color{;color:maroon} } /* unexpected tokens { } */
p { color:red; color{;color:maroon}; color:green } /* same with recovery */
~~~
***语句异常*** 用户端必须在声明结束以前处理好语句异常的标识符，同时也要遵循，匹配（），[]，{}，“”和“'成对的规则，并正确处理转义。例如，格式错误的语句可能包含意外的大括号或at关键字。
以下是实例：
~~~
p @here {color: red} /* ruleset with unexpected at-keyword "@here" */
@foo @bar; /* at-rule with unexpected at-keyword "@bar" */
}} {{ - }} /* ruleset with unexpected right brace */
) ( {} ) p {color: red } /* ruleset with unexpected right parenthesis */
~~~
***无效的at关键字*** 用户端必须忽略一个无效的at关键字及其后面的所有内容，一直到包含无效的at关键字的块的末尾，或者直到包括下一个分号（;），或者直到并包括下一个块
（{...}）， 以先到者为准。
例如，考虑以下几点：
~~~
@three-dee {
@background-lighting {
azimuth: 30deg;
elevation: 190deg;
}
h1 { color: red }
}
h1 { color: blue }
~~~
'@ three-dee'at-rule不是css 2.2的一部分。
因此，整个规则（直到并包括第三个右大括号）都被忽略。
一个css 2.2用户代理忽略它，有效地将样式表减少到：
~~~
h1 { color: blue }
~~~
在规则内的某些内容因为无效而被忽略，如@ media-rule内的无效声明，并不会使整个规则无效。
***样式结束错误***
用户端必须关闭样式表末尾的所有打开的结构（例如：块，括号，括号，规则，字符串和注释）。
~~~
@media screen {
p:before { content: 'Hello
~~~
将被视为下面这样：
~~~
@media screen {
p:before { content: 'Hello'; }
}
~~~
以符合UA
***意外的字符串结尾*** 用户端必须在到达行末时关闭字符串（即，在未转义的换行符，回车符或换页符之前），然后删除其中找到该字符串的构造（声明或规则）。
例如：
~~~
p {
color: green;
font-family: 'Courier New Times
color: red;
color: green;
}
~~~
将被视为下面这样：
~~~
p { color: green; color: green; }
~~~
因为第二个声明（从'font-family'到'color：red'之后的分号）是无效的并且被丢弃。
* 另请参阅[解析声明块的规则的规则集，声明块和选择器](https://www.w3.org/TR/CSS22/syndata.html#rule-sets)。
## 4.3 值
### 4.3.1 整型和实型数
某些值的类型可以包括整型值（表示为<integer>）或实型值（表示为<number>）。实型和整型数都只以十进制符号表示。<integer>包括一个或多个数字"0"到数字"9"。<number>可以是一个<integer>，或者在点号（.）后接零个或多个数字。整数和实数可以前缀一个"-"或"+"来表示符号。
注意，很多接受整数和实数作为其值的属性实际上会有取值范围的限制，通常是非负值。
### 4.3.2 长度
长度是指水平或垂直方向的度量。
长度值的格式（本规范中表示为<length>）为：一个可选的符号字符（'+'或'-'，'+'是缺省的符号），紧接在后的是一个<[number](https://www.w3.org/TR/CSS22/syndata.html#value-def-number)>（小数点可有可无），紧接在后的是一个单位标识符（如px，deg等等）。在'0'长度之后，单位标识符可以省略的。
某些属性允许负的长度值，不过这将使格式化模型变得复杂，并可能伴随着与实现相关得限制。如果不能支持负的长度值，它应该被转换到最接近的可以被支持的[值](https://www.w3.org/TR/CSS22/cascade.html#usedValue)。
有两种类型的长度单位：相对的和绝对的。 相对长度单位规定一个长度相对于另外一个长度属性。使用相对单位的样式表在从一个媒介转移到另一个媒介（如从计算机显示器到激光打印机）时，定比会相对简单一些。
相对单位有：
* em：相关字体的'[font-size](https://www.w3.org/TR/CSS22/fonts.html#propdef-font-size)'
* ex：相关字体的'x-height'
~~~
h1 { margin: 0.5em } /* em */
h1 { margin: 1ex } /* ex */
~~~
'em'单位等于它所使用的元素的'font-size'属性的计算值。例外情况是当'font-size'属性本身的值出现'em'时，在这种情况下，它指的是父元素的字体大小。
它可以用于垂直或水平测量。（该单位有时也被称为印刷文本中的四边形宽度。）
'ex'单元由元素的第一个可用字体定义。
在'font-size'属性的值中出现'ex'的情况除外，在这种情况下，它指向父元素的'ex'。
'x-height'之所以这么叫，因为它通常等于小写字母“x”的高度。
然而，即使对于不包含“x”的字体也定义了“ex”
字体的x高度可以通过不同的方式找到。一些字体包含x高度的可靠指标。如果可靠的字体指标不可用，则可以从小写字形的高度确定x高度。一种可能的启发是查看小写字母“o”的字形在基线以下延伸多远，并从边界框的顶部减去该值。在确定x高度不可能或不切实际的情况下，应使用0.5em的值。
~~~
下面的规则：
h1 { line-height: 1.2em }
意味着“h1”元素的行高将比“h1”元素的字体大20％。另一方面：
h1 { font-size: 1.2em }
意味着“h1”元素的字体大小将比“h1”元素继承的字体大20％。
~~~
如果出现在文档树[根节点](https://www.w3.org/TR/CSS22/conform.html#doctree)（如HTML中的"HTML"）时，'em'和'ex'参考属性的[初始值](https://www.w3.org/TR/CSS22/about.html#initial-value)。0
子元素不会继承为其父项指定的相对值;他们继承计算值。
~~~
在以下规则中，如果“h1”是“body”元素的子元素，则计算的“h1”元素的“文本缩进”值将为36px，而不是45px。
body {
font-size: 12px;
text-indent: 3em; /* i.e., 36px */
}
h1 { font-size: 15px }
~~~
绝对长度单位相对于彼此是固定的。
它们的主要作用发挥在，当输出环境已知时。
绝对单位由物理单位（in，cm，mm，pt，pc）和px单位组成：
* in: 英寸 — 1in is equal to 2.54cm.
* cm: 公分
* mm: 毫米
* pt: 点 — the points used by CSS are equal to 1/72nd of 1in.
* pc: 比萨饼 — 1pc is equal to 12pt.
* px: 像素 单元 — 1px is equal to 0.75pt.
对于css设备，通过将物理单位与他们的物理测量相关联，或者（ii）通过将像素单位与参考像素相关联，来锚定这些维度（i）。对于印刷媒体和类似的高分辨率设备，锚单元应该是标准物理单位之一（英寸，厘米等）。对于分辨率较低的设备以及具有异常观看距离的设备，建议使用锚点单元作为像素单元。对于这样的设备，建议像素单位是指最接近参考像素的整个设备像素数目。
参考像素是像素密度为96dpi的设备上的一个像素的视角以及距手臂长度的阅读器的距离。对于28英寸的标称臂长，因此视角约为0.0213度。对于手臂长度来说，1px因此对应于大约0.26mm（1/96英寸）。
下面的图片说明了观看距离对参考像素大小的影响：71厘米（28英寸）的读取距离导致参考像素为0.26毫米，而3.5米（12英尺）的读取距离导致1.3毫米的参考像素。
第二幅图像说明了设备在像素单元上的分辨率的影响：在低分辨率设备（例如，典型的计算机显示器）中，1px×1px的区域被单个点覆盖，而同一区域在更高分辨率的设备（如打印机）中覆盖16个点
~~~
h1 { margin: 0.5in } /* inches */
h2 { line-height: 3cm } /* centimeters */
h3 { word-spacing: 4mm } /* millimeters */
h4 { font-size: 12pt } /* points */
h4 { font-size: 1pc } /* picas */
p { font-size: 12px } /* px */
~~~
### 4.3.3 百分比
百分比值的格式（本规范中表示为<percentage>）为：一个可选的符号字符（'+'或'-'，'+'是缺省值），紧接在后的是一个<number>，紧接在后的是'%'。
百分比值总是相对于另外一个值，如长度。允许百分比值的每一个属性也定义了百分比所参考的值。这个值可以是同一元素的另外一个属性的值，其前辈元素的属性值，或者格式化上下文的值（如包含块的宽度）。如果根元素的属性指定了百分比值，而百分比值又被定义为参考某个属性的继承值，那么结果值就是百分比乘以那个属性的初始值。
~~~
由于子元素（通常）继承其父元素的计算值，下例中，P元素的子元素的'line-height'将继承12pt的值，而不是百分比值（120%）
P { font-size: 10pt }
P { line-height: 120% } /* 120% of 'font-size' */
~~~
### 4.3.4 URLs + URIs
URL(统一资源定位，参见[RFC1738]及[RFC1808]）提供了网络上一个资源的地址。可以预见的一个定位资源的新方法称为URN（统一资源名称）。两者结合称为URI（统一资源标识符，参见[URI]）。本规范使用术语URI。
本规范中，URI值表示为<uri>。用来在属性值中指定URI的函数符号是"url()"，如：
~~~
BODY { background: url("http://www.bg.com/pinkish.gif") }
~~~
URI值的格式是：'url('，后跟可选的空白，后跟可选的单引号或双引号，后跟URI本身，后跟可选的单引号或双引号，后跟可选的空白，后跟')'。两个引号字符必须一致。
~~~
没有引号的例子：
LI { list-style: url(http://www.redballs.com/redball.png) disc }
~~~
括号，逗号，空白字符，单引号和双引号如果出现在URI中，则必须用反斜杠转义：'\('，'\)'，'\,'。
根据URI的类型，也可能将上述字符写成URI转义（其中"(" = %28，")" = %29，等等）。参见[URI]。
为了创建不依赖于资源的绝对位置的模板样式表，作者可以使用相对URIs。相对URI（定义见[RFC1808]）根据基准URI解析为完全URI。RFC 1808的第3节定义了这一过程的标准化算法。对于CSS样式表，基准URI是样式表的位置，而不是源文档的位置。
~~~
例如，假定如下的规则：
BODY { background: url("yellow") }
定位在由如下URI指定的样式表中：
http://www.myorg.org/style/basic.css
则源文档BODY的背景将由如下URI指定的图形资源堆叠而成（不管那个图形是什么）：
http://www.myorg.org/style/yellow
~~~
用户端在处理指定不可获得或不适用的资源的URI时，方法可能不同。
### 4.3.5 记数器
记数器表示为标识符（参见'counter-increment'及'counter-reset'属性）。要引用一个记数器的值，可以采用'counter(<identifier>)'或'counter(<identifier>, <list-style-type>)'。缺省的样式是'decimal'。
要引用有相同名称的嵌套记数器序列，采用'counters(<identifier>, <string>)'或'counters(<identifier>, <string>,<list-style-type>)'。参见生成的内容一章中的“记数器嵌套和作用范围”。
CSS2中，记数器的值只可以由'content'属性引用。注意，'none'也是一个可能的<list-style-type>：'counter(x, none)'返回一个空字符串
~~~
下面的样式表为每一章（H1）中的段落（P）进行编号。编号的方式是以罗马数字编号，后接一个点和一个空格：
P {counter-increment: par-num}
H1 {counter-reset: par-num}
P:before {content: counter(par-num, upper-roman) ". "}
~~~
### 4.3.6 颜色
<颜色>或者是一个关键字，或一个RGB数字。
他的颜色关键词列表是：水色，黑色，蓝色，紫红色，灰色，绿色，青柠，栗色，海军蓝，橄榄色，橙色，紫色，红色，银色，蓝绿色，白色和黄色。这17种颜色具有以下值：
~~~
maroon #800000
red #ff0000
orange #ffA500
yellow #ffff00
olive #808000
purple #800080
fuchsia #ff00ff
white #ffffff
lime #00ff00
green #008000
navy #000080
blue #0000ff
aqua #00fffft
eal #008080
black #000000
silver #c0c0c0gray #808080
~~~
除了这些颜色的关键字，用户也可以指定在用户环境中特定对象使用的颜色所对应的关键字。详细内容请参见[系统颜色](https://www.w3.org/TR/CSS22/ui.html#system-colors)一节。
~~~
body {color: black; background: white }
h1 { color: maroon }
h2 { color: olive }
~~~
RGB颜色模型用在颜色的数字表示中。下面这些例子都指定了相同的颜色：
~~~
em { color: #f00 } /* #rgb */
em { color: #ff0000 } /* #rrggbb */
em { color: rgb(255,0,0) }
em { color: rgb(100%, 0%, 0%) }
~~~
以十六进制表示的RGB值的格式为：'#'号，紧接在后的是三个或六个十六进制字符。三位的RGB表示通过重复数字（而不是加零）转化到六位的RGB表示。例如，#fb0扩展为#ffbb00。这样保证了白色（#ffffff）可以简缩表示为#fff，并消除了对于显示的颜色深度的依赖性。
在函数表示中的RGB值的格式为：'rgb('，紧接在后的是用逗号分割的，三个数值（可以是三个整数值或三个百分比值），后接')'。整数值255代表100%，相当于十六进制表示的F或FF：rgb(255,255,255) = rgb(100%,100%,100%) =#FFF。数值周围可以有空白字符。
所有的RGB颜色都定义在sRGB颜色空间中（参见[SRGB]）。用户端呈现这些颜色的忠实度可能会有差异。但是使用sRGB给颜色呈现提供了一个没有歧义的、客观的、可衡量的定义，也可以和国际标准相关联（参见[COLORIMETRY]）。
与规范一致的用户端可以通过执行伽玛校正，来限制它们显示颜色的尝试。sRGB规定了在特定浏览条件下，显示伽玛系数为2.2。用户端应该调整在CSS中给出的颜色，和输出设备的“自然”显示伽玛系数相结合，而使有效的显示伽玛系数为2.2。更多的细节，请参见伽玛校正一节。注意，只有在CSS中规定的颜色才受影响；例如，图形可能会自带颜色信息。
超出设备范围的值要加以修正：必须修改红、绿、蓝的值，使之和设备支持的范围相吻合。对于一个典型的CRT显示器，其设备范围和sRGB相同，下面三个例子的效果一样：
~~~
em { color: rgb(255,0,0) } /* integer range 0 - 255 */
em { color: rgb(300,0,0) } /* clipped to rgb(255,0,0) */
em { color: rgb(255,-10,0) } /* clipped to rgb(255,0,0) */
em { color: rgb(110%, 0%, 0%) } /* clipped to rgb(100%,0%,0%) */
~~~
其它设备，如打印机，和sRGB有不同的设备范围；某些超出0..255的范围的颜色使可以呈现的（在设备范围之内），而其它一些在0..255范围内的颜色会在设备范围之外，从而被加以修正。
* 注意：尽管颜色给文档带来可观的信息，并使文档更加容易阅读，但是也要考虑到某些颜色的组合会给色盲的读者带来困难。如果你使用背景图形或设置了背景色，请相应地调整前景颜色。
### 4.3.7字符串
字符串可以包含在双引号或单引号中。在双引号对中不可以再出现双引号，除非将其转义（如'\"'或'\22'）。单引号与此类似（"\'"或"\27"）。
~~~
"this is a 'string'"
"this is a \"string\""
'this is a "string"'
'this is a \'string\''
~~~
一个字符串不可以直接包含新行。要在字符串中包含新行，可以使用转义字符"\A"（十六进制的A在Unicode中表示换行字符，在CSS中表示通用的"newline"）。参见'content'属性的例子。
为了美观或其它别的原因，可以将字符串分成几行。不过在这种情况下，换行本身要加以转义。例如，下面的两个选择子是一样的：
~~~
a[title="a not s\
o very long title"] {/*...*/}
a[title="a not so very long title"] {/*...*/}
~~~
### 4.3.8不支持的值
如果ua不支持特定的值，那么在解析样式表时应忽略该值，就好像该值是非法值。
例如：
~~~
h3 {
display: inline;
display: run-in;
}
~~~
支持'display'属性的'run-in'值的ua将接受第一个显示声明，然后用第二个显示声明“写入”该值。
不支持“运行”值的ua将处理第一个显示声明并忽略第二个显示声明。
## 4.4 CSS文档呈现
CSS样式表是通用字符集（参见[ISO10646]）中一系列字符的序列。为了传送和寸储的需要，这些字符必须由支持US-ASCII（如ISO 8859-x，SHIFT JIS等）字符集的编码器加以编码。有关字符集和字符编码的详细解释，请参阅HTML 4.0规范（[HTML40]第5章），也可参见XML 1.0规范（[XML10]2.2节和4.3.3节），以及附录E。
如果样式表嵌套在另一个文档中，如包含在HTML的STYLE元素或"style"属性内，则该样式表和整个文档共享相同的字符编码。
如果样式表存在于对立的文件中，用户端在确定文档的字符编码时，必须遵循如下的优先级（由高到低排列）：
1、在"Content-Type"域中的"charset"HTTP参数（或其他协议中的类似参数）。
2、bom和/或@charset（见下文）
3、`<link charset =“”>`或来自链接机制的其他元数据（如果有的话）
4、引用样式表或文档的字符集（如果有的话）
5、假设utf-8
在外部样式表中最多有一个@charset规则可以出现——它不可以出现在嵌套的样式表中——它也必须出现在文档的最开始，前面没有任何字符。在"@charset"之后，用户指定字符编码的名称。名称必须是在IANA注册表（参见[IANA]。完整的字符集列表也参见[CHARSETS]）中描述的字符集名。例如：
~~~
@charset "ISO-8859-1";
~~~
@charset必须字面书写，即10个字符的@charset“'（小写，无反斜杠转义符），后面跟着编码名称，后跟'”;'。
该名称必须是iana注册表中描述的字符集名称。请参阅[charsets]获取charsets的完整列表。作者应该使用iana注册表中标记为“首选MIME名称”的字符集名称。
用户端必须至少支持utf-8编码。
如果上面的规则1（一个http“charset”参数或类似的）产生一个字符编码，并且它是utf-8，utf-16或utf-32中的一个，那么文件开头的一个bom（如果有的话）将覆盖字符编码如下：
~~~
First bytes (hexadecimal) Resulting encoding
00 00 FE FF UTF-32, big-endian
FF FE 00 00 UTF-32, little-endian
FE FF UTF-16, big-endian
FF FE UTF-16, little-endian
EF BB BF UTF-8
~~~
如果规则1产生utf-16be，utf-16le，utf-32be或utf-32le的字符编码，那么如果文件以bom开头，则会出错。一个css ua必须通过忽略指定的编码并使用上面的表来恢复。
用户端必须忽略不在样式表开头的任何@charset规则。当用户端使用bom和/或@charset规则检测字符编码时，它们应该遵循以下规则：
* 除了这些规则中的规定外，所有@charset规则都会被忽略。
* 根据开始样式表的字节流检测编码。下表给出了一组初始字节序列（以十六进制写入）的可能性。匹配样式表开头的第一行给出了基于bom和/或@charset规则的编码检测结果。如果没有行匹配，则根据bom和/或@charset规则无法检测到编码。符号（...）*表示重复，其中最佳匹配是重复尽可能少的次数。标记为“xx”的字节是用于确定编码名称的字节，按照给定的顺序将它们视为一系列ascii字符。标有“yy”的字节是相似的，但需要按照说明转码成ascii。如果用户代理不支持与条目相关的任何编码，则可能会忽略表中的条目。
* 如果基于上表中标记为“如指定”的条目中的一个条目检测到编码，则如果用户代理在解码导致的字符流的开始处没有解析适当的@charset规则，则忽略该样式表所选的@charset。这确保：
1、@charset规则只能在样式表编码时才能使用，
2、字节顺序标记仅在支持字节顺序标记的编码中被忽略
3、编码名称不能包含换行符。
用户端必须忽略未知编码中的样式表。
### 指的是未用字符编码表示的字符
样式表可能引用那些在当前字符编码中无法表示的字符。这些字符必须写成ISO 10646字符的转义引用。这些转义和在HTML或XML文档中数字字符引用的功能是一样的（参见[HTML40]第5章和第25章）。
转义字符机制应该用在只有少数字符需要如此操作的情况下。如果文档中的大部分字符需要转义，用户应该用更合适的编码来编码文档（比方说，如果文档包含很多希腊字符，作者可以使用"ISO-8859-7"或"UTF-8"）。
如果中间处理器使用不同的字符编码，它可以将这些转义序列翻译为它所使用的编码的字节序列。另一方面，中间处理器不可以改变转义序列而取消一个ASCII字符的特殊含义。
一致的用户端必须将它们认识的任何字符编码正确地映射到Unicode（或者它们应该表现为它们可以）。
例如，以ISO-8859-1（Latin-1）编码的文档不可以直接包含希腊字符： "κουρος" （希腊文："kouros"）必须写为"\3BA\3BF\3C5\3C1\3BF\3C2"。
~~~
注意：HTML 4.0中，数字字符引用的解释发生在"style"属性值中，而不在STYLE元素中。由于这一不对称性，对于"style"属性和STYLE元素，我们推荐作者使用CSS字符转义机制而不是数字字符引用。例如，我们推荐：
<SPAN style="voice-family: D\FC rst">...</SPAN>
而不是：
<SPAN style="voice-family: Dürst">...</SPAN>
~~~
