CSS 语法介绍:声明、规则集和语句
层叠样式表(CSS)语言的基本目标是允许浏览器引擎为页面元素绘制特定功能,如颜色、定位或装饰。CSS 语法反映了这一目标,其基本构成部分是:
- 属性(property)是一个标识符,即一个人类可读的名称,用于定义要考虑哪个特性。
- 值(value)描述了引擎必须如何处理该特性。每个属性都有一组有效值,由形式语法定义,并具有由浏览器引擎实现的语义。
CSS 声明
将 CSS 属性设置为特定值是 CSS 语言的核心功能。一个属性和值的配对称为声明(declaration),任何 CSS 引擎都会计算哪些声明适用于页面的每一个元素,以便适当地进行布局和样式设置。
在 CSS 中,属性和值默认都不区分大小写。属性和值之间用冒号 :
(U+003A COLON) 分隔,属性和值之前、之间和之后的空白字符都会被忽略,但属性或值内部的空白字符不一定会被忽略。
CSS 中有数百种不同的属性和几乎数不清的不同值。并非所有属性和值的组合都是允许的,每个属性都定义了哪些是有效值。当一个值对于给定的属性无效时,该声明将被视为无效,并被 CSS 引擎完全忽略。
CSS 声明块
声明被组合在块(block)中,即由一个左花括号 {
(U+007B LEFT CURLY BRACKET) 和一个右花括号 }
(U+007D RIGHT CURLY BRACKET) 分隔的结构中。块有时可以嵌套,所以左右花括号必须配对。
这样的块自然地被称为声明块(declaration blocks),块内的声明用分号 ;
(U+003B SEMICOLON) 分隔。声明块可以为空,即不包含任何声明。声明周围的空白字符会被忽略。块的最后一条声明不需要以分号结尾,尽管通常认为这样做是良好风格,因为这样可以防止在向块中添加另一条声明时忘记添加分号。
下图展示了一个 CSS 声明块。
注意:CSS 声明块的内容,即一系列以分号分隔的声明,不包括开始和结束的花括号,可以放在 HTML 的 style
属性中。
CSS 规则集
如果样式表只能为网页的每个元素应用一条声明,那么它们就没什么用了。真正的目标是对文档的不同部分应用不同的声明。
CSS 通过将条件与声明块关联起来实现了这一点。每个(有效的)声明块前面都有一个或多个以逗号分隔的选择器(selectors),这些选择器是选择页面某些元素的条件。一个选择器列表及其关联的声明块合在一起,称为一个规则集(ruleset),或者通常简称为规则(rule)。
下图展示了一个 CSS 规则集(或规则)。
由于页面上的一个元素可能被多个选择器匹配,因此可能被多个规则匹配,这些规则可能多次包含同一个属性但具有不同的值,CSS 标准定义了哪个规则优先于其他规则并必须被应用:这被称为层叠算法(参见处理冲突)。
注意:需要注意的是,尽管由一组选择器构成的规则集是多个单选择器规则集的简写形式,但这并不适用于规则集本身的有效性。
这带来一个重要的后果:如果单个基本选择器无效,例如使用了未知的伪元素或伪类,那么整个选择器就是无效的,因此整个规则也会被忽略(同样视为无效)。
CSS 语句
规则集是样式表的主要构建块,样式表通常仅由一个庞大的规则集列表组成。但 Web 作者还希望在样式表中传达其他信息,如字符集、要导入的其他外部样式表、字体或列表计数器描述等等。他们会使用其他特定的语句类型来完成这些任务。
语句(statement)是一个以任何非空白字符开头,并以第一个右花括号或分号(在字符串之外、未转义且不包含在其他 {}、() 或 [] 对中)结尾的构建块。
有两种语句:
- 规则集(或规则),如前所述,它将一组 CSS 声明与由选择器描述的条件相关联。
- @规则(at-rules)以 @ 符号
@
(U+0040 COMMERCIAL AT) 开头,后跟一个标识符,然后一直持续到语句结束,即直到下一个不在块内的分号 (;) 或下一个块的末尾。每种由标识符定义的@规则都可能有其自己的内部语法和语义。它们用于传达元数据信息(如@layer
或@import
)、条件信息(如@media
或@document
)或描述性信息(如@font-face
)。
任何不是规则集或 @规则的语句都是无效的,并被忽略。
嵌套语句
还有另一组语句——嵌套语句(nested statements)。这些语句可以用在一组特定的 @规则中,即条件组规则。这些语句仅在特定条件匹配时才适用:@media
@规则的内容仅在浏览器运行的设备匹配所表达的条件时才适用;@document
@规则的内容仅在当前页面匹配某些条件时才适用,等等。在 CSS1 和 CSS2.1 中,只有规则集可以在条件组规则内部使用。这非常受限,这个限制在 CSS 条件规则第 3 级中被取消了。现在,虽然仍处于实验阶段且并非所有浏览器都支持,条件组规则可以包含更广泛的内容:规则集以及一些(但不是所有)@规则。