CSS - 数据类型

CSS 数据类型定义了可用于各种 CSS 属性的值的类型。每个 CSS 属性都期望特定类型的值，了解这些数据类型对于正确设置样式和格式化 Web 内容至关重要。

下面列出的类型是最常见的，但这不是任何 CSS 规范中定义的所有类型的完整列表。

语法

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

CSS 语法使用不等号“<”和“>”之间的关键字来指示数据类型。

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

表示特定于其使用属性的预定义关键字（例如，auto、inherit、none）。

下表列出了所有 CSS 全局关键字

属性	描述
<custom-ident>	用户定义的标识符，例如使用 grid-area 属性给出的名称。
<dashed-ident>	使用 CSS 自定义属性，<custom-ident> 以两个连字符开头。
<string>	已加引号的字符串，例如 content 属性的值。
url()	对资源的引用，例如 background-image 值。

这些数据类型表示数量、索引和位置。下表列出了所有数值数据类型

属性	描述
<integer>	一个或多个十进制单位 (0–9)。
<number>	实数可能包含小数部分，例如 1 或 1.54。
<dimension>	包含单位的数值，例如 23px 或 15em。
<percentage>	包含百分号的数值，例如 15%。
<ratio>	比率表示为 <number> / <number>。
<flex>	CSS 网格布局引入了一种灵活的长度，由带附加 fr 单位的 <number> 表示，用于网格轨道大小。

使用这些类型定义距离和其他数量。下表列出了所有数量

属性	描述
<length>	长度是指距离的尺寸。
<angle>	角度表示为 <dimension>，带有 deg、grad、rad 或 turn 单位，并用于诸如 linear-gradient() 之类的属性中。
<time>	持续时间单位表示为 <dimension>，带 s 或 ms 单位。
<resolution>	这是一个 <dimension>，带有单位标识符 dpi、dpcm、dppx 或 x。

既接受尺寸又接受百分比值的 CSS 属性属于此类别。百分比值将转换为相对于允许尺寸的数量。既接受百分比又接受尺寸的属性将使用以下类型之一

颜色相关的属性定义了 <color> 数据类型以及与颜色相关的其他类型。

下表列出了所有与颜色相关的类型

属性	描述
<color>	表示为关键字或数值的颜色。
<color-interpolation-method>	在创建不同 <color> 值之间的过渡时，确定使用的颜色空间。
<hex-color>	描述使用主要颜色组件（红色、绿色、蓝色）表示为十六进制数字的 sRGB 颜色的十六进制颜色语法，以及其透明度。
<system-color>	通常链接到网页上不同组件的默认颜色选择。
<alpha-value>	表示颜色的透明度。该值可以是 <number>（0 为完全透明，1 为完全不透明）或 <percentage>（0 为完全透明，100% 为完全不透明）。
<hue>	为 <absolute-color-functions> 组件定义色轮的 <angle>，使用诸如 deg、grad、rad、turn 或无单位数字（解释为 deg）之类的单位。
<hue-interpolation-method>	确定用于在色相值之间进行插值的算法。此方法指定如何根据色轮查找两个色相值之间的中点。它是 <color-interpolation-method> 数据类型的一个组件。
<named-color>	在语法中指定为 <ident>，通过名称（如红色、蓝色、黑色或浅绿色）来描述颜色。

CSS 图片规范定义了与图像相关的类型，例如渐变。下表列出了所有与图像相关的类型

属性	描述
<image>	指向图像或颜色渐变的 URL。

下表列出了所有与二维定位相关的类型

属性	描述
<position>	通过提供关键字值（例如 top 或 left）或 <length-percentage> 来确定对象区域的位置。

CSS 数学函数在计算中使用这些数据类型。下表列出了所有计算数据类型

属性	描述
<calc-sum>	计算是一系列由加法 (+) 和减法 (-) 运算符分隔的计算值。此数据类型要求两个值都包含单位。
<calc-constant>	定义 CSS 关键字用于数值常数，例如 e 和 π，这些常数可用于 CSS 数学函数中。

下表列出了所有与显示相关的类型

属性	描述
<display-box>	确定元素是否创建显示框。
<display-inside>	确定元素的内部显示，为非替换元素指定格式上下文类型。
<display-internal>	确定内部显示值，这些值仅与该特定布局模型相关。
<display-legacy>	CSS 2 中的 display 属性已使用单关键字语法，这需要为同一布局模型的块级和内联级变体使用单独的关键字。
<display-listitem>	list-item 关键字使元素生成一个 ::marker 伪元素，其内容由 list-style 属性指定，以及为其自身内容指定类型的主框。
<display-outside>	元素的外部 display 类型，这在流布局中至关重要，由 <display-outside> 关键字确定。

下表列出了一些其他数据类型

属性	描述
<absolute-size>	在 font 简写和 font-size 属性中定义绝对字体大小。
<basic-shape>	定义用于诸如 clip-path、shape-outside 和 offset-path 之类的属性的不同形状。
<blend-mode>	指定元素重叠时应使用的颜色方案。
<box-edge>	定义不同的盒子边缘，例如 content-box 和 border-box。
<easing-function>	控制元素两个状态之间过渡或动画的速度。
<filter-function>	表示图形效果，它会更改输入图像的外观。
<generic-family>	表示通用字体族的关键字值。
<gradient>	演示两种或多种颜色之间的渐变过渡。
<ident>	表示用作标识符的任意字符串。
<line-style>	<line-style> 枚举值类型包含在特定上下文中指定线条如何显示或不显示。
<overflow>	枚举值类型<overflow>指示与简写overflow属性以及详细的overflow-block、overflow-inline、overflow-x和overflow-y属性相关的关键字值。
<relative-size>	定义相对于父元素计算大小的相对大小。
<transform-function>	变换函数负责在二维 (2D) 和三维 (3D) 空间中旋转、缩放（调整大小）、倾斜（扭曲）或移动元素。

打印页面