CSS属性值定义语法

CSS属性值定义语法(CSS value definition syntax)是用来限定CSS属性合法取值的专门语法。在此基础之上,一个CSS属性的合法取值也由语义所限制,比如一些数字必须是正数。

CSS属性值定义语法描述了哪些值是可取的CSS属性,基本组成元素包括关键字、符号与带类型的参数。

基本组成元素

关键字

一般关键字

一般关键字都有预先的定义,不需要引号,如auto, smallerease-in

特殊关键字:inheritinitial

所有CSS属性值都可以使用inherit或者initial。这两个关键字不会出现在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因为各部分必须恰好出现一次。
注:并置的优先级高于“与”组合符。例如bold thin && <length>等价于[ bold thin ] && <length>。它们的合法取值是:bold thin <length><length> bold thin但不是bold <length> thin

“或”组合符:||

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

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

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

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

但以下不是合法取值:

  • blue yellow因为一个组成部分最多出现一次。
  • bold因为它不允许出现。
注:“与”组合符的优先级高于“或”组合符,比如bold || thin && <length>等价于bold || [ thin && <length> ]。它们的合法取值是:bold, thin, <length>, bold thin, <length> bold, 或者thin <length> bold ,但不是:bold <length> bold thin因为bold若出现,则必须出现在thin && <length>整体的前面或后面。

“互斥”组合符:|

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

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

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

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

但以下不是合法取值:

  • center 3% as only one of the components must be present.
  • 3em 4.5em as a component must be present at most one time.

注:“或”组合符的优先级高于“互斥”组合符,比如bold | thin || <length>等价于bold | [ thin || <length> ]。它们的合法取值是:bold, thin, <length>, <length> thin, 或thin <length> bold <length> 因为“互斥”组合符所连接的数个部分中,只有一个能出现。

数量符号

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

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

星号 (*)

星号表示可以出现零次(即不出现),一次,或任意多次。例如:

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之前。

总结

符号 名称 描述 示例
组合符号
  并置 各部分必须出现且按顺序出现 solid <length>
&& “与”组合符 各部分必须出现,但可以不按顺序 <length> && <string>
|| “或”组合符 各部分至少出现一个,可以不按顺序 <'border-image-outset'> || <'border-image-slice'>
| “互斥”组合符 各部分恰好出现一个 smaller | small | normal | big | bigger
[ ] 方括号 强调优先级 bold [ thin && <length> ]
数量符号
  无数量符号 恰好一次 solid
* 星号 零次、一次或多次 bold smaller*
+ 加号 一次或多次 bold smaller+
? 问号 零次或一次(即可选) bold smaller?
{A,B} 大括号 至少A次,至多B bold smaller{1,3}
# 井号 一次或多次,但多次出现必须以逗号分隔 bold smaller#

规范

规范 状态 备注
CSS Values and Units Module Level 3 Candidate Recommendation CSS Level 2 (Revision 1) 添加了井号数量符。
CSS Level 2 (Revision 1) Recommendation CSS Level 1 添加了“与”组合符。
CSS Level 1 Recommendation 最初定义。

参考条目

Document Tags and Contributors

Contributors to this page: Jimmie_Felidae
最后编辑者: Jimmie_Felidae,