值定义语法 | Value definition syntax
Value definition syntax
CSS值定义语法
(一种形式语法)用于为CSS属性或函数定义一组有效值。除了这个语法之外,有效值的集合还可以被语义约束进一步限制(例如,严格限制一个数字为正数)。
定义语法描述允许哪些值以及它们之间的交互。一个组件可以是一个关键字
,作为字面值
的一些字符,或一个给定的CSS数据类型或另一个CSS属性的值。
组件值类型
关键字
通用关键字
具有预定义的关键字按字面显示,不带引号。例如:auto
,smaller
或ease-in
。
inherit,initial和unset的具体案例
所有的CSS属性都接受关键字inherit
,initial
和unset
,而且这些关键字是在CSS中定义的。它们不在值定义中显示,并且被隐式定义。
字面值
在CSS中,几个字符可以单独出现,如斜杠(' /
')或逗号(' ,
'),并在属性定义中用于分隔其部分。逗号经常用于枚举枚举中的值或类似数学函数中的参数; 斜线通常将语义上不同的值的部分分开,但是具有相同的语法。通常,斜杠用于简写属性;分离属于同一类型但属于不同属性的组件。
两个符号都以字面意义出现在数值定义中。
数据类型
基本数据类型
某些类型的数据在整个CSS中使用,并为规范中的所有值定义一次。它们就是所谓的基本数据类型,它们的命名用'<'和'>'包围,如: <angle>,<string>,...
非终端数据类型
不常见的数据类型称为非终端数据类型,也被' <'和' >' 包围。
非终端数据类型有两种:
- 数据类型
共享相同的属性名称
,放在引号之间。在这种情况下,数据类型与属性共享相同的一组值。它们通常用于简写(shorthand)属性的定义。
- 数据类型
不共享同一个属性名称
。这些数据类型非常接近基本的数据类型。它们只与定义的物理位置的基本数据类型不同。在这种情况下,定义通常在物理上非常接近于使用它们的属性的定义。
组件值组合因子
括号
括号中
包括几个实体,组合因子(combinators)和乘数(multipliers),然后将它们转换为单个组件。它们用于将组件绕过优先规则
。
bold [ thin && <length> ]
此示例匹配以下值:
bold thin 2vh
bold 0 thin
bold thin 3.5em
但不是:
- thin bold 3em,bold与括号中定义的组件并列,它必须出现在它之前。并置将几个关键字,文字或数据类型放在一起,仅由一个或多个空格分隔,称为并列(juxtaposition)。所有并置的组件都是必需的,并且应该按照精确的顺序出现 .bold <length>,thinThis示例匹配以下值:
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>,或thin <length> bold为粗体而不是<length> bold thin为粗体,如果没有被省略,则它必须早于或在整个thin && <length>组件后放置。
单杆
单杆
|
分隔两个以上单位,它意味着所有的实体是排斥的选项:即这些选项之一必须存在
。这通常用于分隔可能的关键字列表。
<percentage> | <length> | left | center | right | top | bottom
此示例匹配以下值:
3%
0
3.5em
left
center
right
top
bottom
但不是:
center 3%
因为必须有且只有一个组件。
3em 4.5em
作为一个组件至多只能出现一次。
注意:||优先于|,也就是说bold | thin || <length>是相当于bold | [ thin || <length> ]的。它描述bold,thin,<length>,<length> thin,或thin <length>但不是bold <length>因为只能从|组合因子中选择一个实体。
组件值乘法器
乘数(multiplier)是表示前一个实体可以重复多少次的符号。没有乘数,一个实体必须恰好出现一次。
请注意,乘数不能被添加,并且优先于组合因子。
星号(*)
星号乘数(*)
表示该实体可能会出现零次,一次或数次
。
bold smaller*
此示例匹配以下值:
bold
bold smaller
bold smaller smaller
bold smaller smaller smaller
等等。
但不是:
smaller
,因为bold
是并列的,所以必须出现在任何关键字smaller
之前。Plus (+
)加乘数
表示实体可能出现一次或多次。
bold
smaller
+
此示例匹配下列值:
bold smaller
bold smaller smaller
bold smaller smaller smaller
等等。
但不是:
bold
,因为smaller
必须至少出现一次。
smaller
,因为bold
是并列的,必须出现在任何smaller
关键词之前。
问号(?)
问号乘数(question mark multiplier)
表明该实体是可选的,必须出现零次或一次
。
bold smaller?
此示例匹配以下值:
bold
bold smaller
但不是:
bold smaller smaller
,因为smaller
最多只能出现一次。
smaller
,因为bold
是并列的,必须出现在任何smaller
关键词之前。
花括号({ })
花括号乘数(curly multiplier)
,包括由逗号分隔开的两个整数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
关键词之前
哈希标记(#)
哈希标记乘数(hash mark multiplier)
表示该实体可以被重复一次或更多次(例如,+乘数),但是每次出现时由逗号(',')隔开。
bold smaller#
此示例匹配以下值:
bold smaller
bold smaller, smaller
bold smaller, smaller, smaller
等等。
但不是:
bold
,因为smaller
必须至少出现一次。
bold smaller smaller smaller
因为smaller之间
必须用逗号分隔。
smaller
,因为bold
是并列的,必须出现在任何smaller
关键词之前。
感叹号(!)
一组符号之后的感叹号乘数(exclamation multiplier)
表示该组是必需的,并且必须产生至少一个值; 即使组内项目的语法可以允许省略整个内容,也至少需要有一个组件值。
[ bold? smaller? ]!
此示例匹配以下值:
bold
smaller
bold smaller
但不是:
- 既不是
bold
也不是smaller
,因为其中一个必须出现。
smaller bold
,因为bold
被并列,必须出现在smaller
关键词之前。
bold smaller bold
,如bold
和smaller
可能只出现一次。
Sign | Name | Description | Example |
---|
| Combinators |
|| ——| Juxtaposition| ,组件是强制性的,应按照顺序出现,如 |solid <length> |
| && |—— |Double ampersand|, 组件是强制性的,但可能以任何顺序出现,如| <length> && <string> |
| || | ——|Double bar|, 至少有一个组件必须出现,并且它们可以以任何顺序出现,如| <'border-image-outset'> || <'border-image-slice'> |
| | |
—— |Single bar| ,其中一个组件必须存在,如| smaller | small | normal | big | bigger |
| |——| Brackets| ——将组件绕过优先规则,如| bold thin && <length> |
| Multipliers|
| |
——| No multiplier | ,有且仅有一次 ,如| solid |
| * |
—— |Asterisk| ,0或更多次,如| bold smaller* |
| + |
—— |Plus sign|,出现1次或更多次,如| bold smaller+ |
| ?|
—— | Question mark| ,出现0或1次(可选),如| bold smaller?|
| {A,B} |
——| Curly braces|,出现 至少A次,最多B次,如| bold smaller{1,3} |
| #|
——| Hash mark| ,出现1次或更多次,但相同字符之间用逗号(',')分隔,如| bold smaller# |
| !|
——|Exclamation point| ,组中必须产生至少1个值,如| bold? smaller? ! |
规范
Specification | Status | Comment |
---|---|---|
CSS Values and Units Module Level 3The definition of 'Value definition syntax' in that specification. | Candidate Recommendation | Adds the hash mark multiplier. |
CSS Level 2 (Revision 1)The definition of 'Value definition syntax' in that specification. | Recommendation | Adds the double ampersand combinator. |
CSS Level 1The definition of 'Value definition syntax' in that specification. | Recommendation | Initial definition |