Warning:
This wiki has been archived and is now read-only.

CSS2/syndata

From HTML5 Chinese Interest Group Wiki
Jump to: navigation, search

语法和基本数据类型

语法

本小节描述了任何等级的 CSS(包括 CSS2.1)都通用的语法(和向前兼容的解析规则)。尽管未来新版 CSS 可能加入更多的语法限制,这部分的核心语法还是会继续延续。

本小节的描述是规范的。附录 G 里也有规范性的文法规则
Error creating thumbnail: Unable to save thumbnail to destination

在本规范中,「紧接在前」或「紧接在后」代表在中间沒有空白或注释。

Tokenization

所有等级的 CSS ― 等级一、等级二和未来的等级 ― 使用相同的核心语法,这允许用户代理可以解析(但是不完全理解)在发布的時候还尚未成文的 CSS 等级样式表。设计师可以利用这个特性,在拓展新等级的 CSS 的可能性的同时,兼顾老版本的用户代理。

在词法的层面上,CSS 样式表由 token 序列组成。CSS 的 token 列表如下。其定义使用类似 Lex 的正则表达式。八进位的字符代码点是指 ISO 10646([ISO10646]
Error creating thumbnail: Unable to save thumbnail to destination
。跟 Lex 一样,当超过一个匹配结果的时候,最长的匹配的 token 胜出。
Token 定义
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 url({w}{string}{w})
url({w}([!#$%&*-[]-~]|{nonascii}|{escape})*{w})
UNICODE-RANGE u+[0-9a-f?]{1,6}(-[0-9a-f]{1,6})?
CDO <!--
CDC -->
: :
; ;
{ {
} }
( (
) )
[ [
] ]
S [ \t\r\n\f]+
COMMENT /*[^*]**+([^/*][^*]**+)*/
FUNCTION {ident}(
INCLUDES ~=
DASHMATCH |=
DELIM 其他不匹配上面的规则,也不是单双引号的字符

括号({})中的巨集的定义如下:

巨集 定义
ident [-]?{nmstart}{nmchar}*
name {nmchar}+
nmstart [_a-z]|{nonascii}|{escape}
nonascii [^\0-\237]
unicode \[0-9a-f]{1,6}(\r\n|[ \n\r\t\f])?
escape {unicode}|\[^\n\r\f0-9a-f]
nmchar [_a-z0-9-]|{nonascii}|{escape}
num [0-9]+|[0-9]*.[0-9]+
string {string1}|{string2}
string1 "([^\n\r\f\"]|\{nl}|{escape})*"
string2 '([^\n\r\f\']|\{nl}|{escape})*'
badstring {badstring1}|{badstring2}
badstring1 "([^\n\r\f\"]|\{nl}|{escape})*\?
badstring2 '([^\n\r\f\']|\{nl}|{escape})*\?
badcomment {badcomment1}|{badcomment2}
badcomment1 /*[^*]**+([^/*][^*]**+)*
badcomment2 /*[^*]*(*+[^/*][^*]*)*
baduri {baduri1}|{baduri2}|{baduri3}
baduri1 url({w}([!#$%&*-~]|{nonascii}|{escape})*{w}
baduri2 url({w}{string}{w}
baduri3 url({w}{badstring}
nl \n|\r\n|\r|\f
w [ \t\r\n\f]*
举例来说,根据最长匹配规则,用户代理会将 "red-->" tokenize 成 IDENT("red--")和 DELIM(">"),而不是 IDENT 和 CDC。
以下是 CSS 的核心语法。以下小节描述使用核心语法的方法。附录 G 描述的是比较严格的文法,也比较接近 CSS 等级二。用户代理会根据解析错误的处理规则,忽略样式表中可以用下面文法但是不能用附录 G 的文法解析的部份
Error creating thumbnail: Unable to save thumbnail to destination
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? [ ';' S* declaration? ]* '}' S*;
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*;

CSS 和未来的所有扩展不使用 "unused" 产生式,它的作用仅是帮助错误处理。(参见 4.2 解析错误的处理规则。)

文法中沒有 COMMENT token(为了维护可读性),但是这些 token 可出現在其他 token 的外面。(然而,请注意在 @chraset 规则之前或是在里面的注释会让 @charset 失效。)

文法中的 S token 代表空白,只有空格(U+0020 SPACE)、制表符(U+0009)、换行符(U+000A)、回车符(U+000D)、换页符(U+000C)可以出现在空白中。其他类似空格的字符,例如 Em 空格(U+2003 EM SPACE)和全形空格(U+3000 IDEOGRAPHIC SPACE)不是空白的一部分。

CSS 2.1 未定义不能 tokenize 或解析的输入所代表的意义。

关键字

关键字是标识符的形式。关键字不能放在引号(“……” 或 ‘……’)之间。因此

 red

是关键字,但

 “red”

不是(是字符串)。其他非法例子:

  width: "auto";
  border: "none";
  background: "red";
供应商特定扩展

在 CSS 中,标识符可以以‘-’(连字符)或‘_’(下划线)开头。关键字和属性名以‘-’或‘_’开头被保留为供应商特定扩展使用。因此供应商特定扩展应该遵守下面的格式:

 '-' + vendor identifier + '-' + meaningful name
 '_' + vendor identifier + '-' + meaningful name

例如,如果 XYZ 组织添加一个私有属性,其描述显示在东边的边的颜色,那么可以将其命名为 -xyz-border-east-color。

其他已知的例子:

  -moz-box-sizing
  -moz-border-radius
  -wap-accesskey

确保属性或关键字不要以连字符或下划线开头,无论是当前还是将来的 CSS 版本。因此根据解析错误的处理规则,典型的 CSS 实现中可以不识别这样的属性,并且忽略他们。然而,因为开头的连字符或下划线属于语法的一部分,CSS2.1 实现应该能够使用 CSS-conforming 解析器,无论他们是否支持供应商特定扩展。

作者应该避免供应商特定扩展。

有益的备忘记录

本小节是扩展信息。 在写本小节的时候,存在下面的前缀:

前缀 组织
-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

字符及大小写

下面的规则总是起作用:

  • 位于ASCII范围内的所有 CSS 语法是大小写不敏感的(即,[a-z] 和 [A-Z] 等价),除了 CSS 控制范围之外的部分。例如, HTML 属性的 “id”和“class”,字体名称和不在本规范内的URI的值是大小写敏感的。需要特别注意的是,在HTML里元素的名字是不区分大小写的,但在XML内是大小写敏感的。
  • 在 CSS 中,标识符(包括元素名称,类,id选择器)仅能包含字符[a-zA-Z0-9]和 ISO 10646 字符集 U+00A0 及以上部分,连字符(-)和下划线(_);并且不能以数字,两个下划线或一个下划线跟着一个数字的形式开头。标识符可以包含转义字符和 ISO 0464 字符集中的数字编码(查看下一条)。例如,标识符“B&W?”可以被写成“B\&W\?”或“B\26W\3F”。

注意 Unicode 相当于 ISO 10545 的编码(查看[UNICODE]和[ISO10464])。

  • 在 CSS2.1 在中,反斜线(\)字符可以代表三种类型的字符转义。在CSS注释中,反斜线代表自己,并且如果反斜线位于样式表的结束位置,其也代表自身(即,一个分隔符 token)。

第一种,位于字符串内部,反斜线后面的换行符会被忽略(即字符串被认为不包含反斜线和换行符)。在字符串外部,反斜线后面跟一个换行符代表其自身(即,一个分隔符和一个换行符)。

第二种,用来取消 CSS 中特定字符的意义。任何字符(十六进制整数,换行符,回车符或换页符除外)可以使用反斜线来转义,而移除其特定意义。例如,“\"”是一个字符串,包含一个双引号。样式表处理程序必须不能从样式表中移除这些反斜线,由于那样做可能改变样式表的意义。

第三种,反斜线转义允许作者引用不能轻易放到文档中的字符。在这种情况下,反斜线后面跟着最多留个十六进制数字(0..9A..F),其代表 ISO([ISO10646])中的字符,数字必须不能是零。(在 CSS2.1 在中,没有定义如果样式表包含 Unicode 控制代码零,如何处理。)如果反斜线后面的是范围在[0-9a-fA-F]内的十六进制数字,数字的边界需要明确。有两种方法可以实现:

  1. 添加一个空格(或其他空白字符):“\26 B”(“&B”)。在这种情况下,用户代理应该将“CR/LF”对(U+000D/U+000A)作为单个空白字符处理。
  2. 提供准确的6位十六进制数:“\000026B”(“&B”)

事实上,这两种方法可以结合使用。位于十六进制转义字符后的一个空白字符可以忽略。注意这意味着,想要“真正”的空格时,需要使用两个空格。

如果数字的范围超出允许的Unicode(例如,“\110000”比当前Unicode允许的最大值 10FFFF 还大),用户代理可以使用“替换字符”(U+FFFD)代替这个转义字符。如果字符将被显示,用户代理应该显示一个可见的字符,例如“缺失字符”(参见 15.2.5

  • 注意:反斜线转义字符总被当作标识符或字符串的一部分(即“\7b”不是标点符号,即使“{”是,并且“\32”允许位于类名的开头,即使“2”不允许)。
    标识符“te\st”完全等于标识符“test”。

语句

一个 CSS 样式表,无论什么版本,都包含一组语句(查看上面的语法)。有两种类型的语句:at 规则 和 规则集。语句周围可能包围着空格

@规则

@规则以@关键字开头,‘@’字符后面紧跟一个标识符(例如,‘@import’,‘@page’)。

一个@规则,包括上面说的一切,并且接下来包括分号(;)或一个

CSS2.1 的用户代理必须忽略位于内部或者任何非忽略语句(除了@charset 或 @import规则)后面的‘@import’规则。

假设有如下的例子,当CSS2.1 解析器遇到这样的样式表:

  @import "subs.css";
  h1 { color: blue }
  @import "list.css";

根据 CSS2.1归法,第二个‘@import’是非法的。CSS2.1 解析器将忽略整条@规则,事实上会精简样式表:

  @import "subs.css";
  h1 { color: blue }

在下面的例子中,第二条‘@import’规则是非法的,因为位于‘@media’内部。

  @import "subs.css";
  @media print {
    @import "print-main.css";
    body { font-size: 10pt }
  }
  h1 {color: blue }

为了实现仅为‘打印’媒体类型引入样式表,可以使用@import规则的媒体语法代替,例如:

  @import "subs.css";
  @import "print-main.css" print;
  @media print {
    body { font-size: 10pt }
  }
  h1 {color: blue }

一个块以左大括号({)开始,以相匹配的右大括号(})结束。在大括号中间可以有任意的 token,但括号(()),方括号([])和大括号({})必须成对出现,并且嵌套正确。单引号(')和双引号(")也必须成对出现,并且他们中间的字符会被解析为字符串。查看上面的 Tokenization 关于字符串的定义。

这里有一个关于块的例子。注意位于双引号内的右大括号不能匹配块开始的大括号,并且第二个单引号是转义字符,隐私不会匹配第一个单引号。

  { causta: "}" + ({7} * '\'') }

注意上面的规则不是合法的 CSS2.1 规则,但符合上面块的定义。

规则集、声明块和选择器

规则集(也叫做“规则”)包含一个选择器和一个声明块,声明块紧挨在选择符之后。

声明块以左大括号({)开始,以对应的右大括号(})结束。大括号中间必须有一个列表,以分号(;)分隔的零个或多个声明。

选择器(查看选择符章节)包括(但不包括)第一个左大括号({)之前的一切。选择器总和声明块一起出现。当用户代理无法解析选择器时(即,不符合 CSS2.1 规范),必须忽略选择符以及紧随其后的声明块。

CSS2.1 给选择符中的逗号(,)赋予了特殊意义。然而,由于无法预知在未来版本的 CSS 中逗号是否会赋予其他含义,无论选择符的任何文职发生了错误,即使剩余的选择符部分符合 CSS2.1 规范,那么整条语句都应该被忽略

例如,在CSS2.1选择符中,由于“&”不是一个合法的 token,CSS2.1用户代理必须忽略整个第二行,并且不会设置 H3 的前景色为红色:

h1, h2 {color: green }
h3, h4 & h5 {color: red }
h6 {color: black }

下面是一个更负责的例子。前两对大括号位于字符串内部,并不是标记选择符的结束,这是一个有效的 CSS2.1 规则

p[example="public class foo\
{\
    private int x;\
\
    foo(int x) {\
        this.x = x;\
    }\
\
}"] { color: red }

声明及属性

声明可以是空的或包含一组用分号(:)分隔属性名和属性值。每个连接的地方都可以有空白

由于选择符的工作方式,对于相同选择符的多条声明可以组织成一条声明,包含一组属性,通过分号(;)分隔。

因此,下面的规则:

 h1 { font-weight: bold }
 h1 { font-size: 12px }
 h1 { line-height: 14px }
 h1 { font-family: Helvetica }
 h1 { font-variant: normal }
 h1 { font-style: normal }

等同于下面的:

 h1 {
   font-weight: bold;
   font-size: 12px;
   line-height: 14px;
   font-family: Helvetica;
   font-variant: normal;
   font-style: normal
 }

属性名是一个标识符。属性值可以包含任意 token。小括号(“()”),中括号(“[]”),大括号(“{}”),单引号(')和双引号(")必须成对出现,并且位于字符串外面的分号必须转意。小括号,中括号,和大括号可以嵌套使用。位于引号内部的字符被解析为字符串。

每个属性值的语法被单独指定,但在任何情况下,值由标识符,字符串,数值,长度,百分比,URI,颜色等组成。

用户代理必须忽略声明中非法的属性名或属性值。每个CSS属性有自己可接受值的语法和语义约束。

例如,假设 CSS2.1 解析器遇到如下样式表:

 h1 { color: red; font-style: 12pt }  /* Invalid value: 12pt */
 p { color: blue;  font-vendor: any;  /* Invalid prop.: font-vendor */
     font-variant: small-caps }
 em em { font-style: normal }

第一行的第二个声明的值‘12pt’是非法的。第二行的第二个声明包含未定义的属性‘font-verdor’。CSS2.1 解析器会忽略这些声明,等效于如下精简后的样式表:

 h1 { color: red; }
 p { color: blue;  font-variant: small-caps }
 em em { font-style: normal }

注释

注释以字符“/*”开始,以字符“*/”结束。注释可以出现在其他 token 外部的任何地方,并且其内容不影响渲染。注释不能被嵌套。

CSS 也允许 SGML 注释符(“<!-”和“-->”)出现在语法定义的确定的地方,但他们不能作为 CSS 注释的界定符。之所以允许这样,是因为被添加在 HTML 源文档(通过 STYLE 元素)中的样式规则可以在 HTML 3.2以前的用户代理中隐藏样式信息。l更多信息,查看 HTML4 规范([HTML4])。

解析错误的处理规则

在有些情形中,用户代理必须忽略不合法样式表的一部分。本规范定义忽略的意义如下:用户代理解析
Error creating thumbnail: Unable to save thumbnail to destination
不合法的部份(为了找到不合法部份的起始和终止),但是当作这部分不存在来处理。CSS 2.1 为未来的 CSS 保留了所有沒包含开头是连字符或下划线的标识符
Error creating thumbnail: Unable to save thumbnail to destination
的所有 属性:值 的组合和 @关键字。用户代理必须忽略这些组合(除了 CSS 未来引入的更新之外)。

为了确保 CSS 在未来可以增加新的属性和值,本规范要求用户代理在碰到一下状况的时候遵守以下规则:

  • 未知属性:用户代理必须忽略带有未知属性的声明。举例来说,若样式表是:
    h1 { color: red; rotation: 70minutes }
    用户代理会将样式表当成是:
    h1 { color: red }
  • 不合法的值:用户代理必须忽略带有不合法值的声明。举例来说:
    img { float: left } /* 正确的 CSS 2.1 */ img { float: left here } /* 'float' 沒有 "here" 这个值 */ img { background: "red" } /* 关键字不能位于引号中 */ img { border-width: 3 } /* 使用长度值必须指定单位 */
    CSS 2.1 解析器会处理第一个规则并忽略剩下的几个,也就是:
    img { float: left } img { } img { } img { }
    符合未来 CSS 规范的用户代理也可能接受一个以上的其他规则。
  • 声明格式异常:当用户代理在解析声明是碰到未预期的 token 时,用户代理必须在遵守 ()、[]、{}、""、'' 配对规则并正确的处理跳脱情况下,读到声明的结尾。举例来说,格式异常的声明包括缺少属性名称、冒号(:)、属性值的情况。一下全部相等:
    p { color:green } p { color:green; color } /* 宣告格式異常:缺少 ':' 與屬性值 */ p { color:red; color; color:green } /* 經過錯誤修復後同上 */ p { color:green; color: } /* 宣告格式異常: 缺少屬性值 */ p { color:red; color:; color:green } /* 經過錯誤修復後同上 */ p { color:green; color{;color:maroon} } /* 未預期的 token */ p { color:red; color{;color:maroon}; color:green } /* 經過錯誤修復後同上 */
  • 敘述格式異常:當使用者代理在解析敘述時碰到未預期的 token 時,使用者代理必須在遵守 ()、[]、{}、""、'' 配對規則並正確的處理跳脫的情況下,讀到敘述的結尾。舉例來說,敘述格式異常包括未預期的閉花誇號或 @關鍵字,例如,使用者代理會省略以下所有行:
    p @here {color: red} /* 帶有未預期 @關鍵字 "@here" 的規則集*/ @foo @bar; /* 帶有未預期 @關鍵字 "@bar" 的 @規則 */ } {{ - }} /* 帶有未預期右花括號 */ ) ( {} ) p {color: red } /* 帶有未預期右圓括號的規則集 */
  • 未知關鍵字的 @規則:瀏覽器代理必須忽略忽略不合法的 @關鍵字與後面所有東西,直到包含該不合法 @關鍵字的區塊的結尾、下一個分號(;)、下一個區塊({...})其中一個出現為止。舉例來說,考慮下面情形:
    @three-dee { @background-lighting { azimuth: 30deg; elevation: 190deg; } h1 { color: red } } h1 { color: blue }
    CSS 2.1 沒有 '@three-dee' 這個 @規則,因此,CSS 2.1 的使用者代理會忽略整個 @規則(包括第三個右花括號),等效於:
    h1 { color: blue }
    在 @規則裡因為不合法而被忽略的 @規則(像是 @media 規則裡的不合法宣告),不會讓個 @規則變不合法。
  • 未預期的檔案結尾:使用者代理必須在樣式表結尾關閉所有開構造(舉例來說:區塊、圓括號、方括號、規則,字串、註解)。舉例來說:
    @media screen { p:before { content: 'Hello
    在一個符合規範的使用者代理中會被當作是:
    @media screen { p:before { content: 'Hello'; } }
  • 未預期的字串結尾:使用者代理必須在行結尾(也就是在未跳脫的換行符、回車符、換頁符之前)關閉字串,然後丟棄來源構造(宣告或規則)。舉例來說:
    p { color: green; font-family: 'Courier New Times color: red; color: green; }
    會被當作是:
    p { color: green; color: green; }
    因為使用者代理會丟棄不合法的第二個宣告(從 'font-family' 到 'color: red' 後面的分號)。
  • 宣告區塊的解析規則請參見規則集、宣告區塊與選擇器

整数和实数

某些值类型可能有整型值(用<整型>表示)或实数值(用<数字>表示)。实数和整形仅在数字表示法中指定过。一个<整型>数值包含一个或多个数字“0”到“9”。一个<数字>型也可以使一个<整型>,或者零个或多个数字后面是小数点,然后是一个或多个数字。整型和实数都可以加前缀“-”或“+”来表示符号。-0等于0,而不是负数。

注意许多属性允许整型或实数作为其值,实际上是有限制范围的,通常不能是一个负数。

长度

长度是指测量距离。

长度值的格式(在本规范中由<长度>表示)是一个<数字>(可选的小数点)后面紧跟一个单位标识符(例如,px、em等)。当长度值为零时,单位标识符是可选的。

有些属性允许负的长度值,但这样做可能会使格式化模型变得更复杂,并且可能有具体的实施限制。如果负值不被支持,应该将其转换为最近的支持值。

如果为不允许为负值的属性应用负的长度值,应该将声明忽略。

如果用户代理不支持使用的长度,必须将其转换为近似的实际值

有两种类型的长度代为:相对和绝对。相对长度单位指定一个相对于其他长度属性的长度。使用相对单位的样式表更容易进行缩放。

相对单位是:

  • em:相对于相关字体的‘font-size’
  • ex:相对于相关字体的‘x-height’
 h1 { margin: 0.5em }      /* em */
 h1 { margin: 1ex }        /* ex */

‘em’单位等于被使用元素的‘font-size’属性的计算值。唯一的例外是当‘em’出现在‘font-size’属性自己的值中时,在这种情况下,其相对于父元素的字体大小。

‘ex’单位由元素的第一个可见字体定义。唯一的例外是当‘ex’出现在‘font-size’属性的值时,在这种情况下,其相对于父元素的‘ex’。

之所以被称为‘x-height’,是因为其通常等价于小写字母“x”的高度。然而,即使字体中不包含“x”,‘ex’定义仍有效。

字体的 x-height 可以通过不同的方式确定。一些字体包含 x-height 的标准指标。如果可靠的字体指标不可用,用户代理可以通过小写符号的高度确定 x-height。一种可行的探索是看小写字母“o”到其基线的距离,并从其边界上减去这个值。在不可能或不太确定 x-height的情况下,应该使用 0.5em。

规则:

 h1 { line-height: 1.2em }

意味着“h1”元素的行高将比其字体大小高20%。另一方面:

 h1 { font-size: 1.2em }

意味着“h1”元素的font-size将比其继承的字体大小大20%。

当为文档树的根指定时(例如,HTML 中的 “HTML”),‘em’ 和 ‘ex’参考其属性的初始值

子元素不会继承为其父元素指定的相对值;继承的是时计算值

在下面的规则中,如果“h1”是“body”元素的子元素时,“h1”元素的‘text-indent’属性的计算值是36px,而不是45px。

 body {
   font-size: 12px;
   text-indent: 3em;  /* i.e., 36px */
 }
 h1 { font-size: 15px }

绝对长度单位是固定的在彼此之间的关系。其主要用来输出环境是已知的情况下。绝对单位包括物理单位(int、cm、mm、pt、pc)和px单位:

  • in:英寸——1英寸等于2.54厘米。
  • cm:厘米
  • mm:毫米
  • pt:点——CSS中的点等于1/72英寸。
  • pc:1pc 等于 12pt
  • px:像素单位——1px等于0.75pt。

对于 CSS 设备,这些尺寸固定的,无论是相对于物理尺寸的物理单位,或相对于参考像素的像素单位。对于打印媒体或类似的高分辨率设备,固定单位应该是一个物理单位(英寸、厘米等)。对于低分辨率设备,和对于不常见的观看距离的设备,建议使用像素单位作为固定单位。对于建议使用像素单位的设备,最好其全部设备像素和参考像素接近。

注意如果像素单位是固定单位,物理单位可能和其物理尺寸不匹配。相反,如果固定单位是物理单位,那么像素单位可能没有映射到全部的设备像素。

注意像素单位和物理单位的定义和之前版本有所不同。在之前的 CSS 版本中,像素单位和物理单位没有固定比例关系:物理单位总是等价于物理尺寸,像素单位总和参考像素相匹配。(之所以改变是因为太多内容依赖96dpi,假设其发生改变,将使内容破碎。)

参考像素的一像素是指从一个手臂长度的距离处看96dpi设备上一像素。正常的手臂长度是28英寸,视角大约是0.0213度。在一个手臂距离处阅读,1px相当于0.26mm(1/96 像素)。

下图说明了观看距离对参考像素大小的影像:71cm(28英寸)的阅读距离下,一个参考像素大约是0.26mm,而在3.5m(12英尺)的阅读距离下,一个参考像素大约是1.3mm。

pixel1.png [D]

第二幅图片说明设备的分辨率对像素单位的影像:1px * 1px 的区域在低分辨率设备上覆盖一个像素点(例如,典型的电脑显示器),然而,在高分辨率设备上,相同的区域覆盖16个点(例如打印机)。

pixel2.png [D]

 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 */

百分数

百分比值的格式(在本规范中用<百分比>表示)是一个<数字>后面紧跟着‘%’。

百分比值总是相对于另一个值,例如长度。每个允许百分比值的属性也会定义百分比的参考值。参考值可能是相同元素的另一个属性,其祖先元素的一个属性或格式化上下文的一个值(例如,一个包含块的宽度)。当为元素设置一个百分比值或百分比被定义参考一些属性的继承值时,其结果值是那个属性初始值的百分比倍。

由于子元素(通常)继承其父元素的计算值,在下面的例子中,P元素的子元素将继承‘line-height’的值为 12px,而不是百分比值(120%):

 p { font-size: 10px }
 p { line-height: 120% }  /* 120% of 'font-size' */

URLs 和 URIs

在本规范中,URI(统一资源标识符,参照[[[CSS2/refs#ref-RFC3986|RFC3986]]],包括 URL,URN 等)值用<url>代表。在属性值中,用来指定 URL 的函数表达式是“url()”,如:

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

URI值的格式是'url(',后面是可选的空白字符,后面是可选的单引号(')或双引号(")字符,然后是 URL 自身,后面是可选的单引号(')或双引号(")字符,再然后是可选的空白字符和‘)’。其中两个引号字符必须匹配。

省略引号的例子:

 li { list-style: url(http://www.example.com/redball.png) disc }

某些字符出现在没有引号的 URI 中,例如括号、空白字符、单引号(')和双引号("),必须使用反斜线转义,以使 URI 的结果值是一个 URI token:‘\(’,'\)'。

依赖 URI 的类型,或许还可以将上面的字符写为 URI-转义字符(“(”=%28,“)”=%29等),参看[[[CSS2/refs#ref-RFC3986|RFC3986]]]。

注意注释 token 不能出现在其他 token 中:因此“url(/*x*/pic.png)”,代表URI“/*x*/pic.png”,而不是“pic.png”。

为了创建不依赖于资源绝对位置的模块化样式表,作者可以使用相对 URI。相对 URI(参照[[[CSS2/refs#ref-RFC3986|RFC3986]]])使用基础 URI 生成满的 URI,RFC 3986,第五节中,定义了这个过程的规范化算法。对于 CSS 样式表,基础 URI 是样式表,而不是文档资源。

例如,假设下面的规则:

 body { background: url("yellow") }

样式表的 URI 如下:

 http://www.example.org/style/basic.css

源文档的 BODY 的背景,将使用 URI 指定的资源图片进行平铺

 http://www.example.org/style/yellow

用户代理在处理无效的或不可用,不适用的 URI 时其行为可能不同。

计数器

颜色

<颜色>是一个关键字或数值 RGB 规范。

颜色关键字的列表是: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow。这 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 #00ffff teal #008080

black #000000 silver #c0c0c0 gray #808080

除了这些颜色关键字,用户可以在自己的环境中指定其他的关键字。更多信息请参照系统颜色章节。

 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)可以转换为等价的六个数字表示(#rrggbb)。例如,#fb0 可以扩展为 #ffbb。白色(#ffffff)可以简写为(#fff),并且移除显示颜色深度的依赖。

在函数表示法中,RGB值的格式是‘rgb(’后面紧跟有三个数字值(三个整数值或三个百分比值)的逗号分隔列表,然后是‘)’。整数值 255 对应于 100%,和十六进制表示法的 F 或 FF:rgb(255,255,255) = rgb(100%,100%,100%) = #FFF = #FFFFFF。数字值周围可以有空白字符

所有的 RGB 颜色都在 sRGB颜色空间中指定(查看 [[[CSS2/refs#ref-SRGB|SRGB]]])。用户代理可以改变这些颜色的表现,但sRGB 对这些颜色应该是什么,提供了准确和客观的定义,可与国际标准接轨(查看[[[CSS2/refs#ref-COLORIMETRY|COLORIMETRY]]])。

遵守的用户代理可能会限制颜色的显示,对其进行γ校正。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%) */

字符串

字符串可以用单引号或双引号包裹。双引号包裹的字符串内不能在出现双引号,除非使用转义字符(例如,‘\"’或'\22')。对于单引号一样(例如,“\'”或“\27”)。

 "this is a 'string'"
 "this is a \"string\""
 'this is a "string"'
 'this is a \'string\

字符串不能直接包含换行符。要想在字符串中包含换行符,可以使用 ISO-10646 中代表换行符的转义字符,例如“\A”或“\00000a”。这字符代表了 CSS 中通用的“换行”概念。查看‘content’属性中的例子。

出于美观或其他原因,如果将字符串分隔成多行,在这种情况下,可以使用反斜线将换行符本身转义。例如,下面的两个选择符实际上是相同的:

 a[title="a not s\
 o very long title"] {/*...*/}
 a[title="a not so very long title"] {/*...*/}

不支持的值

如果用户代理不支持一个特定的值,当解析样式表时,用户代理应该将其忽略,就和非法值一样处理。例如:

 h3 {
   display: inline;
   display: run-in;
 }

支持‘display’属性为‘run-in’值的用户代理将接受第一条display声明,然后用第二条声明的值将其“覆盖”。对于不支持‘run-in’值的用户代理将处理第一个display声明,并忽略第二条声明。

CSS 样式表的呈现

引用字符编码中未描述的字符