Css 简明教程
CSS - Data Types
CSS 数据类型定义了可用于各种 CSS 属性的值类型。每个 CSS 属性都需要特定类型的值，了解这些数据类型对于正确设置网络内容的样式和格式至关重要。
CSS data types define the types of values that can be used for various CSS properties. Each CSS property expects a specific type of value, and understanding these data types is essential for properly styling and formatting web content.
下面列出的类型是最常见的类型，但并非任何 CSS 规范中定义的所有类型的完整列表。
The types listed below are the most common, however it is not a complete list of all types defined in any CSS specification.
Syntax
selector {
property: <unit-data-type>;
}CSS 语法使用“<”和“>”不等号之间的关键字以指示数据类型。
CSS syntax uses a keyword between the inequality signs "<" and ">" to indicate data types.
Textual Data Types
这些类型包括关键字、标识符、字符串和 URL。
These types include keywords, identifiers, strings, and URLs.
Pre-defined Keywords
表示预定义关键字，该关键字是其与之一起使用的属性所特有的（例如，自动、继承、无）。
Represents a predefined keyword that is specific to the property it’s used with (e.g., auto, inherit, none).
CSS-wide keywords
下表列出了所有 CSS 范围内的关键字：
The table given below lists all the CSS-wide keywords:
Property |
Description |
A user-defined identifier, such as a name given with the grid-area property. |
|
Using CSS Custom Properties, a <custom-ident> begin with two dashes. |
|
A string that has been quoted, such as the value for the content property. |
|
A reference to a resource, such the background-image value. |
Numeric Data Types
这些数据类型表示数量、索引和位置。下表列出了所有数字数据类型：
These data types represent quantities, indexes, and positions. The following table lists all the numeric data types:
Property |
Description |
One or more decimal units (0–9). |
|
Real numbers may include a fractional component, such as 1 or 1.54. |
|
A numerical value that includes a unit, such as 23px or 15em. |
|
A numerical value that includes a percentage symbol, such as 15%. |
|
A ratio is represented as <number> / <number>. |
|
CSS Grid Layout introduces a flexible length, represented by a <number> with the fr unit attached for grid track sizing. |
Quantities
距离和其他量使用这些类型定义。下表列出了所有数量：
Distance and other quantities are defined using these types. The following table lists all the quantities:
Property |
Description |
Lengths are a dimension that refers to distances. |
|
Angles are represented as a <dimension> with deg, grad, rad, or turn units, and used in properties such as linear-gradient(). |
|
Duration units are represented as a <dimension> with a s or ms unit. |
|
This is a <dimension> with the unit identifier dpi, dpcm, dppx, or x. |
Combinations of Types
同时接受维度和百分比值的 CSS 属性属于此类别。百分比值将转换为相对于允许维度的量。同时接受百分比和维度的属性将使用以下类型之一：
CSS properties that accept both a dimension and a percentage value fall in this category. The percentage value will be converted to a quantity relative to the allowable dimension. Properties that take both a percentage and a dimension will use one of the following types:
Property |
Description |
A type that can take a a length or a percentage value. |
|
A type that can take a a angle or a percentage value. |
|
A type that can take a a time or a percentage value. |
Color
与颜色相关的属性定义 <color> 数据类型和与颜色相关的其他类型。
Color related properties define the <color> data type and additional types related to colors.
下表列出了所有与颜色相关的类型：
The following table lists all the color related data types:
Property |
Description |
A color represented as a keyword or a numerical value. |
|
Determines the color space used when creating a transition between different <color> values. |
|
Describes the hexadecimal color syntax of an sRGB color using the primary color components (red, green, blue) denoted as hexadecimal numbers, along with its transparency. |
|
Commonly linked to the default color selections for different components on a webpage. |
|
Represents the transparency of a color. The value can be either a <number> (0 is fully transparent, 1 is fully opaque) or a <percentage> (0 is fully transparent, 100% is fully opaque). |
|
Define the <angle> of the color wheel for the <absolute-color-functions> component using units such as, deg, grad, rad, turn, or a unitless number (interpreted as deg). |
|
Determines the algorithm that is used for interpolation between hue values. This method specifies how to find a midpoint between two hue values based on a color wheel. It is a component of the <color-interpolation-method> data type. |
|
Specified as a <ident> in syntax, depicts colors by names such as red, blue, black, or light green. |
Images
CSS 图像规范定义了图像相关的数据类型，例如渐变。下表列出了所有图像相关的数据类型：
CSS Images Specification defines image-related data types, such as gradients. The following table lists all the images related data types:
Property |
Description |
A URL pointing to an image or color gradient. |
2D Positioning
下表列出了所有与 2D 定位相关的数据类型：
The following table lists all the 2D Positioning related data types:
Property |
Description |
Determines the position of an object region by providing a keyword value, such as top or left, or a <length-percentage>. |
Calculation Data Types
CSS 数学函数在计算中使用这些数据类型。下表列出了所有计算数据类型：
CSS math functions use these data types in calculations. The following table lists all the calculation data types:
Property |
Description |
A calculation is a series of calculated values separated by addition (+) and subtraction (-) operators. This data type requires that both values contain units. |
|
Defines CSS keywords for numeric constants such as e and π, which can be used in CSS math functions. |
Display
下表列出了所有与显示相关的的数据类型：
The table given below lists all the display related data types:
Property |
Description |
Determines if an element creates display boxes or not. |
|
Determines the inner display of an element, which specifies the formatting context type, for a non-replaced element. |
|
Determines the internal display values, which have relevance only to that particular layout model. |
|
A single-keyword syntax has been used for display property in CSS 2, which required separate keywords for block-level and inline-level variants of the same layout model. |
|
The keyword list-item makes the element to generate a ::marker pseudo-element with the content that is specified by the list-style properties, along with a main box of the specified type for its own contents. |
|
An element’s outer display type, which is essential in flow layout, is determined by the <display-outside> keywords. |
Other Data Types
下表列出了一些其他数据类型：
The table given below lists some more data types:
Property |
Description |
Defines absolute font size in the font shorthand and font-size properties. |
|
Defines different shapes used for properties such as clip-path, shape-outside, and offset-path. |
|
Specifies the color scheme that should be used when elements overlap. |
|
Defines different box edges, such as content-box and border-box. |
|
Control the speed of a transition or animation between two states of an element. |
|
Signifies a graphical effect, which changes the appearance of an input image. |
|
Signifies the keyword values for generic font families. |
|
Demonstrates a progressive transition between two or more colors. |
|
Signifies an arbitrary string that is used as an identifier. |
|
Specifying how a line appears or doesn’t appear in a certain context are included in the <line-style> enumerated value type. |
|
The keyword values used in relation to the shorthand overflow property and the longhand overflow-block, overflow-inline, overflow-x, and overflow-y properties are indicated by the enumerated value type <overflow>. |
|
Define a relative size to the calculated size of the parent element. |
|
The transformation functions are responsible for rotating, scaling (resizing), skewing (distorting), or moving an element in two-dimensional (2D) and three-dimensional (3D) space. |