值定义语法

组成值类型

关键词

通用关键字

具有预定义含义的关键字按字面意思出现，不带引号。例如：auto、smaller 或 ease-in。

CSS 全局关键字

所有 CSS 属性都接受关键字 inherit、initial、revert、revert-layer 和 unset。它们未在值定义中显示，并且是隐式定义的。

字面量

在 CSS 中，一些字符可以单独出现，例如斜杠 (/) 或逗号 (,)，并用于属性定义中以分隔其各部分。逗号通常用于枚举中分隔值，或数学类函数中分隔参数；斜杠通常分隔语义上不同但具有共同语法的值的各部分。通常，斜杠用于速记属性；分隔相同类型但属于不同属性的组件。

这两个符号在值定义中均按字面意思出现。

数据类型

基本数据类型

某些数据类型在整个 CSS 中使用，并在规范中为所有值定义一次。它们被称为基本数据类型，并用符号 < 和 > 括起来表示：<angle>、<string> 等。

非终端数据类型

不那么常见的数据类型，称为非终端数据类型，也用 < 和 > 括起来。

非终端数据类型有两种

• 与属性同名的数据类型，用引号括起来。在这种情况下，数据类型与属性共享相同的值集。它们通常用于速记属性的定义中。
• 与属性不同名的数据类型。这些数据类型与基本数据类型非常接近。它们与基本数据类型的唯一区别在于其定义的物理位置。在这种情况下，定义通常在物理上非常接近使用它们的属性的定义。

组成值组合器

方括号

方括号将多个实体、组合器和乘数括起来，然后将它们作为一个单独的组件。它们用于将组件分组以绕过优先级规则。

example = 
  bold [ thin && <length> ]  

此示例匹配以下值

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

但不匹配

• thin bold 3em，因为 bold 与方括号定义的组件并置，它必须出现在其之前。

并置

将多个关键字、字面量或数据类型并排放置，仅用一个或多个空格分隔，称为并置。所有并置的组件都是强制性的，并且应以精确的顺序出现。

example = 
  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>

双与号

用双与号 && 分隔两个或多个组件，表示所有这些实体都是强制性的，但可以以任何顺序出现。

example = 
  bold      &&
  <length>  

此示例匹配以下值

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

但不匹配

• bold，因为两个组件都必须出现在值中。
• bold 1em bold，因为两个组件都必须只出现一次。

双竖线

用双竖线 || 分隔两个或多个组件，表示所有实体都是可选的：至少有一个必须存在，并且它们可以以任何顺序出现。这通常用于定义速记属性的不同值。

example = 
  <number>  ||
  <length>  ||
  <color>   

此示例匹配以下值

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

但不匹配

• blue yellow，因为一个组件最多只能出现一次。
• bold，因为它不是任何实体值允许的关键字。

单竖线

用单竖线 | 分隔两个或多个实体，表示所有实体都是互斥选项：这些选项中必须存在且仅存在一个。这通常用于分隔可能的关键字列表。

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

此示例匹配以下值

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

但不匹配

• center 3%，因为只能存在其中一个组件。
• 3em 4.5em，因为一个组件最多只能出现一次。

组成值乘数

乘数是表示前一个实体可以重复多少次的符号。没有乘数，实体必须出现一次。

乘数不能相加，并且优先于所有组合器。

星号 (*)

星号乘数表示实体可以出现零次、一次或多次。

example = 
  bold smaller*  

此示例匹配以下值

• bold
• bold smaller
• bold smaller smaller
• bold smaller smaller smaller 等等。

但不匹配

• smaller，因为 bold 是并置的，并且必须出现在任何 smaller 关键字之前。

加号 (+)

加号乘数表示实体可以出现一次或多次。

example = 
  bold smaller+  

此示例匹配以下值

• bold smaller
• bold smaller smaller
• bold smaller smaller smaller 等等。

但不匹配

• bold，因为 smaller 必须至少出现一次。
• smaller，因为 bold 是并置的，并且必须出现在任何 smaller 关键字之前。

