CSS属性值定义语法(CSS value definition syntax)用来定义CSS属性或方法的合法取值。
此外,一个CSS属性的合法取值也可以进一步由语义限制所约束,比如一些数字必须是正数。
CSS属性值定义语法是W3的技术规范,本系列课程中所使用的语法描述遵循该标准规范。
CSS属性值定义语法描述了哪些取值可以被使用以及它们之间的交互关系,组成元素可以是关键字、直接出现(literal)的符号或者数据类型(data type)或另一个CSS属性的值。
直接出现(literal)指的是该字符可以按其字面意义被直接使用在语法定义中,不需要添加其他的说明,比如逗号可以直接被使用。
关键字
一般关键字
一般关键字都有预先的定义,不需要引号,如auto
, smaller
或 ease-in
。
特殊关键字:inherit
与initial
所有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 Value definition syntax |
Candidate Recommendation | CSS Level 2 (Revision 1) Value definition syntax 添加了井号数量符。 |
CSS Level 2 (Revision 1) Value definition syntax |
Recommendation | CSS Level 1 Value definition syntax 添加了“与”组合符。 |
CSS Level 1 Value definition syntax |
Recommendation | 最初定义。 |