本节描述的语法(以及向前兼容的解析规则(forward-compatible parsing)规则)适用于任何版本的CSS(包括CSS 2.1)。CSS将来的更新也将遵守此处的核心语法,尽管它们可能添加了额外的语法约束
这些描述都是规范的内容,它们也会被附录 G中提出的规范语法规则所补充
本规范中,类似于“前面紧跟”或者“后面紧跟”的表述意味着之间没有空格或者注释
所有版本的CSS—CSS 1,CSS 2和将来的任何版本—用的都是相同的核心语法。这样UA就可以解析(虽然不完全能理解)以UA发布时尚不存在的CSS版本编写的样式表。设计者可以根据该特征来创建兼容旧版本用户代理的样式表,同时也能运用最新版本的CSS
在词法层面上,CSS样式表由一系列token组成,这些token如下,定义中用了词法分析风格(Lex-style)的正则表达式。八进制码参考了ISO 10646([ISO10646]),和词法分析一样,存在多个匹配时,把最长的匹配作为token
Token | Definition |
---|---|
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}\) |
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 | 所有无法被上述规则匹配的其它字符,并且既不是单引号也不是双引号 |
以上定义中花括号({})中的宏定义(macros)如下:
Macro | Definition |
---|---|
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-->
"会被符号化为一个IDENT "red--
"后面跟着一个DELIM ">
",而不是一个IDENT后面跟着一个CDC
下面是CSS的核心语法,本节接着说怎样用它。附录 G描述了一个约束更多的更接近CSS2的语法。能根据本语法解析,但不能用附录 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? [ ';' 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*;
"unused"产生式不用在CSS中,也不会被任何将来的扩展使用。这里提到它只是为了帮助完成错误处理。(见4.2 “处理解析错误的规则”)
注意 token不会出现在语法中(为了保持其可读性),但任意数量的token都可以出现在其它token外的任何地方(注意,然而,出现在@charset前或者里面的注释都会导致@charset无效)
上面语法中的token S代表空白字符,空白字符中只能出现"space" (U+0020),"tab" (U+0009),"line feed" (U+000A),"carriage return" (U+000D)和"form feed" (U+000C)。其它的类空格(space-like)字符,例如"em-space" (U+2003)和"ideographic space" (U+3000)不会被当作空白字符的一部分
不能被符号化或解析的输入的含义在CSS 2.1中是未定义的(The meaning of input that cannot be tokenized or parsed is undefined in CSS 2.1.)
关键字是标识符形式的,不能放在引号("..."或者'...')中,因此,
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.1的实现者们都应该采用遵从CSS的(CSS-conforming)解析器,无论是否支持任何特定供应商扩展
编写者应该避免特定供应商扩展
本节内容是信息性的
编写本文档时,下列众所周知的前缀已经存在了:
prefix | organization |
---|---|
-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])是逐码等价的(code-by-code equivalent)
第一种,字符串中后面跟着换行的反斜线会被忽略(例如,字符串被视为既不含反斜线也不含换行),字符串外后面跟着换行的反斜线代表自身(例如,换行跟着一个DELIM)
第二种,用来取消特殊CSS字符的含义。任何字符(除了十六进制数,换行,回车换行和换页)都可以通过反斜线转义来取消其特殊含义。例如,"\""是由一个双引号组成的字符串。样式表预处理器不能从样式表中移除这些反斜线,因为会改变样式表的含义
第三种,反斜线转义允许编写者引用那些难以在文档中直接输入的字符。此时,反斜线后面最多跟6个十六进制数(0..9A..F),代表ISO 10646([ISO10646])中该数字对应的字符,这个数一定是非零的。(在CSS 2.1中没有定义如果样式表含有一个Unicode码位值(codepoint)为0的字符时,会发生什么)。如果是一个[0-9a-fA-F]范围内的字符组成的(合法)十六进制数,还需要明确结束位置的数,有两种方法:
实际上,这两种方法可以结合起来,只忽略十六进制转义后面的一个空白字符。注意,这意味着转义序列后面的一个“真正的”空格必须双写
如果这个数字超出了Unicode允许的范围(例如,"\110000"大于目前Unicode允许的上限10FFFF),UA可能会用“替换字符”(U+FFFD)换掉这个转义。如果该字符需要显示,UA应该显示一个可见的符号,例如“丢失字符”字形("missing character" glyph)(参见15.2 第5点)
标识符"te\st"与标识符"test"完全相同
任何版本的CSS样式表都是由一系列语句(见上文语法)组成的。有两种语句:@规则和语句集,语句前后可以有空白字符(white space)
@规则以一个@关键字开头,'@'字符后面紧跟着一个标识符(例如,'@import','@page')
一个@规则包含直到下一个分号(;)前包括分号在内,或者下一个块的所有内容,无论哪个先出现
CSS 2.1用户代理必须忽略所有出现在块内部,或者跟在除@charset和@import规则外的任何无法忽略的语句后面的'@import'规则
例如,假设一个CSS 2.1解析器遇到了这样一个样式表:
@import "subs.css";
h1 { color: blue }
@import "list.css";
根据CSS 2.1,第二个'@import'是非法的,CSS 2.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 }
相反的,为了提高效率,只在媒体类型为'print'时引入样式表,可以使用带媒体类型的@import规则语法,例如:
@import "subs.css";
@import "print-main.css" print;
@media print {
body { font-size: 10pt }
}
h1 {color: blue }
block以一个左花括号({)开头,以对应的右花括号(})结束。之间可以是任何token,但圆括号(( )),方括号([ ])和花括号({ })必须总是成对出现,可以嵌套。单引号(')和双引号(")也必须成对出现,它们之间的字符会被解析成一个字符串。参见上文符号化中字符串的定义
有一个关于块的示例,注意双引号之间的右花括号不会匹配块的左花括号,而且第二个单引号是一个被转义的字符,因此也不会匹配第一个单引号:
{ causta: "}" + ({7} * '\'') }
注意,上面的规则在CSS 2.1中是非法的,但也符合上面块的定义
规则集(也叫“规则”),由后面跟着一个声明块的选择器组成
声明块以左花括号({)开始,以与之匹配的右花括号(})结束,之间必须有一列由0个或多个分号分隔(;)的声明
选择器(见选择器)包含直到第一个左花括号({)的所有东西(但不包括左花括号),选择器总是和声明块一起出现。当用户代理无法解析一个选择器(例如,该选择器在CSS 2.1中不合法)时,必须忽略选择器以及后面的声明块(如果有的话)
CSS 2.1给选择器中的逗号(,)赋予了特殊的含义,然而,因为不确定将来CSS更新时逗号是否还会获得其他含义,所以如果选择器任何位置出现错误,整个语句都应该被忽略,即便选择器剩余部分在CSS 2.1中完全合法
例如,因为"&"在CSS 2.1选择器中不是合法的token,CSS 2.1用户代理必须忽略整个第二行,并且不会把H3的颜色设置为红色:
h1, h2 {color: green }
h3, h4 & h5 {color: red }
h6 {color: black }
有个更复杂的示例,先出现的两对花括号在一个字符串中,并没有标记选择器结束,这是一条合法的CSS 2.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。圆括号("( )"),方括号("[ ]"),花括号("{ }"),单引号(')和双引号(")必须成对出现,并且非字符串形式的分号必须转义。圆括号,方括号和花括号可以嵌套。引号里的字符当做string解析
(属性)值的语法单独定义在每个属性中,但无论如何,值都是由标识符,字符串,数字,长度,百分比,URI,颜色等构成的
用户代理必须忽略含有非法属性名或者非法值的声明,任何CSS属性对它能接受的值都有自己的句法(syntactic)和语义限制
例如,假设一个CSS 2.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-vendor'。CSS 2.1解析器将忽略这些声明,样式表简化为:
h1 { color: red; }
p { color: blue; font-variant: small-caps }
em em { font-style: normal }
注释以"/*"字符开始,以"*/"字符结束。它们可以出现在其它token外的任何地方,注释内容对渲染没有影响。注释不能嵌套
CSS也允许SGML注释分隔符("<!--"与"-->")出现在语法定义的某个位置,但它们不能分隔CSS注释。它们让出现在HTML源文档(STYLE元素)中的样式规则可以在pre-HTML 3.2用户代理中隐藏起来。更多信息请查看HTML 4规范([HTML4])
某些情况下,用户代理必须忽略一份非法样式表的某一部分。本规范定义了忽略意味着用户代理要解析非法部分(为了找到起止位置),但还要表现得像这部分不存在一样。 CSS 2.1为将来CSS更新保留了所有的属性:值组合和不含以斜线和下划线开头的标识符的@关键字。实现必须忽略这样的组合(除了那些在将来CSS更新中介绍的)
为了保证新属性和新值将来可以添在现有的属性上,用户代理遇到下列场景时需要遵循下列规则:
h1 { color: red; rotation: 70minutes }
用户代理将把样式表当作
h1 { color: red }
img { float: left } /* correct CSS 2.1 */
img { float: left here } /* "here" is not a value of 'float' */
img { background: "red" } /* keywords cannot be quoted */
img { border-width: 3 } /* a unit must be specified for length values */
CSS 2.1解析器将接受第一条规则,并忽略剩下的,就像样式表是:
img { float: left }
img { }
img { }
img { }
与将来的CSS规范一致的用户代理也可以接受一条或者更多的其它规则
p { color:green }
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 */
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 */
@three-dee {
@background-lighting {
azimuth: 30deg;
elevation: 190deg;
}
h1 { color: red }
}
h1 { color: blue }
@规则'@three-dee'不是CSS 2.1的一部分,因此,整个@规则(直到并包括第三个右花括号)都会被忽略。CSS 2.1用户代理会忽略它,样式表简化为:
h1 { color: blue }
@规则里的一些东西会因为非法而被忽略,例如@media规则中的一条非法声明,不会导致整个@规则非法
用户代理必须闭合样式表结尾的所有开放结构(例如:块,圆括号,方括号,规则,字符串和注释),例如:
@media screen {
p:before { content: 'Hello
将被当作:
@media screen {
p:before { content: 'Hello'; }
}
在(与CSS规范)一致的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等价于0,不是负数
注意,很多允许整数或者实数作为值的属性实际上限制了值的范围,通常是一个非负值
长度涉及距离测量
长度值的格式(本规范<length>)章节中指出的)是一个<number>(有或没有小数点)后面紧跟着一个单位标识符(例如,px,em等等)。0长度后面的单位标识符是可选的
一些属性允许负的长度值,但会让格式化模型变得复杂,并且可能存在具体实现限制。如果一个负长度值不被支持,它应该被转化为最相近(nearest)的支持值
如果不接受负长度值的属性被设置了一个负长度值,声明会被忽略
有两种类型的长度单位:相对和绝对。 相对长度单位指定了一个相对于其它长度属性的单位。使用相对单位的样式表更容易根据不同的输出环境缩放
相对单位有:
h1 { margin: 0.5em } /* em */
h1 { margin: 1ex } /* ex */
'em'单位等于应用该规则的元素的'font-size'属性的计算值。一种异常情况是当'em'出现在'font-size'属性本身的值中时,这种情况下参考父元素的字体大小。它可以用在垂直或者水平测量中(这个单位在印刷文本中有时也叫quad-width,四宽度?)
'ex'单位是根据元素的第一个可用字体定义的。一种异常情况是当'ex'出现在'font-size'属性的值中,此时参考父元素的'ex'
之所以叫'x-height',是因为通常等于小写"x"的高度。然而,不含"x"的字体中也定义了'ex'
字体的x-height可以通过几种不同的方式得到。有些字体包含关于x-height的可靠规格。如果可靠的字体规格无法获得,UA可以根据一个小写字形的高度确定x-height。一个可能的启发是看小写"o"的字形延伸到基线下方多远,并减去其边界框的top值。如果有时确定x-height是不可能或者不现实的,就应该用0.5em
规则:
h1 { line-height: 1.2em }
表示"h1"元素的行高将比"h1"元素的字体大小大20%,另一种情况:
h1 { font-size: 1.2em }
表示"h1"元素的font-size将比"h1"元素继承得到的字体大小大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 }
绝对长度单位彼此之间是固定不变的。它们主要用于输出环境已知时,绝对单位包括物理单位(in,cm,mm,pt,pc)和px单位:
对于CSS设备,这些尺寸要么参照(i)物理测量相关的物理单位,要么(ii)参照参考像素相关的像素单位。对于平面媒体(print media)和类似的高分辨率设备,参照单位(anchor unit)应该是标准物理单位(英寸,厘米等等)之一。对于低分辨率设备和有特殊视距的(with unusual viewing distances)设备,推荐把像素单位作为参照单位。对于这种设备推荐像素单位参考最接近参照像素(reference pixel)的整数设备像素
注意,如果参照单位是像素单位,物理单位可能与它们的物理测量不一致。或者,如果参照单位是物理单位,像素单位也可能与整数设备像素不对应
注意,这里像素单位和物理单位的定义与CSS之前版本不同。特别地,在CSS之前版本中,像素单位和物理单位与固定比例(fixed ratio)无关:物理单位总是与它们的物理测量紧密相关,而像素单位会变得最接近参考像素(出现这种变化是因为太多现有内容依赖96dpi的假设,而打破这个假设就会破坏这些内容)
参考像素由96dpi屏幕上一个像素的宽度(或高度)与成人一臂长的夹角来确定。一般臂长是28英寸,视角是0.0213度。为了在臂长位置阅读,所以1px对应约0.26毫米(1/96英寸)
下图描述了视距对参考像素的影响:在71厘米(28英尺)的阅读距离下一个参考像素是0.26毫米,而在3.5米的阅读距离下一个参考像素是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 */
百分比值(本规范中用<percentage>表示)的格式是一个<number>后面紧跟着'%'
百分比值总是和其它值有关,例如,长度。每个接受百分比的属性也定义了百分比所参考的值。该值可以是同一元素的另一个属性,祖先元素的属性或者来自格式化上下文(例如,一个包含块的宽度)的值。当给根元素的属性设置了一个百分比值时,并且百分比参照了一些属性的继承值,结果值是百分比乘以该属性的初始值
因为子元素(一般)继承其父元素计算值,下例中。P元素的子级将通过继承得到值为12px的'line-height',而不是百分比值(120%):
p { font-size: 10px }
p { line-height: 120% } /* 120% of 'font-size' */
本规范中,URI值(Uniform Resource Identifiers统一资源标识符,见[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 token:'\(','\)'
根据URI的类型,也有可能以URI转义("(" = %28,")" = %29等等)的方式写出上面的字符,如[RFC3986]所述
注意,COMMENT token不会出现在其它token中:因此,"url(/*x*/pic.png)"表示URI "/*x*/pic.png",而不是"pic.png"
为了创建模块化的样式表,不依赖资源的绝对定位,编写者可以使用相对URI。相对URI(如[RFC3986]中的定义)会根据基URI被处理为完整URI。RFC 3986第5节定义了该过程的标准算法。对于CSS样式表而言,基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'>)',可以有可选的空白字符分隔这些token,默认样式是'decimal'
为了引用一系列嵌套的同名计数器,可以用标记'counters(<identifier>, <string>)'或者'counters(<identifier>, <string>, <'list-style-type'>)',可以有可选的空白字符分隔这些token
关于用户代理会如何确定值或计数器值,见内容生成章节的"嵌套的计数器和作用域"小节。关于怎样把计数器值转化为字符串,见'content'属性的定义
CSS 2.1中,只能通过'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规范的数值
color关键字有: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值格式是一个'#'后面紧跟着3个或者6个十六进制字符。3位RGB表示法(#rgb)可以通过重复位转换成6位形式(#rrggbb),而不是添0。例如,#fb0展开是#ffbb00,保证了白色(#ffffff)可以用简写形式(#fff)指定,并且去掉了对显示器颜色深度的依赖
RGB值格式的函数标记是'rgb('后面跟着一个逗号分隔的3个数值(要么是3个整数,要么是3个百分比值)和')'。整数值255对应100%和十六进制表示法中的F或者FF:rgb(255,255,255) = rgb(100%,100%,100%) = #FFF。数值前后可以有空白字符
所有RGB颜色都定义在sRGB颜色空间中(见[SRGB])。用户代理表示这些颜色时可能在保真度(fidelity)方面有差异,但会使用sRGB提供的颜色的明确客观的可衡量定义,这与国际化标准有关(见[COLORIMETRY])
(与本规范)一致的用户代理可能会对颜色进行伽玛校正(gamma-correction)来限制颜色显示的效果。sRGB指定了特定观察环境下显示伽玛(display gamma )为2.2。用户代理应该调整CSS中给出的颜色,这样结合输出设备的“自然”("natural")显示伽玛,一个有效的2.2显示伽玛就产生了。注意,只有在CSS中指定的颜色才会受影响,例如,图片被认为携带了它们自己的颜色信息
设备色域(gamut)外的值应该被裁剪或者当色域已知时应该映射到色域中:red,green和blue的值必须必须转换到设备支持的范围内。用户代理可能会进行从一个色域到另一个色域的更高质量的颜色映射。对于典型的CRT显示器(CRT monitor),其设备色域与sRGB相同,下面这4条规则是等价的:
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 sRGB范围外的颜色也是可表示的(在设备色域内),而那些在0..255 sRGB范围内的颜色会因为不在设备色域内而被映射
注意 色值的映射或裁剪应该在设备色域已知(可能比0..255大或小)时进行
字符串既能写在双引号里也能写在单引号里。双引号不能出现在双引号中,除非转义过了(例如,'\"'或者'\22')。单引号也是类似的(例如,"\'"或者"\27")
"this is a 'string'" "this is a \"string\"" 'this is a "string"' 'this is a \'string\''
字符串不能直接包含换行(newline)。为了在字符串中包含换行,可以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;
}
支持'display'为'run-in'值的UA将接受第一个display声明,然后用第二个display声明的值“重写”它。不支持'run-in'值的UA将处理第一个display声明并忽略第二个display声明
CSS样式表是通用字符集(Universal Character Set,见[ISO10646])中的一系列字符。为了传输和存储,这些字符必须根据US-ASCII(例如,UTF-8,ISO8859-x,SHIFT JIS等等)中支持的可用字符集的字符编码进行编码。为了更好地介绍字符集和字符编码,请查看HTML 4规范([HTML4],第5章)。另见XML 1.0规范([XML10],第2.2节和4.33节以及附录 F)
当一个样式表被嵌进其它文档时,比如HTML中的STYLE元素或者"style"属性,样式表会共享整篇文档的字符编码
如果一个样式表处于一个独立文件中,需要确定该样式表的字符编码(从最高优先级到最低)时,用户代理必须观察下列属性:
<link charset="">
或者来自链接机制的其它元数据(如果有的话)使用@charset规则的编写者必须把该规则放在样式表的开头,前面没有任何字符(如果一个字节顺序标记(byte order mark)适用于当前编码,它可能会在@charset规则之前)
在"@charset"之后,编写者指定字符编码(用引号引起来)名,例如:
@charset "ISO-8859-1";
@charset必须写成字面量形式,也就是说,这10个字符'@charset "'(小写,不含反斜线转义)后面跟着编码名和'";'
编码名必须是一个存在于IANA注册库(IANA registry)中的字符集名。charset完整列表见[CHARSETS]。编写者应该使用IANA注册库中带有“MIME名优先”("preferred MIME name")的字符集名
用户代理必须至少支持UTF-8编码
用户代理必须忽略任何不在样式表开头的@charset规则。当用户代理检测BOM和/或@charset使用的字符编码时,它们应该遵循下列规则:
Initial Bytes | Result |
---|---|
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 | 与指定值相同 (with BE endianness if not specified) |
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 | 与指定值相同 (with BE endianness if not specified) |
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 | 与指定值相同 (with LE endianness if not specified) |
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 | 与指定值相同 (with LE endianness if not specified) |
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 | 与指定值相同 (with BE endianness if not specified) |
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 | 与指定值相同 (with BE endianness if not specified) |
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 | 与指定值相同 (with 2143 endianness if not specified) |
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 | 与指定值相同 (with 2143 endianness if not specified) |
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 00 00 | 与指定值相同 (with 3412 endianness if not specified) |
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 00 | 与指定值相同 (with 3412 endianness if not specified) |
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 00 00 | 与指定值相同 (with LE endianness if not specified) |
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 00 00 | 与指定值相同 (with LE endianness if not specified) |
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 | 与指定值相同, transcoded from EBCDIC to ASCII |
AE 83 88 81 99 A2 85 A3 40 FC (YY)* FC 5E | 与指定值相同, transcoded from IBM1026 to ASCII |
00 63 68 61 72 73 65 74 20 22 (YY)* 22 3B | 与指定值相同, transcoded from GSM 03.38 to ASCII |
analogous patterns | User agents may support additional, analogous, patterns if they support encodings that are not handled by the patterns here |
用户代理必须忽略未知编码的样式表
样式表可能不得不引入那些在当前字符编码中无法显示的字符。这些字符必须被写成转义的ISO 10646字符。这些转义的目的都是把数字字符引入HTML或者XML文档中(见[HTML4],第5章和25章)
字符转义机制应该只被用在一些必须以这种方式显示的字符上。如果样式表中的大部分内容都需要转义,编写者应该用一种更合适的编码来对它进行编码(例如,如果样式表含有大量的希腊文字,编写者应该用"ISO-8859-7"或者"UTF-8")
使用不同的字符编码的中间处理器可以把这些转义的序列翻译成相应编码的字节序列。另一方面,中间处理器不能改变转义序列取消ASCII字符的特殊含义
(与本规范)一致的用户代理必须能够正确地把ISO-10646的所有字符映射成它们可识别的字符编码(或者它们必须表现得至少看起来是正确的)
例如,一份以ISO-8859-1(Latin-1)传输的样式表不能直接包含希腊字母:"κουρος"(希腊语:"kouros"(青年))必须写作"\3BA\3BF\3C5\3C1\3BF\3C2"
注意 HTML 4中,数字字符引用被解释为"style"属性的值,而不是STYLE元素的内容(numeric character references are interpreted in "style" attribute values but not in the content of the STYLE element.)。由于这种不对称(asymmetry),我们建议编写者对"style"属性和STYLE元素都使用CSS字符转义机制而不是数字字符引用,例如,我们推荐:
<SPAN style="font-family: L\FC beck">...</SPAN>
而不是:
<SPAN style="font-family: Lübeck">...</SPAN>