CSS 属性值定义语法

基本组成元素

关键字

一般关键字

有预定义含义的一般关键字按字面意义出现，不需要引号，如auto, smaller 或 ease-in。

特殊关键字：inherit、initial和unset

所有 CSS 属性值都可以使用inherit、initial和unset，它们的定义贯穿 CSS 始终。它们未显示在值定义中，但都是隐含可用的。

符号

CSS 中，有一些符号是可以出现的，比如斜杠 ('/') 或者逗号 (',') 等。它们用来分隔属性值：逗号用来分隔数个并列值，或者分隔函数的参数；斜杠用来分隔一个值的多个部分，通常用在 CSS 缩写中分离具有相同类型但属于不同属性的组件。

这两种符号会以其字面意义出现在 CSS 属性值定义中。

带类型的参数

基本类型

一些类型在 CSS 中经常出现，CSS 规范中将其专门定义，称为基本类型，用一对尖括号表示：'<'与'>'，例如：<angle>, <string>, …

其他类型

其他类型同样也用一对尖括号表示：'<'与'>'。

其他类型分为两种：

• 共享同一个属性名称的数个类型。在这种情况下，数据类型与属性共享同一组值。它们出现在一对引号之中，经常用于属性的缩写。
• 不共享同一个属性名称的数个类型，它们与基本类型很相似，不同是：这种参数仅在规范中相关属性的描述处定义，而基本类型在规范中有专门定义。

组合符号

方括号

方括号将数个基本元素组成一个整体，用来强调组合的优先级。例如：

bold [ thin && <length> ]

以下均为该例的合法取值：

• bold thin 2vh
• bold 0 thin
• bold thin 3.5em

但以下不是合法取值：

• thin bold 3em 因为bold被放置在方括号定义的整体之中。根据定义，bold必须出现在方括号定义的整体之前。

并置

并置是指将数个关键字、符号或类型，用空格分开写在一起。并置中所有的元素都必须出现并且按所规定的顺序出现。例如：

bold <length> , thin

以下均为该例的合法取值：

• bold 1em, thin
• bold 0, thin
• bold 2.5cm, thin
• bold 3vh, thin

但以下不是合法取值：

• thin 1em, bold因为顺序有错。
• bold 1em thin因为所有元素都必须出现，包括逗号。
• bold 0.5ms, thin因为ms是时间值，不是长度值：<length>

“与”组合符：&&

“与”组合符连接的各个部分都必须出现，但是顺序任意。例如：

bold && <length>

以下均为该例的合法取值：

• bold 1em
• bold 0
• 2.5cm bold
• 3vh bold

但以下不是合法取值：

• bold因为长度值没有出现。
• bold 1em bold因为各部分必须恰好出现一次。

“或”组合符：||

“或”组合符表示其连接的所有组成元素是可选的，次序任意，但是至少其中一个要出现。“或”组合符通常用来描述属性缩写中的各部分。

<'border-width'> || <'border-style'> || <'border-color'>

以下均为该例的合法取值：

• 1em solid blue
• blue 1em
• solid 1px yellow

但以下不是合法取值：

• blue yellow因为一个组成部分最多出现一次。
• bold因为它不允许出现。

“互斥”组合符：|

“互斥”组合符表示各组成部分中只能恰好出现一个，通常用来分隔一个属性的所有可选值。例如：

<percentage> | <length> | left | center | right | top | bottom

以下均为该例的合法取值：

• 3%
• 0
• 3.5em
• left
• center
• right
• top
• bottom

但以下不是合法取值：

• center 3% 因为最多只能出现一个组成部分
• 3em 4.5em 因为每个组成部分最多只能出现一次

数量符号

数量符号用来描述一个元素可以出现多少次。若不标注，则这个元素比如恰好出现一次。

注意数量描述符不能叠加出现，并且优先级最高。

星号 (*)

星号表示可以出现零次（即不出现），一次，或任意多次。例如：

bold smaller*

以下均为该例的合法取值：

• bold
• bold smaller
• bold smaller smaller
• bold smaller smaller smaller and so on.

但以下不是合法取值：

• smaller 因为bold并置于smaller，必须出现在任何smaller之前。

加号 (+)

加号表示可以出现一次或多次。例如：

bold smaller+

以下均为该例的合法取值：

• bold smaller
• bold smaller smaller
• bold smaller smaller smaller and so on.

但以下不是合法取值：

• bold 因为smaller必须出现至少一次。
• smaller 因为bold 是并置关系，必须在smaller之前出现。

问号 (?)

问号表示可选，即出现零次或一次。例如：

bold smaller?

以下均为该例的合法取值：

• bold
• bold smaller

但以下不是合法取值：

• bold smaller smaller 因为smaller最多出现一次。
• smaller 因为bold是并置关系，必须出现在smaller之前。

大括号 ({ })

大括号包含两个以逗号分隔的整数 A 与 B，表示最少出现 A 次，且最多出现 B 次。例如：

bold smaller{1,3}

以下均为该例的合法取值：

• bold smaller
• bold smaller smaller
• bold smaller smaller smaller

但以下不是合法取值：

• bold 因为smaller 至少要出现一次。
• bold smaller smaller smaller smaller 因为smaller 最多出现三次。
• smaller 因为bold是并置关系，必须出现在smaller之前。

井号 (#)

井号表示可以出现一次或多次，与加号相似。但是其多次出现必须以逗号分隔。例如：

bold smaller#

以下均为该例的合法取值：

• bold smaller
• bold smaller, smaller
• bold smaller, smaller, smaller and so on.

但以下不是合法取值：

• bold 因为smaller必须至少出现一次。
• bold smaller smaller smaller 因为多个smaller必须以逗号分隔。
• smaller 因为bold是并置关系，必须出现在smaller之前。

叹号 (!)

组后面的叹号表示该组是必需的，并且至少产生一个值；即使组内项目的语法允许省略全部的值，也至少要保留一个值。

[ bold? smaller? ]!

以下均为该例的合法取值：

• bold
• smaller
• bold smaller

但以下不是合法取值：

• bold 和 smaller都没有：因为至少要出现一个。
• smaller bold：因为 bold 必须出现在 smaller 前面。
• bold smaller bold：因为 bold 只能出现一次。

总结

规范

参见

• CSS 重要概念：

  • CSS 语法

  • @ 规则

  • 注释

  • 优先级

  • 继承

  • 盒模型

  • 布局模式

  • 视觉格式化模型

  • 外边距合并

  • 值

    • 初始值
    • 计算值
    • 解析值
    • 指定值
    • 应用值
    • 实际值

  • 属性值定义语法

  • 简写属性

  • 可替换元素