CSS 数据类型定义了可用于各种 CSS 属性的值类型。每种 CSS 属性都期望特定类型的值理解这些数据类型对于正确样式化和格式化网页内容至关重要。下面列出的类型是最常见的但并非任何 CSS 规范中定义的所有类型的完整列表。语法selector { property: unit-data-type; }CSS 语法使用不等号“”和“”之间的关键字来表示数据类型。文本数据类型这些类型包括关键字、标识符、字符串和 URL。预定义关键字表示特定于所使用属性的预定义关键字例如auto、inherit、none。CSS 全局关键字下表列出了所有 CSS 全局关键字属性描述custom-ident用户定义的标识符例如使用 grid-area 属性指定的名称。dashed-ident使用 CSS Custom Propertiescustom-ident 以两个连字符开头。string已加引号的字符串例如 content 属性的值。url()对资源的引用例如 background-image 的值。数值数据类型这些数据类型表示数量、索引和位置。下表列出了所有数值数据类型属性描述integer一个或多个十进制单位09。number实数可以包含小数部分例如 1 或 1.54。dimension包含单位的数值例如 23px 或 15em。percentage包含百分比符号的数值例如 15%。ratio比率表示为 number / number。flexCSS Grid Layout 引入了灵活长度由带有 fr 单位的 number 表示用于 grid track sizing。量纲距离和其他量使用这些类型定义。下表列出了所有量纲属性描述length长度是一种表示距离的 dimension。angle角度表示为带有 deg、grad、rad 或 turn 单位的 dimension用于 linear-gradient() 等属性。time持续时间单位表示为带有 s 或 ms 单位的 dimension。resolution这是一个带有 dpi、dpcm、dppx 或 x 单位标识符的 dimension。类型组合接受 dimension 和百分比值的 CSS 属性属于此类。百分比值将转换为相对于允许 dimension 的量。接受百分比和 dimension 的属性将使用以下类型之一属性描述length-percentage可以接受 length 或 percentage 值的一种类型。angle-percentage可以接受 angle 或 percentage 值的一种类型。time-percentage可以接受 time 或 percentage 值的一种类型。颜色与颜色相关的属性定义了color数据类型以及其他与颜色相关的类型。下表列出了所有与颜色相关的数据类型属性描述color以关键字或数值表示的颜色。color-interpolation-method确定在不同color值之间创建过渡时使用的颜色空间。hex-color描述使用主要颜色分量红、绿、蓝以十六进制数字表示的sRGB颜色的十六进制颜色语法以及其透明度。system-color通常与网页上不同组件的默认颜色选择相关联。alpha-value表示颜色的透明度。值可以是number0 为完全透明1 为完全不透明或percentage0 为完全透明100% 为完全不透明。hue为absolute-color-functions组件定义色轮的angle可以使用 deg、grad、rad、turn 等单位或无单位的数字解释为 deg。hue-interpolation-method确定用于hue值之间插值的算法。此方法指定基于色轮如何在两个 hue 值之间找到中点。它是color-interpolation-method数据类型的一个组件。named-color在语法中指定为ident通过名称如 red、blue、black 或 light green 来描绘颜色。图像CSS Images 规范定义了与图像相关的数据类型例如渐变。下表列出了所有与图像相关的数据类型属性描述image指向图像或颜色渐变的 URL。2D 定位下表列出了所有与 2D Positioning 相关的数据类型属性描述position通过提供关键字值如 top 或 left或length-percentage来确定对象区域的位置。计算数据类型CSS 数学函数在计算中使用这些数据类型。下表列出了所有计算数据类型属性描述calc-sum计算是由加法和减法-运算符分隔的一系列计算值。此数据类型要求两个值都包含单位。calc-constant定义 CSS 关键字用于数值常量如 e 和 π这些常量可用于 CSS 数学函数。显示下表列出了所有与 display 相关的数据类型属性描述display-box确定元素是否创建 display boxes。display-inside确定元素的内部显示指定非替换元素的格式化上下文类型。display-internal确定内部显示值这些值仅与特定布局模型相关。display-legacyCSS 2 中display属性使用单关键字语法需要为同一布局模型的块级和内联级变体使用单独的关键字。display-listitem关键字list-item使元素生成一个::marker伪元素其内容由 list-style 属性指定并为其自身内容生成指定类型的主框。display-outside元素的外部display类型在流布局中至关重要由display-outside关键字确定。其他数据类型下表列出了一些其他数据类型属性描述absolute-size在 font shorthand 和 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-block、overflow-inline、overflow-x 和 overflow-y 相关的关键字值由枚举值类型overflow表示。relative-size定义相对于父元素计算大小的相对大小。transform-function变换函数负责在二维 (2D) 和三维 (3D) 空间中旋转、缩放调整大小、倾斜扭曲或移动元素。