内容
本节描述了适用于任何级别的CSS(包括CSS 2.2)的语法(以及前向兼容解析规则)。未来的CSS更新将遵循这一核心语法,尽管它们可能会增加额外的语法限制。
这些描述是规范性的。它们还通过附录G中呈现的规范语法规则进行了补充。
在本规范中,表达“紧挨着之前”或“紧挨着之后”表示没有空格或注释的间隔。
所有级别的CSS — 第一级,第二级以及未来的所有级别 — 都使用相同的核心语法。这使得用户代理可以解析(虽然不完全理解)在用户代理创建时尚不存在的CSS级别编写的样式表。设计师可以利用此功能创建适用于较旧用户代理的样式表,同时也充分利用最新CSS级别的可能性。
在词法层面,CSS样式表由一系列标记组成。以下是CSS的标记列表。这些定义使用Lex风格的正则表达式。八进制代码参照ISO 10646 ([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}\)|
|
UNICODE-RANGE | u\+[?]{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-\177] |
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]+)(e[+-]?[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 | {U}{R}{L}\({w}([!#$%&*-~]|{nonascii}|{escape})*{w}
|
baduri2 | {U}{R}{L}\({w}{string}{w} |
baduri3 | {U}{R}{L}\({w}{badstring} |
nl | \n|\r\n|\r|\f |
w | [ \t\r\n\f]* |
L | l|\\0{0,4}(4c|6c)(\r\n|[ \t\r\n\f])?|\\l
|
R | r|\\0{0,4}(52|72)(\r\n|[ \t\r\n\f])?|\\r
|
U | u|\\0{0,4}(55|75)(\r\n|[ \t\r\n\f])?|\\u
|
例如,最长匹配规则意味着“red-->
”被标记为IDENT“red--
”,然后是DELIM“>
”,而不是作为IDENT和CDC的组合。
以下是CSS的核心语法。后续章节描述了如何使用它。附录G描述了一种更严格的语法,更接近CSS第2级语言。根据此语法可解析但根据附录G中的语法不可解析的样式表部分将根据处理解析错误的规则被忽略。
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*;
“unused”产生式在CSS中未使用,并且未来的任何扩展都不会使用它。它仅包含在此处以帮助处理错误。(参见4.2 “处理解析错误的规则。”)
COMMENT标记不会出现在语法中(以保持可读性),但这些标记可以在其他标记之外的任何地方出现任意次数。(但请注意,在@charset规则之前或其中的注释会禁用@charset。)
语法中的标记S代表空白。只有“空格”(U+0020)、“制表符”(U+0009)、“换行符”(U+000A)、“回车符”(U+000D)和“换页符”(U+000C)可以出现在空白中。其他类似空格的字符,如“em空格”(U+2003)和“表意空格”(U+3000),从不属于空白的一部分。
在CSS 2.2中,无法被标记或解析的输入的含义未定义。
关键字的形式为标识符。关键字不能放在引号("..." 或 '...')之间。因此,
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实现可能无法识别此类属性,并可能根据处理解析错误的规则忽略它们。然而,由于初始破折号或下划线是语法的一部分,CSS 2.2的实现者应始终能够使用符合CSS的解析器,无论他们是否支持任何供应商特定的扩展。
作者应避免使用供应商特定的扩展。
本节为说明性内容。
在撰写本文时,已知存在以下前缀:
前缀 | 组织 |
---|---|
-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 |
以下规则始终适用:
请注意,Unicode与ISO 10646在代码上是等价的(参见[UNICODE]和[ISO10646])。
首先,在字符串内,反斜杠后跟换行符会被忽略(即,字符串被视为不包含反斜杠和换行符)。在字符串外,反斜杠后跟换行符表示其自身(即DELIM后跟换行符)。
其次,它取消了CSS特殊字符的含义。任何字符(除十六进制数字、换行符、回车符或换页符外)都可以通过反斜杠转义以消除其特殊含义。例如,"\""是一个由一个双引号组成的字符串。样式表预处理器不得从样式表中删除这些反斜杠,因为那样会改变样式表的含义。
第三,反斜杠转义允许作者引用他们无法轻易放入文档中的字符。在这种情况下,反斜杠后跟最多六位十六进制数字(0..9A..F),表示具有该数字的ISO 10646([ISO10646])字符,且该字符不得为零。(在CSS 2.2中,尚未定义样式表中包含Unicode码点为零的字符会发生什么。)如果十六进制数字后面跟随的字符在[0-9a-fA-F]范围内,则需要明确表示数字的结束。有两种方法可以做到这一点:
实际上,这两种方法可以结合使用。十六进制转义后只会忽略一个空白字符。请注意,这意味着转义序列后的“真实”空格必须加倍。
如果数字超出了Unicode允许的范围(例如,“\110000”超出了当前Unicode允许的最大值10FFFF),用户代理可以将转义替换为“替换字符”(U+FFFD)。如果字符要显示,用户代理应显示一个可见符号,例如“缺少字符”字形(参见15.2,第5点)。
标识符“te\st”与“test”完全相同。
CSS样式表,无论是哪个级别的CSS,都由一系列语句组成(参见上文的语法)。语句有两种类型:at规则和规则集。语句周围可能有空白。
At规则以at关键字开头,即'@'字符后紧跟一个标识符(例如,'@import','@page')。
At规则包括从起始位置到下一个分号(;)或下一个块(以先到者为准)之间的所有内容。
CSS 2.2用户代理必须忽略出现在块内或在除@charset或@import规则之外的任何非忽略语句之后的任何“@import”规则。
假设,CSS 2.2解析器遇到以下样式表:
@import "subs.css"; h1 { color: blue } @import "list.css";
根据CSS 2.2,第二个'@import'是不合法的。CSS 2.2解析器忽略整个at规则,有效地将样式表简化为:
@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 }
一个块以左花括号({)开始,并以匹配的右花括号(})结束。在这之间可以有任何标记,但圆括号(())、方括号([])和花括号({})必须始终成对出现,并且可以嵌套。单引号(')和双引号(")也必须成对出现,它们之间的字符被解析为字符串。有关字符串的定义,参见上文的词法分析。
这里是一个块的示例。注意,双引号之间的右花括号与块的左花括号不匹配,并且第二个单引号是转义字符,因此与第一个单引号不匹配:
{ causta: "}" + ({7} * '\'') }
注意,上述规则不是有效的CSS 2.2,但它仍然是如上所述的一个块。
规则集(也称为“规则”)由选择器和声明块组成。
声明块以左花括号({)开始,并以匹配的右花括号(})结束。在这之间必须包含零个或多个声明和at规则。除非声明是列表中的最后一个,否则声明必须以分号(;)结尾。
注意:CSS第2级别中没有可以出现在规则集中的at规则,但这些at规则可能会在未来的级别中定义。
选择器(参见选择器部分)包括从选择器开始到(但不包括)第一个左花括号({)的所有内容。选择器始终与声明块配合使用。当用户代理无法解析选择器(即,它不是有效的CSS 2.2),则必须忽略选择器及后续的声明块(如果有)。
CSS 2.2赋予选择器中的逗号(,)特殊意义。然而,由于未知逗号在未来的CSS更新中可能会获得其他意义,因此如果选择器中的任何地方出现错误,即使选择器的其余部分在CSS 2.2中看起来合理,也应忽略整个语句。
例如,由于“&”在CSS 2.2选择器中不是有效标记,CSS 2.2用户代理必须忽略整行第二行,而不将H3的颜色设置为红色:
h1, h2 {color: green } h3, h4 & h5 {color: red } h6 {color: black }
这是一个更复杂的示例。前两个花括号对在字符串内部,并不标记选择器的结束。这是一个有效的CSS 2.2规则。
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 }
属性名是一个标识符。属性值中可能出现任何标记。圆括号 ("()")、方括号 ("[]")、花括号 ("{}")、单引号 (') 和双引号 (") 必须成对出现,且字符串外的分号必须转义。圆括号、方括号和花括号可以嵌套。在引号内,字符被解析为字符串。
值的语法在每个属性中分别指定,但无论如何,值都是由标识符、字符串、数字、长度、百分比、URI、颜色等组成。
用户代理必须忽略具有无效属性名或无效值的声明。每个CSS属性对其接受的值都有其自身的语法和语义限制。
例如,假设CSS 2.2解析器遇到以下样式表:
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”。CSS 2.2解析器将忽略这些声明,从而有效地将样式表简化为:
h1 { color: red; } p { color: blue; font-variant: small-caps } em em { font-style: normal }
注释 以字符"/*"开头,以字符"*/"结尾。它们可以出现在其他标记之外的任何地方,其内容对渲染没有影响。注释不能嵌套。
CSS 还允许在语法定义的某些地方使用 SGML 注释分隔符("<!--" 和 "-->"),但它们不限定 CSS 注释。允许这样做是为了使出现在 HTML 源文档中的样式规则(在 STYLE 元素中)对 HTML 3.2 之前的用户代理隐藏。更多信息请参见 HTML 4 规范 ([HTML4])。
在某些情况下,用户代理必须忽略非法样式表的一部分。本规范定义了忽略,意味着用户代理会解析非法部分(以找到其开始和结束),但在其他方面则表现得像它不存在一样。CSS 2.2 为将来更新的 CSS 保留了所有不包含以破折号或下划线开头的标识符的 property:value 组合和 @-关键词。实现必须忽略这些组合(除了将来更新的 CSS 引入的那些组合)。
为了确保将来可以添加新的属性和现有属性的新值,当用户代理遇到以下场景时,必须遵守以下规则:
h1 { color: red; rotation: 70minutes }
用户代理会将其视为如下样式表:
h1 { color: red }
img { float: left } /* 正确的 CSS 2.2 */ img { float: left here } /* "here" 不是 'float' 的值 */ img { background: "red" } /* 关键字不能加引号 */ img { border-width: 3 } /* 长度值必须指定单位 */CSS 2.2 解析器会遵循第一条规则,并忽略其余规则,仿佛样式表是这样的:
img { float: left } img { } img { } img { }
符合未来 CSS 规范的用户代理可能也会接受其中一条或多条其他规则。
当 UA 预期开始一个声明或 at-rule(即 IDENT 标记或 ATKEYWORD 标记)时,却发现了意外标记,该标记被视为格式错误声明的第一个标记。即,在这种情况下,使用格式错误声明的规则,而不是格式错误语句的规则来确定忽略哪些标记。
以下内容均等价:
p { color:green } p { @foo { bar: baz } color:green } /* 未知的 at-rule */ 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} } /* 意外的标记 { } */ p { color:red; color{;color:maroon}; color:green } /* 同样情况,预期恢复 */
p @here {color: red} /* 含有意外的 at-keyword "@here" 的规则集 */ @foo @bar; /* 含有意外的 at-keyword "@bar" 的 at-rule */ }} {{ - }} /* 含有意外右括号的规则集 */ ) ( {} ) p {color: red } /* 含有意外右括号的规则集 */
@three-dee { @background-lighting { azimuth: 30deg; elevation: 190deg; } h1 { color: red } } h1 { color: blue }
'@three-dee' at-rule 不是 CSS 2.2 的一部分。因此,整个 at-rule(包括第三个右大括号)会被忽略。 CSS 2.2 用户代理会忽略它,将样式表有效减少为:
h1 { color: blue }
由于某些内容无效而被忽略的 at-rule(如 @media-rule 中的无效声明),不会使整个 at-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' 之后的分号)是无效的并被丢弃。
某些值类型可能具有整数值(由 <integer> 表示)或实数值(由 <number> 表示)。实数和整数只能以十进制表示。一个 <integer> 由一个或多个数字 "0" 到 "9" 组成。一个 <number> 可以是一个 <integer>,也可以是零个或多个数字后跟一个点(.),然后跟一个或多个数字。整数和实数前面都可以直接加上 "-" 或 "+" 以表示符号。-0 等同于 0,并且不是负数。
请注意,许多允许整数或实数作为值的属性实际上限制值在某个范围内,通常为非负值。
长度指的是距离测量。
长度值的格式(在本规范中用 <length> 表示)是一个<number>(带或不带小数点)后紧跟一个单位标识符(例如,px、em 等)。在零长度之后,单位标识符是可选的。
某些属性允许负长度值,但这可能会使格式化模型复杂化,并且可能存在与实现相关的限制。如果无法支持负长度值,应将其转换为可以支持的最接近的值。
如果在不允许负长度值的属性上设置了负长度值,则忽略该声明。
在无法支持使用的长度的情况下,用户代理必须在实际值中进行近似。
长度单位有两种类型:相对的和绝对的。 相对长度单位指定相对于另一个长度属性的长度。使用相对单位的样式表可以更容易地从一个输出环境扩展到另一个。
相对单位包括:
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 度量。如果没有可靠的字体度量,UA 可以从小写字形的高度中确定 x-height。一种可能的启发式方法是查看小写字母 "o" 的字形从基线向下延伸的距离,并从其边界框的顶部减去该值。如果无法或不切实际地确定 x-height,则应使用 0.5em 的值。
规则:
h1 { line-height: 1.2em }
意味着 "h1" 元素的行高将比 "h1" 元素的字体大小大 20%。另一方面:
h1 { font-size: 1.2em }
意味着 "h1" 元素的字体大小将比 "h1" 元素继承的字体大小大 20%。
当为文档树的根(例如,在 HTML 中的 "HTML")指定时,'em' 和 'ex' 是指属性的初始值。
子元素不会继承为其父元素指定的相对值;它们继承计算值。
在以下规则中,如果 "h1" 是 "body" 元素的子元素,那么 "h1" 元素的'text-indent' 计算值将为 36px,而不是 45px。
body { font-size: 12px; text-indent: 3em; /* 即 36px */ } h1 { font-size: 15px }
绝对长度单位彼此固定关系。当输出环境已知时,它们主要有用。绝对单位包括物理单位(in, cm, mm, pt, pc)和 px 单位:
对于 CSS 设备,这些尺寸要么通过将物理单位与其物理测量值相关联来固定(i),要么通过将像素单位与参考像素相关联来固定(ii)。对于打印媒体和类似的高分辨率设备,锚单位应为标准物理单位之一(英寸、厘米等)。对于低分辨率设备以及具有不寻常观看距离的设备,建议将锚单位设置为像素单位。对于此类设备,建议像素单位参考最接近参考像素的设备像素的整数。
注意,如果锚单位是像素单位,则物理单位可能与其物理测量值不匹配。或者,如果锚单位是物理单位,则像素单位可能不会映射到设备像素的整数。
注意,像素单位和物理单位的这种定义不同于以前版本的 CSS。特别是,在以前的 CSS 版本中,像素单位和物理单位之间没有固定比例关系:物理单位始终与其物理测量值相关联,而像素单位则会变化以最接近参考像素。(此更改是因为太多现有内容依赖于 96dpi 的假设,打破该假设会破坏内容。)
参考像素是具有 96dpi 像素密度且距读者一个手臂长度的设备上的一个像素的视觉角度。对于标称的 28 英寸手臂长度,视觉角度约为 0.0213 度。对于在手臂长度下的阅读,1px 因此约为 0.26 mm(1/96 英寸)。
下图说明了观看距离对参考像素大小的影响:71 cm(28 英寸)的阅读距离产生的参考像素为 0.26 mm,而 3.5 m(12 英尺)的阅读距离产生的参考像素为 1.3 mm。
第二幅图说明了设备分辨率对像素单位的影响:在低分辨率设备(例如典型的计算机显示器)上,1px x 1px 的区域由一个点覆盖,而在高分辨率设备(例如打印机)上,相同的区域由 16 个点覆盖。
h1 { margin: 0.5in } /* 英寸 */ h2 { line-height: 3cm } /* 厘米 */ h3 { word-spacing: 4mm } /* 毫米 */ h4 { font-size: 12pt } /* 点 */ h4 { font-size: 1pc } /* picas */ p { font-size: 12px } /* 像素 */
百分比值的格式(在本规范中表示为 <percentage>)是一个紧跟着“%”的 <number>。
百分比值总是相对于另一个值的,例如一个长度。每一个允许百分比的属性也定义了该百分比所参照的值。该值可能是同一元素的另一个属性的值,祖先元素的属性,或格式化上下文中的一个值(例如,包含块的宽度)。当百分比值被设置为根元素的属性,并且百分比被定义为参照某个属性的继承值时,结果值是该属性初始值的百分比乘积。
由于子元素(通常)继承父元素的计算值,在下面的示例中,P元素的子元素将继承12px的 'line-height'值,而不是百分比值(120%):
p { font-size: 10px } p { line-height: 120% } /* 120% 的 'font-size' */
在本规范中,URI 值(统一资源标识符,参见 [RFC3986],包括 URL、URN 等)表示为 <uri>。在属性值中用于指定 URI 的功能符号是 “url()”,例如:
body { background: url("http://www.example.com/pinkish.png") }
URI 值的格式是 'url(' 后跟可选的 空白,接着是可选的单引号 (') 或双引号 ("),然后是 URI 本身,再接着是可选的单引号 (') 或双引号 ("),最后是可选的空白和 ')'. 这两个引号字符必须相同。
一个不带引号的示例:
li { list-style: url(http://www.example.com/redball.png) disc }
一些出现在未加引号的 URI 中的字符,如括号、空白字符、单引号 (') 和双引号 ("),必须用反斜杠进行转义,以便生成的 URI 值成为 URI 令牌:'\(', '\)'。
根据 URI 的类型,上述字符也可以按照 URI 转义字符书写(其中 "(" = %28, ")" = %29 等),如 [RFC3986] 中所述。
请注意,COMMENT 令牌不能出现在其他令牌中:因此,“url(/*x*/pic.png)”表示的 URI 是 “/*x*/pic.png”,而不是 “pic.png”。
为了创建不依赖于资源绝对位置的模块化样式表,作者可以使用相对 URI。相对 URI(如 [RFC3986] 中定义的)通过基 URI 解析为完整的 URI。RFC 3986,第 5 节,定义了此过程的规范算法。对于 CSS 样式表,基 URI 是样式表的 URI,而不是源文档的 URI。
例如,假设以下规则:
body { background: url("yellow") }
位于由 URI 指定的样式表中:
http://www.example.org/style/basic.css
源文档 BODY 的背景将被所描述的资源平铺,该资源由 URI 指定:
http://www.example.org/style/yellow
用户代理在处理无效的 URI 或指定不可用或不适用的资源的 URI 时可能有所不同。
计数器由区分大小写的标识符表示(参见 'counter-increment' 和 'counter-reset' 属性)。要引用计数器的值,使用符号 'counter(<identifier>)' 或 'counter(<identifier>, <'list-style-type'>)',其中令牌之间可以有可选的空白。默认样式是 'decimal'。
要引用同名嵌套计数器的序列,符号是 'counters(<identifier>, <string>)' 或 'counters(<identifier>, <string>, <'list-style-type'>)',其中令牌之间可以有可选的空白。
参见 “嵌套计数器和作用域” 中关于用户代理如何确定计数器的值或值的章节,以及 'content' 属性中关于如何将这些值转换为字符串的定义。
在 CSS 2.2 中,计数器的值只能从 '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) ". "}
<color> 可以是一个关键词或数值 RGB 规范。
颜色关键词列表为:aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, 和 yellow。这17种颜色具有以下值:
除了这些颜色关键词,用户还可以指定与用户环境中某些对象使用的颜色相对应的关键词。请参考关于系统颜色的部分了解更多信息。
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 扩展为 #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) } /* 整数范围 0 - 255 */ em { color: rgb(300,0,0) } /* 剪裁为 rgb(255,0,0) */ em { color: rgb(255,-10,0) } /* 剪裁为 rgb(255,0,0) */ em { color: rgb(110%, 0%, 0%) } /* 剪裁为 rgb(100%,0%,0%) */
其他设备(如打印机)的色域与 sRGB 不同;一些 sRGB 范围 0..255 之外的颜色将可以表示(在设备色域内),而 sRGB 范围 0..255 内的一些颜色将超出设备色域,因此会被映射。
注意。如果已知(可能大于或小于 0..255)的实际设备色域,颜色值的映射或剪裁应针对该设备色域进行。
字符串可以用双引号或单引号书写。双引号不能出现在双引号内,除非经过转义(例如,'\"' 或 '\22')。单引号同理(例如,"\'" 或 "\27")。
"this is a 'string'" "this is a \"string\"" 'this is a "string"' 'this is a \'string\''
字符串不能直接包含换行符。要在字符串中包含换行符,请使用表示 ISO-10646 (U+000A) 中换行字符的转义,例如 "\A" 或 "\00000a"。此字符表示 CSS 中的通用“换行符”概念。有关示例,请参见'content'属性。
可以为了美观或其他原因将字符串分成多行,但在这种情况下,换行符本身必须用反斜杠 (\) 进行转义。例如,以下两个选择器完全相同:
a[title="a not s\ o very long title"] {/*...*/} a[title="a not so very long title"] {/*...*/}
如果 UA 不支持某个特定的值,在解析样式表时,它应该忽略该值,就像该值是非法值一样。例如:
h3 { display: inline; display: run-in; }
支持 'run-in' 值的 UA 会接受第一个 display 声明,然后用第二个 display 声明“覆盖”该值。不支持 'run-in' 值的 UA 会处理第一个 display 声明,并忽略第二个 display 声明。
CSS 样式表是一串来自通用字符集的字符(参见 [ISO10646])。在传输和存储时,这些字符必须由支持 US-ASCII 字符集的字符编码进行编码(例如,UTF-8、ISO 8859-x、SHIFT JIS 等)。关于字符集和字符编码的良好介绍,请参阅 HTML 4 规范([HTML4],第 5 章)。另请参阅 XML 1.1 规范([XML11],第 2.2 和 4.3.3 节以及附录 E)。
当样式表嵌入在另一个文档中时,例如在 HTML 的 STYLE 元素或 "style" 属性中,样式表与整个文档共享相同的字符编码。
当样式表位于单独的文件中时,用户代理在确定样式表的字符编码时,必须遵循以下优先级(从最高优先级到最低优先级):
<link charset="">
或链接机制的其他元数据(如果有)使用@charset规则的作者必须将该规则放在样式表的最前面,不得有任何字符在其前面。(如果所用编码适合字节顺序标记,它可以位于 @charset 规则之前。)
在"@charset"之后,作者指定字符编码的名称(用引号括起来)。例如:
@charset "ISO-8859-1";
@charset 必须按字面书写,即 10 个字符 '@charset "'(小写,无反斜杠转义),后跟编码名称,再后跟 '";'。
该名称必须是 IANA 注册表中描述的字符集名称。有关字符集的完整列表,请参阅 [CHARSETS]。作者应使用 IANA 注册表中标记为“首选 MIME 名称”的字符集名称。
用户代理必须至少支持 UTF-8 编码。
如果上面第 1 条规则(HTTP "charset" 参数或类似参数)产生的字符编码是 UTF-8、UTF-16 或 UTF-32,那么文件开头的 BOM(如果有)将覆盖该字符编码,如下所示:
起始字节(十六进制) | 结果编码 |
---|---|
00 00 FE FF | UTF-32,大端序 |
FF FE 00 00 | UTF-32,小端序 |
FE FF | UTF-16,大端序 |
FF FE | UTF-16,小端序 |
EF BB BF | UTF-8 |
如果第 1 条规则产生的字符编码是 UTF-16BE、UTF-16LE、UTF-32BE 或 UTF-32LE,则文件开头有 BOM 是一个错误。CSS UA 必须通过忽略指定的编码并使用上表进行恢复。
请注意,文件开头的 BOM 在 UTF-16BE、UTF-16LE、UTF-32BE 或 UTF-32LE 中为错误,这一点在[UNICODE]中有所规定。
用户代理必须忽略样式表开头以外的任何 @charset 规则。当用户代理使用 BOM 和/或 @charset 规则检测到字符编码时,应遵循以下规则:
初始字节 | 结果 |
---|---|
EF BB BF 40 63 68 61 72 73 65 74 20 22 (XX)* 22 3B | 按指定 |
EF BB BF | UTF-8 |
40 63 68 61 72 73 65 74 20 22 (XX)* 22 3B | 按指定 |
FE FF 00 40 00 63 00 68 00 61 00 72 00 73 00 65 00 74 00 20 00 22 (00 XX)* 00 22 00 3B | 按指定(如果未指定,则为 BE 字节序) |
00 40 00 63 00 68 00 61 00 72 00 73 00 65 00 74 00 20 00 22 (00 XX)* 00 22 00 3B | 按指定(如果未指定,则为 BE 字节序) |
FF FE 40 00 63 00 68 00 61 00 72 00 73 00 65 00 74 00 20 00 22 00 (XX 00)* 22 00 3B 00 | 按指定(如果未指定,则为 LE 字节序) |
40 00 63 00 68 00 61 00 72 00 73 00 65 00 74 00 20 00 22 00 (XX 00)* 22 00 3B 00 | 按指定(如果未指定,则为 LE 字节序) |
00 00 FE FF 00 00 00 40 00 00 00 63 00 00 00 68 00 00 00 61 00 00 00 72 00 00 00 73 00 00 00 65 00 00 00 74 00 00 00 20 00 00 00 22 (00 00 00 XX)* 00 00 00 22 00 00 00 3B | 按指定(如果未指定,则为 BE 字节序) |
00 00 00 40 00 00 00 63 00 00 00 68 00 00 00 61 00 00 00 72 00 00 00 73 00 00 00 65 00 00 00 74 00 00 00 20 00 00 00 22 (00 00 00 XX)* 00 00 00 22 00 00 00 3B | 按指定(如果未指定,则为 BE 字节序) |
00 00 FF FE 00 00 40 00 00 00 63 00 00 00 68 00 00 00 61 00 00 00 72 00 00 00 73 00 00 00 65 00 00 00 74 00 00 00 20 00 00 00 22 00 (00 00 XX 00)* 00 00 22 00 00 00 3B 00 | 按指定(如果未指定,则为 2143 字节序) |
00 00 40 00 00 00 63 00 00 00 68 00 00 00 61 00 00 00 72 00 00 00 73 00 00 00 65 00 00 00 74 00 00 00 20 00 00 00 22 00 (00 XX 00 00)* 00 22 00 00 00 3B 00 | 按指定(如果未指定,则为 2143 字节序) |
FE FF 00 00 00 40 00 00 00 63 00 00 00 68 00 00 00 61 00 00 00 72 00 00 00 73 00 00 00 65 00 00 00 74 00 00 00 20 00 00 00 22 00 00 (00 XX 00 00)* 22 00 00 00 3B 00 00 | 按指定(如果未指定,则为 3412 字节序) |
40 00 00 00 63 00 00 00 68 00 00 00 61 00 00 00 72 00 00 00 73 00 00 00 65 00 00 00 74 00 00 00 20 00 00 00 22 00 00 (XX 00 00 00)* 22 00 00 00 3B 00 00 00 | 按指定(如果未指定,则为 3412 字节序) |
00 00 FE FF | UTF-32-BE |
FF FE 00 00 | UTF-32-LE |
00 00 FF FE | UTF-32-2143 |
FE FF 00 00 | UTF-32-3412 |
FE FF | UTF-16-BE |
FF FE | UTF-16-LE |
7C 83 88 81 99 A2 85 A3 40 7F (YY)* 7F 5E | 按指定,从 EBCDIC 转码为 ASCII |
AE 83 88 81 99 A2 85 A3 40 FC (YY)* FC 5E | 按指定,从 IBM1026 转码为 ASCII |
00 63 68 61 72 73 65 74 20 22 (YY)* 22 3B | 按指定,从 GSM 03.38 转码为 ASCII |
类似模式 | 如果用户代理支持不由此处模式处理的编码,则可以支持附加的、类似的模式 |
用户代理必须忽略未知编码的样式表。
样式表可能需要引用当前字符编码中无法表示的字符。这些字符必须写成转义的 ISO 10646 字符引用。这些转义与 HTML 或 XML 文档中的数字字符引用起相同的作用(参见 [HTML4],第 5 章和第 25 章)。
当只有少数字符需要以这种方式表示时,应使用字符转义机制。如果大部分样式表都需要转义,作者应使用更合适的编码(例如,如果样式表包含大量希腊字符,作者可能会使用“ISO-8859-7”或“UTF-8”)。
使用不同字符编码的中间处理器可能会将这些转义序列转换为该编码的字节序列。另一方面,中间处理器不得更改取消 ASCII 字符特殊含义的转义序列。
符合要求的用户代理必须将其识别的任何字符编码中的所有字符正确映射到 ISO-10646(或者它们必须表现得像它们这样做一样)。
例如,以 ISO-8859-1(拉丁字母-1)传输的样式表不能直接包含希腊字母:“κουρος”(希腊语:“kouros”)必须写成“\3BA\3BF\3C5\3C1\3BF\3C2”。
注意。 在 HTML 4 中,数字字符引用在“style”属性值中被解释,但在 STYLE 元素的内容中不被解释。由于这种不对称性,我们建议作者使用 CSS 字符转义机制,而不是数字字符引用来处理“style”属性和 STYLE 元素。例如,我们建议:
<SPAN style="font-family: L\FC beck">...</SPAN>
而不是:
<SPAN style="font-family: Lübeck">...</SPAN>