CSS values and units - CSS（层叠样式表） 编辑

所有的 CSS 声明都包括一个 属性 / 值 对。由于属性不同，对应的值可能是一个单个整数或关键字，也可能是一串包含或不包含计数单位的数字和关键字的集合。CSS 中属性接受一个共同的数据类型（属性的值和对应的单位）。 下面是大多数这些数据类型的概览。想要获知每一种数据类型的更详细信息，请分别查看它们的链接。

文本数据类型

• <custom-ident>
• 作为 <ident> 预定义的关键字
• <string>
• <url>

文本数据类型要么是 <string>，要么是一系列字符的合集，或者是 <ident> —— 一个实质上是不带引号的字符串的"CSS 标识符"。一个 <string> 必须被单引号或者双引号所包围。CSS 标识符，在标准中所列出的 <ident> 或者 <custom-ident> 则必须不带引号。

在 CSS 标准中，属性的值可以由 Web 开发者指定，例如关键帧动画（keyframe animations），字体的名称（font-family names），或者是被列为 <custom-ident> 和 / 或 <string> 的栅格区域（grid-areas）。

当允许使用带引号或者不带引号的两种用户定义的文本属性值时，标准列出为 <custom-ident> | <string>，也就是说引号是可选的。例如在指定动画的名称时：

@keyframe validIdent {
  /* keyframes go here */
}
@keyframe 'validString' {
  /* keyframes go here */
}

有些文本属性值不允许被引号包围。例如， grid-area 属性对应的值可以是<custom-ident>，所以假设有一个栅格区域名为 content ，我们必须不带引号地使用：

.item {
  grid-area: content;
}

相比之下，另一种数据类型是 <string>，例如 content 属性的值则必须被引号包围：

.item::after {
    content: "This is my content.";
}

大多数时候你可以随心所欲地创建任何名称作为标识符，甚至包括使用 emoji 表情。然而标识符不能是 none，unset，initial， 或者 inherit，以两条短横线开头。并且，你也不可以使用任何已经预定义的 CSS 关键字。查看 <custom-ident> 和 <string> 页面了解更多信息。

预定义的关键值

预定义的关键值是由 CSS 标准为属性定义的文本值。这些关键字也属于 CSS 标识符，因此在使用时无需用引号包围。

当在 CSS 标准或者 MDN 属性页面中查看某个 CSS 属性时，该属性所有允许的取值都会以下面表格的形式列出。下面的值是 float 属性可以取的预定义值：

left | right | none | inline-start | inline-end

这些值在使用时不需要引号：

.box {
    float: left;
}

CSS 全局范围内的值

预定义的关键值往往是针对某一个属性的。作为补充，所有 CSS 属性都可以接受 CSS 全局范围内的值：initial，inherit 和 unset。这些全局范围的值往往指定了一种默认的行为。

initial指定了当前值作为属性的初始值。inherit关键字则指定当前元素的属性值基于父元素进行计算，即继承。

unset关键字的作用是inherit或initial中的一者，取决于某个 CSS 属性是否可以自父元素继承。

revert 在 Cascade Level 4 标准中被引入，但这一属性值还没有较好的浏览器支持现状。

URLs

<url> 类型使用一个函数符号，接收一个<string>类型的URL。这个URL可以是绝对地址或者相对地址。例如，如果你想要设置一张背景图片，那么你可以采用如下两种做法：

.box {
  background-image: url("images/my-background.png");
}

.box {
  background-image: url("https://www.wenjiangs.com/wp-content/uploads/2020/mozilla/my-background.png");
}

url()的参数可以也可以不使用引号。如果使用引号包围了URL，那么它会被解析为一个<url-token>，包含对某些字符的额外转义。查看 <url> 以获取更多信息。

数值数据类型

• <integer>
• <number>
• <dimension>
• <percentage>

整数