问号 (?)

问号乘数表示实体是可选的，并且必须出现零次或一次。

example = 
  bold smaller?  

此示例匹配以下值

• bold
• bold smaller

但不匹配

• bold smaller smaller，因为 smaller 最多只能出现一次。
• smaller，因为 bold 是并置的，并且必须出现在任何 smaller 关键字之前。

花括号 ({ })

花括号乘数，括住由逗号 A 和 B 分隔的两个整数，表示实体必须至少出现 A 次，最多出现 B 次。

example = 
  bold smaller{1,3}  

此示例匹配以下值

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

但不匹配

• bold，因为 smaller 必须至少出现一次。
• bold smaller smaller smaller smaller，因为 smaller 最多只能出现三次。
• smaller，因为 bold 是并置的，并且必须出现在任何 smaller 关键字之前

井号 (#)

井号乘数表示实体可以重复一次或多次（例如，加号乘数），但每次出现都由逗号 (',') 分隔。

example = 
  bold smaller#  

此示例匹配以下值

• bold smaller
• bold smaller, smaller
• bold smaller, smaller, smaller 等等。

但不匹配

• bold，因为 smaller 必须至少出现一次。
• bold smaller smaller smaller，因为 smaller 的不同出现必须用逗号分隔。
• smaller，因为 bold 是并置的，并且必须出现在任何 smaller 关键字之前。

井号可以选择后跟花括号，以指示实体重复的次数。

example = 
  bold smaller#{1,3}  

此示例匹配以下值

• bold smaller
• bold smaller, smaller
• bold smaller, smaller, smaller

但不匹配

• bold smaller, smaller, smaller, smaller，因为 smaller 最多只能出现三次。

example = 
  bold smaller#{2}  

此示例匹配以下值

• bold smaller, smaller

但不匹配

• bold smaller，因为 smaller 必须恰好出现两次。

感叹号 (!)

组后面的感叹号乘数表示该组是必需的，并且必须至少产生一个值；即使组内项目的语法允许整个内容被省略，也至少有一个组件值不能被省略。

example = 
  [ bold? smaller? ]!  

此示例匹配以下值

• bold
• smaller
• bold smaller

但不匹配

• 既不是 bold 也不是 smaller，因为它们中必须有一个出现。
• smaller bold，因为 bold 是并置的，并且必须出现在 smaller 关键字之前。
• bold smaller bold，因为 bold 和 smaller 只能出现一次。

括号范围表示法 ([min,max])

某些类型可以接受特定范围内的数值。例如，column-count 属性可以接受一个介于正 1 到无穷大（含）之间的整数值。相应的语法如下所示

example = 
  <integer [1,∞]>  

超出此指定范围的任何值都会导致整个声明无效，因此浏览器将忽略它。

括号范围表示法 [min, max] 表示 min 和 max 值之间的包含范围。此表示法用于数字类型表示法，并且可以包含单位，例如 <angle [0,180deg]>。正负无穷大（-∞ 和 ∞）不得指定单位。以单位指定的类型可以指定带或不带单位的零值，例如 <time [0s,10s]> 或 <time [0,10s]>。

以下是一些更多示例

• <integer [-∞,∞]>：从负无穷大到正无穷大的任何整数。
• <integer [0,∞]>：从 0 到正无穷大的任何整数都有效。负整数无效。
• <time [0s,10s]> 或 <time [0,10s]>：从 0 到 10 秒的任何持续时间都有效。
• <integer [-∞,-1]> | <integer [1,∞]>：除零以外的任何整数都有效。

总结

规范

另见

• CSS 关键概念
  • CSS 语法
  • 注释
  • 优先级
  • 继承
  • 盒模型
  • 布局模式
  • 视觉格式化模型
  • 外边距折叠
  • 值
    • 初始值
    • 计算值
    • 使用值
    • 实际值
  • 值定义语法
  • 简写属性
  • 替换元素