CSS 数据类型

CSS 数据类型 定义了 CSS 属性和函数接受的典型值（包括关键字和单位）。它们是组件值类型的一种特殊类型。

最常用的类型在CSS 值和单位规范中定义。该规范还定义了函数表示法，允许更复杂的类型或处理。其他类型在它们适用的规范中定义。

下面你会发现你最有可能遇到的类型的参考，但它并不是对每个 CSS 规范中定义的所有类型的全面参考。

语法

css

selector {
  property: <unit-data-type>;
}

在正式的 CSS 语法中，数据类型由放在不等号“<”和“>”之间的关键字表示。

这些类型包括关键字和标识符，以及字符串和 URL。

具有预定义含义的关键字，例如，border-collapse 属性的 collapse 值。

所有属性，包括自定义属性，都接受 CSS 范围关键字

用户定义的标识符，例如使用 grid-area 属性分配的名称。

<custom-ident> 具有额外的限制，它必须以两个连字符开头，例如，使用 CSS 自定义属性时。

带引号的字符串，例如用作 content 属性的值。

指向资源的指针，例如作为 background-image 的值。

这些数据类型用于表示数量、索引和位置。其中大部分定义在值和单位规范中，但其他类型在其他规范中定义，因为它们仅限于该特定规范 - 例如 CSS 网格布局中的 fr 单位。

这些类型用于指定距离和其他数量。

<length>: 长度是 <dimension>，表示距离。
<angle>: 角度用于诸如 linear-gradient() 之类的属性，并且是带有 deg、grad、rad 或 turn 单位之一的 <dimension>。
<time>: 持续时间单位是带有 s 或 ms 单位的 <dimension>。
<frequency>: 频率是带有 Hz 或 kHz 单位的 <dimension>。
<resolution>: 是带有 dpi、dpcm、dppx 或 x 单位标识符的 <dimension>。

一些 CSS 属性可以接受维度值或百分比值。在这种情况下，百分比值将被解析为与允许的维度相匹配的数量。可以接受百分比和维度的属性将使用下面列出的类型之一。

CSS 颜色规范定义了 <color> 数据类型，以及与 CSS 中的颜色相关的其他类型。

<color>: 指定为关键字或数值颜色值。
<alpha-value>: 指定颜色的透明度。可以是 <number>，在这种情况下 0 为完全透明，1 为完全不透明，或者 <percentage>，在这种情况下 0% 为完全透明，100% 为完全不透明。
<hue>: 指定 <angle>，带有 deg、grad、rad 或 turn 单位标识符，或者无单位的 <number> 解释为 deg，它是作为其组件的 <absolute-color-functions> 特定的色轮的角度。

CSS 图像规范定义了处理图像（包括渐变）的数据类型。

<position> 数据类型被解释为针对 <background-position> 属性定义的。

<position>: 定义对象区域的位置。接受诸如 top 或 left 之类的关键字值，或者 <length-percentage>。

这些数据类型用于 CSS 数学函数计算。

<calc-sum>: 计算，它是加法 (+) 和减法 (-) 运算符之间交织的计算值序列。此数据类型要求两个值都具有单位。
<calc-product>: 计算，它是乘法 (*) 和除法 (/) 运算符之间交织的计算值序列。在相乘时，一个值必须是无单位的。在相除时，第二个值必须是无单位的。
<calc-value>: 定义计算的接受值，例如 <number>、<dimension>、<percentage>、<calc-keyword> 或嵌套的 <calc-sum> 计算。
<calc-keyword>: 定义表示数字常量（例如 e 和 π）的 CSS 关键字，这些关键字可在 CSS 数学函数中使用。

规范
CSS 值和单位模块第 4 级