Css 简明教程
CSS - Data Types
CSS 数据类型定义了可用于各种 CSS 属性的值类型。每个 CSS 属性都需要特定类型的值，了解这些数据类型对于正确设置网络内容的样式和格式至关重要。
下面列出的类型是最常见的类型，但并非任何 CSS 规范中定义的所有类型的完整列表。
Textual Data Types
这些类型包括关键字、标识符、字符串和 URL。
CSS-wide keywords
下表列出了所有 CSS 范围内的关键字：
Property |
Description |
用户定义的标识符，例如 grid-area 属性中给出的名称。 |
|
使用 CSS 自定义属性时， <custom-ident> 以两个破折号开头。 |
|
已引用的字符串，如 content 属性的值。 |
|
对资源的引用，如 background-image 值。 |
Numeric Data Types
这些数据类型表示数量、索引和位置。下表列出了所有数字数据类型：
Property |
Description |
一个或多个十进制单位（0–9）。 |
|
实数可以包括小数部分，如 1 或 1.54。 |
|
包括单位的数值，如 23px 或 15em。 |
|
一个包括百分比符号（例如 15%）的数值。 |
|
一个比率表示为 <number> / <number>。 |
|
CSS 网格布局引入了一个由带有 fr 单位的 <number> 表示的灵活长度，用于栅格轨道调整大小。 |
Quantities
距离和其他量使用这些类型定义。下表列出了所有数量：
Property |
Description |
长度是表示距离的维度。 |
|
角度表示为具有 deg、grad、rad或 turn 单位的 <dimension> ，并用于诸如 linear-gradient() 之类的属性中。 |
|
持续时间单位表示为具有 s 或 ms 单位的 <dimension> 。 |
|
这是一个具有单位标识符 dpi、dpcm、dppx 或 x 的 <dimension> 。 |
Combinations of Types
同时接受维度和百分比值的 CSS 属性属于此类别。百分比值将转换为相对于允许维度的量。同时接受百分比和维度的属性将使用以下类型之一：
Property |
Description |
可以采用 length 或 percentage 值的类型。 |
|
可以采用 angle 或 percentage 值的类型。 |
|
可以采用 time 或 percentage 值的类型。 |
Color
与颜色相关的属性定义 <color> 数据类型和与颜色相关的其他类型。
下表列出了所有与颜色相关的类型：
Property |
Description |
表示为关键字或数值的颜色。 |
|
确定在不同 <color> 值之间创建转换时使用的颜色空间。 |
|
使用表示为十六进制数字的基本颜色组件（红色、绿色、蓝色）以及其透明度描述 sRGB 颜色的 hexadecimal color syntax 。 |
|
通常链接到网页上不同组件的默认颜色选择。 |
|
表示颜色的透明度。值可以是 <number> （0 完全透明，1 完全不透明）或 <percentage> （0 完全透明，100% 完全不透明）。 |
|
使用 deg、grad、rad、turn 或无单位数字（视为 deg）等单位来为 <absolute-color-functions> 组件定义色轮的 <angle>。 |
|
确定用于 hue 值之间插值的算法。此方法指定如何根据色轮查找两个色相值之间的中点。它是一个 <color-interpolation-method> 数据类型的组件。 |
|
在语法中指定为 <ident> ，以通过名称（如红色、蓝色、黑色或浅绿色）描绘颜色。 |
2D Positioning
下表列出了所有与 2D 定位相关的数据类型：
Property |
Description |
通过提供关键字值（例如 top 或 left）或 <length-percentage> 来确定对象区域的位置。 |
Calculation Data Types
CSS 数学函数在计算中使用这些数据类型。下表列出了所有计算数据类型：
Property |
Description |
计算是一系列通过加法 (+) 和减法 (-) 运算符分隔的计算值。此数据类型要求两个值都包含单位。 |
|
定义用于数字常量的 CSS 关键字，例如 e 和 π，可在 CSS 数学函数中使用。 |
Display
下表列出了所有与显示相关的的数据类型：
Property |
Description |
确定一个元素是否创建显示框。 |
|
确定元素的内部显示，它指定非替换元素的格式化上下文类型。 |
|
确定内部显示值，这些值仅与特定的布局模型相关。 |
|
在 CSS 2 中，对 display 属性使用了单关键字语法，这为同一布局模型的块级和内联级变体要求单独的关键字。 |
|
关键字 list-item 使元素生成一个 ::marker 伪元素，该伪元素具有由 list-style 属性指定的内容，以及一个对于其自身内容指定类型的 main 盒。 |
|
一个元素的外部 display 类型在流布局中至关重要，它由 <display-outside> 关键字确定。 |
Other Data Types
下表列出了一些其他数据类型：
Property |
Description |
为诸如 clip-path 、 shape-outside 和偏移路径之类的属性定义不同的形状。 |
|
指定在元素重叠时应使用的配色方案。 |
|
定义不同的框边，例如 content-box 和 border-box 。 |
|
控制元素的两种状态之间的过渡或动画的速度。 |
|
表示一种图形效果，可改变输入图像的外观。 |
|
表示通用字体族名的关键字值。 |
|
演示两种或多种颜色之间的渐进过渡。 |
|
表示用作标识符的任意字符串。 |
|
指定一行在特定上下文中如何显示或不显示包含在 <line-style> 枚举值类型中。 |
|
枚举值类型 <overflow> 表示与简写 overflow 的属性和 overflow-block 、 overflow-inline 、 overflow-x 和 overflow-y 长写属性相关的关键字值。 |
|
定义相对于父元素计算大小的相对大小。 |
|
变换函数负责在二维 (2D) 和三维 (3D) 空间中旋转、缩放（调整大小）、倾斜（扭曲）或移动元素。 |