在线文档教程
CSS

值定义语法 | Value definition syntax

Value definition syntax

CSS值定义语法(一种形式语法)用于为CSS属性或函数定义一组有效值。除了这个语法之外,有效值的集合还可以被语义约束进一步限制(例如,严格限制一个数字为正数)。

定义语法描述允许哪些值以及它们之间的交互。一个组件可以是一个关键字,作为字面值的一些字符,或一个给定的CSS数据类型或另一个CSS属性的值。

组件值类型

关键字

通用关键字

具有预定义的关键字按字面显示,不带引号。例如:autosmallerease-in

inherit,initial和unset的具体案例

所有的CSS属性都接受关键字inheritinitialunset,而且这些关键字是在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,如boldsmaller可能只出现一次。

SignNameDescriptionExample

| 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? ! |

规范

SpecificationStatusComment
CSS Values and Units Module Level 3The definition of 'Value definition syntax' in that specification.Candidate RecommendationAdds the hash mark multiplier.
CSS Level 2 (Revision 1)The definition of 'Value definition syntax' in that specification.RecommendationAdds the double ampersand combinator.
CSS Level 1The definition of 'Value definition syntax' in that specification.RecommendationInitial definition