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 Grid Layout 引入了灵活的长度，由<数字>表示，并附带了 fr 单元以调整网格轨道的大小。

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

属性	描述
<length>	Le长度是一个维度，指的是距离。
<angle>	A角度表示为<dimension> ，具有度、渐变、弧度或转弯单位，并用于 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>。
<hue-interpolation-method>	确定用于在色相值之间进行插值的算法。此方法指定如何根据色轮查找两个色相值之间的中点。它是 <color-interpolation-method> 数据类型的一个组件。
<named-color>	在语法中指定为 <ident>，按红色、蓝色、黑色或浅绿色等名称描绘颜色。

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

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

下表列出了所有与 2D 定位相关的数据类型：

属笥	描述
<position>	通过提供关键字值（如顶部或左侧）或<length-percentage>来确定对象区域的位置。

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

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

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

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

下表列出了更多数据类型：

属性	描述
<absolute-size>	在字体简写和 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>	指定行在特定上下文中如何显示或不显示包含在<行样式>枚举值类型中。
<overflow>	与简写 overflow 属性和 longhand overflow-block、overflow-inline、overflow-x 和 overflow-y 属性相关的关键字值由枚举值类型 <overflow> 指示。
<relative-size>	定义与父元素的计算大小的相对大小。
<transform-function>	变换函数负责在二维（2D）和三维（3D）空间中旋转、缩放（调整大小时）、倾斜（扭曲）或移动元素。

打印本页