一个整数包含 0 到 9的一个或多个十进制数字，例如 1024 或 -55。一个整数可能额外包含 + 或 - 前缀，在正负号和数值之间没有任何空格。

数值

<number> 表示一个真正的数，有可能又或者没有小数点和小数部分。例如 0.255，128 或 -1.2。数值也可能包含前缀 + 或 - 标识正负。

尺寸

<dimension> 是一个包含单位的 <number>，例如 45deg，100ms，或者 10px。单位是大小写敏感的，且数值和单位之间不允许有任何的空格或其他字符。例如 1 cm 不是一个合法的值。

CSS 使用尺寸来指定：

• <length> （距离单位）
• <angle>
• <time>
• <frequency>
• <resolution>

这些都将在下面的部分里一一介绍。

距离单位

一个距离单位，或这也称为长度（length），允许作为属性的值。它被描述为 <length> 类型。CSS中有两种长度：相对和绝对。

相对长度单位基于其它元素的长度。例如 em 基于该元素的字号大小，vh 则与设备视口的高度有关。

Absolute length units are fixed to a physical length: either an inch or a centimeter. Many of these units are therefore more useful when the output is a fixed size media, such as print. For example, mm is a physical millimeter, 1/10th of a centimeter.

When including a length value, if the length is 0, the unit identifier is not required. Otherwise, the unit identifier is required, is case insensitive, and must come immediately after the numeric part of the value, with no space in-between.

Angle units

Angle values are represented by the type <angle> and accept the following values:

Time units

Time values are represented by the type <time>. When including a time value, the unit identifier -- the s or ms -- is required. It accepts the following values.

Frequency units

Frequency values are represented by the type <frequency>. It accepts the following values.

1Hz, which can also be written as 1hz or 1HZ, is one cycle per second.

Resolution unit

Resolution units are represented by the type <resolution>. They represent the size of a single dot in a graphical representation, such as a screen, by indicating how many of these dots fit in a CSS inch, centimeter, or pixel. It accepts the following values:

Percentages

A <percentage> is a type that represents a fraction of some other value.

Percentage values are always relative to another quantity, for example a length. Each property that allows percentages also defines the quantity to which the percentage refers. This quantity can be a value of another property of the same element, the value of a property of an ancestor element, a measurement of a containing block, or something else.

As an example, if you specify the width of a box as a percentage, it refers to the percentage of the box's parent's computed width:

.box {
  width: 50%;
}

Mixing percentages and dimensions

Some properties accept a dimension that could be either one of two types, for example a <length> or a <percentage>. In this case the allowed value is detailed in the specification as a combination unit, e.g. <length-percentage>. Other possible combinations are as follows:

• <frequency-percentage>
• <angle-percentage>
• <time-percentage>

Special data types (defined in other specs)

• <color>
• <image>
• <position>

Color

The <color> value specifies the color of an element feature (e.g. it's background color), and is defined in the CSS Color Module.

Image

The <image> value specifies all the different types of image that can be used in CSS, and is defined in the CSS Image Values and Replaced Content Module.

Position

The <position> type defines 2D positioning of an object inside a positioning area, for example a background image inside a container. This type is interpreted as a  background-position and therefore specified in the CSS Backgrounds and Borders specification.

Functional notation

• calc()
• min()
• max()
• clamp()
• toggle()
• attr()

Functional notation is a type of value that can represent more complex types or invoke special processing by CSS. The syntax starts with the name of the function immediately followed by a left parenthesis ( followed by the argument(s) to the notation followed by a right parenthesis ). Functions can take multiple arguments, which are formatted similarly to a CSS property value.

White space is allowed, but optional inside the parentheses. (But see notes regarding whitespace within pages for min(), max() and clamp() functions.)

Some legacy functional notations such as rgba() use commas, but generally commas are only used to separate items in a list. If a comma is used to separate arguments, white space is optional before and after the comma.

Specifications

See also

• CSS Basic Data Types
• Introduction to CSS: Values and Units