CSS 语法介绍:声明、规则集和语句

层叠样式表(CSS)语言的基本目标是允许浏览器引擎为页面元素绘制特定功能,如颜色、定位或装饰。CSS 语法反映了这一目标,其基本构成部分是:

  • 属性(property)是一个标识符,即一个人类可读的名称,用于定义要考虑哪个特性。
  • 值(value)描述了引擎必须如何处理该特性。每个属性都有一组有效值,由形式语法定义,并具有由浏览器引擎实现的语义。

CSS 声明

将 CSS 属性设置为特定值是 CSS 语言的核心功能。一个属性和值的配对称为声明(declaration),任何 CSS 引擎都会计算哪些声明适用于页面的每一个元素,以便适当地进行布局和样式设置。

在 CSS 中,属性和值默认都不区分大小写。属性和值之间用冒号 : (U+003A COLON) 分隔,属性和值之前、之间和之后的空白字符都会被忽略,但属性或值内部的空白字符不一定会被忽略。

A css declaration is a property value pair, with a colon separating the two entities and a semi-colon closing the declaration.

CSS 中有数百种不同的属性和几乎数不清的不同值。并非所有属性和值的组合都是允许的,每个属性都定义了哪些是有效值。当一个值对于给定的属性无效时,该声明将被视为无效,并被 CSS 引擎完全忽略。

CSS 声明块

声明被组合在块(block)中,即由一个左花括号 { (U+007B LEFT CURLY BRACKET) 和一个右花括号 } (U+007D RIGHT CURLY BRACKET) 分隔的结构中。块有时可以嵌套,所以左右花括号必须配对。

Two braces delimit the start and end of a CSS block, with css content or no content between the braces.

这样的块自然地被称为声明块(declaration blocks),块内的声明用分号 ; (U+003B SEMICOLON) 分隔。声明块可以为空,即不包含任何声明。声明周围的空白字符会被忽略。块的最后一条声明不需要以分号结尾,尽管通常认为这样做是良好风格,因为这样可以防止在向块中添加另一条声明时忘记添加分号。

下图展示了一个 CSS 声明块。

Within a CSS block, encompassed in braces, semicolons separate declarations, with the final semicolon being optional but recommended as good practice.

注意:CSS 声明块的内容,即一系列以分号分隔的声明,不包括开始和结束的花括号,可以放在 HTML 的 style 属性中。

CSS 规则集

如果样式表只能为网页的每个元素应用一条声明,那么它们就没什么用了。真正的目标是对文档的不同部分应用不同的声明。

CSS 通过将条件与声明块关联起来实现了这一点。每个(有效的)声明块前面都有一个或多个以逗号分隔的选择器(selectors),这些选择器是选择页面某些元素的条件。一个选择器列表及其关联的声明块合在一起,称为一个规则集(ruleset),或者通常简称为规则(rule)

下图展示了一个 CSS 规则集(或规则)。

A group of comma-separated selectors precedes the brace-delimited declaration block, which contains multiple declarations ending in semicolons.

由于页面上的一个元素可能被多个选择器匹配,因此可能被多个规则匹配,这些规则可能多次包含同一个属性但具有不同的值,CSS 标准定义了哪个规则优先于其他规则并必须被应用:这被称为层叠算法(参见处理冲突)。

注意:需要注意的是,尽管由一组选择器构成的规则集是多个单选择器规则集的简写形式,但这并不适用于规则集本身的有效性。

这带来一个重要的后果:如果单个基本选择器无效,例如使用了未知的伪元素或伪类,那么整个选择器就是无效的,因此整个规则也会被忽略(同样视为无效)。

CSS 语句

规则集是样式表的主要构建块,样式表通常仅由一个庞大的规则集列表组成。但 Web 作者还希望在样式表中传达其他信息,如字符集、要导入的其他外部样式表、字体或列表计数器描述等等。他们会使用其他特定的语句类型来完成这些任务。

语句(statement)是一个以任何非空白字符开头,并以第一个右花括号或分号(在字符串之外、未转义且不包含在其他 {}、() 或 [] 对中)结尾的构建块。

A Venn diagram of statements noting all rulesets are nested statements, while some at-rules are nested statements but most aren't. Anything that is not an at-rule or nested is invalid.

有两种语句:

  • 规则集(或规则),如前所述,它将一组 CSS 声明与由选择器描述的条件相关联。
  • @规则(at-rules)以 @ 符号 @ (U+0040 COMMERCIAL AT) 开头,后跟一个标识符,然后一直持续到语句结束,即直到下一个不在块内的分号 (;) 或下一个块的末尾。每种由标识符定义的@规则都可能有其自己的内部语法和语义。它们用于传达元数据信息(如 @layer@import)、条件信息(如 @media@document)或描述性信息(如 @font-face)。

任何不是规则集或 @规则的语句都是无效的,并被忽略。

嵌套语句

还有另一组语句——嵌套语句(nested statements)。这些语句可以用在一组特定的 @规则中,即条件组规则。这些语句仅在特定条件匹配时才适用:@media @规则的内容仅在浏览器运行的设备匹配所表达的条件时才适用;@document @规则的内容仅在当前页面匹配某些条件时才适用,等等。在 CSS1 和 CSS2.1 中,只有规则集可以在条件组规则内部使用。这非常受限,这个限制在 CSS 条件规则第 3 级中被取消了。现在,虽然仍处于实验阶段且并非所有浏览器都支持,条件组规则可以包含更广泛的内容:规则集以及一些(但不是所有)@规则。

另见