CSS 值和单位

CSS 规则包含声明，声明又由属性和值组成。CSS 中使用的每个属性都有一个 **值类型**，用于描述允许使用哪些类型的值。在本课中，我们将探讨一些最常用的值类型，它们是什么以及它们是如何工作的。

**注意：**每个 CSS 属性页面都有一个语法部分，列出了您可以与该属性一起使用的值类型。

先决条件	安装基本软件、了解处理文件的基础知识、HTML 基础知识（学习 HTML 简介）以及对 CSS 工作原理的了解（学习 CSS 首次入门）。
目标	了解 CSS 属性中使用的不同类型的值和单位。

什么是 CSS 值？

在 CSS 规范和 MDN 上的属性页面中，您可以看到值类型，因为它们将用尖括号括起来，例如 <color> 或 <length>。当您看到值类型 <color> 对于特定属性有效时，这意味着您可以使用任何有效的颜色作为该属性的值，如 <color> 参考页面中所列。

**注意：**您会看到 CSS 值类型被称为 *数据类型*。这两个术语基本上是可以互换的 — 当您在 CSS 中看到某样东西被称为数据类型时，它实际上只是说值类型的一种花哨说法。术语 *值* 指的是您选择使用的值类型支持的任何特定表达式。

**注意：**CSS 值类型往往用尖括号 (<, >) 括起来，以区别于 CSS 属性。例如，有一个 color 属性和一个 <color> 数据类型。这不要与 HTML 元素混淆，因为它们也使用尖括号，但这只是需要记住的事情，上下文应该使这一点明确。

在以下示例中，我们使用关键字设置了标题的颜色，使用 rgb() 函数设置了背景。

css

h1 {
  color: black;
  background-color: rgb(197 93 161);
}

CSS 中的值类型是定义允许值集合的一种方式。这意味着如果您看到 <color> 有效，您就不必担心可以使用哪种类型的颜色值 — 关键字、十六进制值、rgb() 函数等。您可以使用 *任何* 可用的 <color> 值，假设您的浏览器支持它们。MDN 上每个值的页面将提供有关浏览器支持的信息。例如，如果您查看 <color> 的页面，您会看到浏览器兼容性部分列出了不同类型的颜色值及其支持情况。

让我们来看看您可能经常遇到的几种值和单位类型，以及一些示例，以便您可以尝试不同的可能值。

数字、长度和百分比

您可能会在 CSS 中使用各种数值类型。以下是所有归类为数值的类型。

数据类型	描述
`<integer>`	`<integer>` 是一个整数，例如 `1024` 或 `-55`。
`<number>`	`<number>` 表示一个十进制数 — 它可能包含小数点，也可能不包含小数点，可以有小数部分。例如，`0.255`、`128` 或 `-1.2`。
`<dimension>`	一个`<dimension>` 是一个带单位的`<number>`。例如，`45deg`、`5s` 或 `10px`。`<dimension>` 是一个总括类别，包括 `<length>`、`<angle>`、`<time>` 和 `<resolution>` 类型。
`<percentage>`	一个`<percentage>` 代表某个其他值的百分比。例如，`50%`。百分比值总是相对于另一个数量。例如，元素的长度相对于其父元素的长度。

长度

您最常遇到的数字类型是 <length>。例如，10px（像素）或 30em。CSS 中使用两种类型的长度 - 相对长度和绝对长度。了解它们之间的区别对于理解事物将变得多大至关重要。

绝对长度单位

以下是所有绝对长度单位 - 它们不依赖于任何其他事物，并且通常被认为始终具有相同的大小。

单位	名称	相当于
`cm`	厘米	1cm = 37.8px = 25.2/64in
`mm`	毫米	1mm = 1/10th of 1cm
`Q`	四分之一毫米	1Q = 1/40th of 1cm
`in`	英寸	1in = 2.54cm = 96px
`pc`	皮卡	1pc = 1/6th of 1in
`pt`	点	1pt = 1/72nd of 1in
`px`	像素	1px = 1/96th of 1in

大多数这些单位在用于印刷时更有用，而不是用于屏幕输出。例如，我们通常不会在屏幕上使用 cm（厘米）。您将经常使用的唯一值是 px（像素）。

相对长度单位

相对长度单位相对于其他事物。例如

em 相对于此元素的字体大小，或在用于 font-size 时相对于父元素的字体大小。rem 相对于根元素的字体大小。
vh 和 vw 分别相对于视窗的高度和宽度。

使用相对单位的好处是，通过一些仔细的规划，您可以使文本或其他元素的大小相对于页面上的其他所有事物进行缩放。有关可用相对单位的完整列表，请参阅 <length> 类型的参考页面。

在本节中，我们将探讨一些最常见的相对单位。

探索一个例子

在下面的示例中，您可以看到一些相对和绝对长度单位的行为。第一个盒子有一个 width 设置为像素。作为绝对单位，无论其他什么发生变化，此宽度都将保持不变。

第二个盒子有一个设置为 vw（视窗宽度）单位的宽度。此值相对于视窗宽度，因此 10vw 是视窗宽度的 10%。如果更改浏览器窗口的宽度，盒子的尺寸应该会改变。但是，此示例使用 <iframe> 嵌入到页面中，因此这将不起作用。要查看此操作，您需要在自己的浏览器选项卡中打开示例后尝试它。

第三个盒子使用 em 单位。这些相对于元素的字体大小。我在包含的 <div> 上设置了 1em 的字体大小，它有一个名为 .wrapper 的类。将此值更改为 1.5em，您将看到所有元素的字体大小都增加，但只有最后一项会变宽，因为它的宽度相对于该字体大小。

按照上面的说明操作后，尝试用其他方式玩弄这些值，看看会得到什么。

ems 和 rems

em 和 rem 是您在为从盒子到文本的任何东西设置大小时最常遇到的两个相对长度。了解它们的工作原理以及它们之间的差异非常重要，尤其是在您开始涉及更复杂的主题（如文本样式或 CSS 布局）时。下面的示例提供了一个演示。

下面说明的 HTML 是一组嵌套列表 - 我们总共有两个列表，这两个示例具有相同的 HTML。唯一的区别是第一个有一个名为 ems 的类，第二个有一个名为 rems 的类。

首先，我们在 <html> 元素上设置了 16px 的字体大小。

回顾一下，em 单位表示“我的父元素的字体大小”，如果用于 font-size（以及“我自己的字体大小”，如果用于其他任何事物）。class 为 ems 的 <li> 元素从其父级获取其大小。因此，每个嵌套级别都会逐渐变大，因为每个级别都将其字体大小设置为 1.3em - 1.3 倍于其父元素的字体大小。

回顾一下，rem 单位表示“根元素的字体大小”（rem 代表“root em”）。class 为 rems 的 <li> 元素从根元素 (<html>) 获取其大小。这意味着每个嵌套级别都不会不断变大。

但是，如果更改 CSS 中的 <html> 元素的 font-size，您将看到其他所有内容相对于它发生变化 - rem 和 em 大小的文本。

行高单位

lh 和 rlh 是类似于 em 和 rem 的相对长度单位。lh 和 rlh 之间的区别在于，第一个相对于元素本身的行高，而第二个相对于根元素的行高，通常是 <html>。

使用这些单位，我们可以精确地将盒子装饰与文本对齐。在本例中，我们使用 lh 单位通过 repeating-linear-gradient() 创建类似笔记本的线条。文本的行高无关紧要，线条总是会出现在正确的位置。

body {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 24px;
  gap: 24px;
  background-color: floralwhite;
  font-family: sans-serif;
}

@supports not (height: 1lh) {
  body::before {
    grid-column: 1 / -1;
    padding: 8px;
    border-radius: 4px;
    background-color: tomato;
    color: white;
    content: "You browser doesn't support lh unit just yet";
  }
}

css

p {
  margin: 0;
  background-image: repeating-linear-gradient(
    to top,
    lightskyblue 0 2px,
    transparent 2px 1lh
  );
}

html

<p style="line-height: 2em">
  Summer is a time for adventure, and this year was no exception. I had many
  exciting experiences, but two of my favorites were my trip to the beach and my
  week at summer camp.
</p>

<p style="line-height: 4em">
  At the beach, I spent my days swimming, collecting shells, and building
  sandcastles. I also went on a boat ride and saw dolphins swimming alongside
  us.
</p>

百分比

在很多情况下，百分比的处理方式与长度相同。百分比的特殊之处在于它们总是相对于某个其他值。例如，如果您将元素的 font-size 设置为百分比，它将是元素父级 font-size 的百分比。如果您将百分比用于 width 值，它将是父级 width 的百分比。

在下面的示例中，两个百分比大小的盒子和两个像素大小的盒子具有相同的类名。两组分别为 40% 和 200px 宽。

区别在于第二组两个盒子在一个 400 像素宽的包装器内。第二个 200px 宽的盒子与第一个盒子宽度相同，但第二个 40% 的盒子现在是 400px 的 40% - 比第一个盒子窄很多！

尝试更改包装器的宽度或百分比值以查看其工作原理。

下一个示例的字体大小以百分比设置。每个 <li> 的 font-size 为 80%；因此，嵌套的列表项会随着它们从父级继承其大小而逐渐变小。

请注意，虽然许多值类型接受长度或百分比，但有些只接受长度。您可以在 MDN 属性参考页面上查看接受哪些值。如果允许的值包括 <length-percentage>，那么您可以使用长度或百分比。如果允许的值只包括 <length>，则无法使用百分比。

数字

一些值类型接受数字，不带任何单位。接受无单位数字的属性示例是 opacity 属性，它控制元素的不透明度（它有多透明）。此属性接受介于 0（完全透明）和 1（完全不透明）之间的数字。

在下面的示例中，尝试将 opacity 的值更改为 0 和 1 之间的各种小数，看看盒子及其内容如何变得更透明或更不透明。

注意： 当您在 CSS 中使用数字作为值时，它不应包含在引号中。

颜色

颜色值可以在 CSS 中的许多地方使用，无论您是要指定文本、背景、边框和更多内容的颜色。在 CSS 中设置颜色有很多方法，让您可以控制许多令人兴奋的属性。

现代计算机中可用的标准颜色系统支持 24 位颜色，这允许通过结合不同的红色、绿色和蓝色通道（每个通道 256 个不同的值）（256 x 256 x 256 = 16,777,216）来显示大约 1670 万种不同的颜色。

在本节中，我们将首先了解最常见的颜色指定方法：使用关键字、十六进制和 rgb() 值。我们还将快速了解其他颜色函数，使您能够在看到它们时识别它们或尝试不同的颜色应用方法。

您可能会决定一个调色板，然后在整个项目中使用这些颜色 - 以及您最喜欢的颜色指定方法。您可以混合和匹配颜色模型，但通常最好让整个项目使用相同的方法来声明颜色以保持一致性！

颜色关键字

您将在许多 MDN 代码示例中看到颜色关键字（或“命名颜色”）。由于 <named-color>s 数据类型包含有限数量的颜色值，因此这些颜色在生产网站上并不常用。由于关键字将颜色表示为人类可读的文本值，因此命名颜色在代码示例中用于清楚地告诉用户预期哪种颜色，以便学习者可以专注于正在教授的内容。

尝试在下面的实时示例中使用不同的颜色值进行练习，以更深入地了解它们的工作原理。

十六进制 RGB 值

您可能会遇到的下一种颜色值类型是十六进制代码。十六进制使用 0-9 和 a-f 中的 16 个字符，因此整个范围是 0123456789abcdef。每个十六进制颜色值都包含一个井号/磅号 (#)，后面跟着三个或六个十六进制字符（例如 #fcc 或 #ffc0cb），还有一个可选的包含一个或两个十六进制字符，表示前面三个或六个字符颜色值的 alpha 透明度。

使用十六进制描述 RGB 值时，每对十六进制字符都是一个十进制数，代表红色、绿色和蓝色通道之一，并且允许我们为每个通道指定 256 个可用值中的任何一个（16 x 16 = 256）。这些值不如关键字直观地定义颜色，但它们更通用，因为您可以用它们表示任何 RGB 颜色。

同样，尝试更改值以查看颜色如何变化。

RGB 值

要直接创建 RGB 值，rgb() 函数接受三个参数，分别代表颜色的红色、绿色和蓝色通道值，以及一个可选的第四个值（用斜杠 (/) 分隔），表示不透明度，与十六进制值非常相似。与 RGB 的区别在于，每个通道不是用两个十六进制数字表示，而是用介于 0 和 255 之间的十进制数或介于 0% 和 100% 之间的百分比表示（但不混合两种）。

让我们重新编写最后一个示例以使用 RGB 颜色

您可以将第四个参数传递给 rgb()，它表示颜色的 alpha 通道，它控制不透明度。如果将此值设置为 0，它将使颜色完全透明，而 1 将使它完全不透明。介于两者之间的值将为您提供不同的透明度级别。

注意： 在颜色上设置 alpha 通道与使用我们之前看过的 opacity 属性有一个关键区别。当您使用不透明度时，您会使元素及其内部的所有内容变得不透明，而使用带有 alpha 参数的 RGB 颜色只会使您指定的颜色变得不透明。

在下面的示例中，我们在包含的彩色盒子的块中添加了一个背景图像。然后我们将盒子设置为具有不同的不透明度值 - 注意当 alpha 通道值较小时，背景是如何显示得更多。

在本例中，尝试更改 alpha 通道值以查看它如何影响颜色输出。

注意： 在较旧版本的 CSS 中，rgb() 语法不支持 alpha 参数 - 您需要使用另一个名为 rgba() 的函数来实现这一点。如今，您可以将 alpha 参数传递给 rgb()。rgba() 函数是 rgb() 的别名。

SRGB 值

sRGB 颜色空间在红色 (r)、绿色 (g) 和蓝色 (b) 颜色空间中定义颜色。

使用色调来指定颜色

如果您想超越关键字、十六进制和 rgb() 来指定颜色，您可能想尝试使用 <hue>。色调是让我们能够区分或识别红色、橙色、黄色、绿色、蓝色等颜色的属性。关键概念是您可以在 <angle> 中指定色调，因为大多数颜色模型使用色轮来描述色调。

有几个颜色函数包含 <hue> 组件，包括 hsl()、hwb() 和 lch()。其他颜色函数，如 lab()，根据人类的视觉来定义颜色。

如果您想了解更多关于这些函数和颜色空间的信息，请参阅使用 CSS 将颜色应用于 HTML 元素指南，<color> 参考列出了在 CSS 中使用颜色的所有不同方法，以及 CSS 颜色模块，它概述了 CSS 中的所有颜色类型以及使用颜色值的属性。

HWB

在 CSS 中使用色调的一个很好的起点是 hwb() 函数，它指定 srgb() 颜色。三个部分是

色调：颜色的基本色调。这需要一个介于 0 和 360 之间的 <hue> 值，表示色轮周围的角度。
白度：颜色有多白？这需要一个从 0%（无白度）到 100%（完全白度）的值。
黑度：颜色有多黑？这需要一个从 0%（无黑度）到 100%（完全黑度）的值。

HSL

与 hwb() 函数类似的是 hsl() 函数，它也指定 srgb() 颜色。HSL 使用 色调，以及 饱和度 和 亮度

色调
饱和度：颜色有多饱和？这需要一个从 0 到 100% 的值，其中 0 表示没有颜色（它将显示为灰色阴影），100% 表示完全饱和的颜色。
亮度：颜色有多亮或有多暗？这需要一个从 0 到 100% 的值，其中 0 表示没有光（它将显示为完全黑色），100% 表示完全光（它将显示为完全白色）。

hsl() 颜色值还有一个可选的第四个值，用斜杠 (/) 与颜色分隔，表示 alpha 透明度。

让我们更新 RGB 示例以改用 HSL 颜色

就像 rgb() 一样，您可以将 alpha 参数传递给 hsl() 来指定不透明度

注意： 在旧版本的 CSS 中，hsl() 语法不支持 alpha 参数 - 您需要使用另一个名为 hsla() 的函数来实现。现在您可以将 alpha 参数传递给 hsl()，但为了与旧网站的向后兼容性，hsla() 语法仍然受支持，并且具有与 hsl() 完全相同的行为。

图像

<image> 值类型用于任何图像有效的场景。这可以是通过 url() 函数指向的实际图像文件，也可以是渐变。

在下面的示例中，我们演示了图像和渐变作为 CSS background-image 属性值的应用。

注意： <image> 还有一些其他可能的值，但这些值较新，目前浏览器支持度较差。如果您想了解它们，请查看 MDN 上的 <image> 数据类型页面。

位置

<position> 值类型表示一组 2D 坐标，用于定位项目，例如背景图像（通过 background-position）。它可以采用诸如 top、left、bottom、right 和 center 之类的关键字，以将项目与 2D 框的特定边界对齐，以及表示相对于框的顶部和左侧边缘的偏移量的长度。

一个典型的定位值包含两个值 - 第一个设置水平位置，第二个设置垂直位置。如果您只为一个轴指定值，另一个轴将默认为 center。

在下面的示例中，我们使用关键字将背景图像定位在容器的顶部和右侧 40px 处。

尝试修改这些值，看看如何移动图像。

字符串和标识符

在上面的所有示例中，我们看到了一些使用关键字作为值的地方（例如 <color> 关键字，如 red、black、rebeccapurple 和 goldenrod）。这些关键字更准确地描述为**标识符**，CSS 理解的一种特殊值。因此，它们不带引号 - 它们不被视为字符串。

在 CSS 中，有一些地方需要使用字符串。例如，在指定生成内容时。在这种情况下，该值被引起来表示它是一个字符串。在下面的示例中，我们使用无引号的颜色关键字以及一个引用的生成内容字符串。

函数

在编程中，函数是一段执行特定任务的代码。函数很有用，因为您可以编写一次代码，然后重复使用它很多次，而不是一遍又一遍地编写相同的逻辑。大多数编程语言不仅支持函数，而且还附带方便的内置函数来完成常见任务，因此您不必从头开始编写它们。

CSS 也具有函数，它们的工作方式与其他语言中的函数类似。实际上，我们已经在上面的颜色部分中看到了 CSS 函数，使用了rgb() 和hsl() 函数。

除了应用颜色之外，您还可以使用 CSS 函数执行许多其他操作。例如，变换函数是一种常见的移动、旋转和缩放页面上元素的方法。您可能会看到translate() 用于水平或垂直移动元素，rotate() 用于旋转元素，或者scale() 用于放大或缩小元素。

数学函数

在为项目创建样式时，您可能会先使用诸如 300px 之类的长度数字或 200ms 之类的持续时间数字。如果您希望这些值根据其他值更改，则需要进行一些数学运算。您可以计算一个值的百分比或将一个数字添加到另一个数字，然后使用结果更新您的 CSS。

CSS 支持数学函数，允许我们执行计算，而不是依赖静态值或在 JavaScript 中进行数学运算。最常见的数学函数之一是calc()，它允许您执行加、减、乘、除等运算。

例如，假设我们希望将元素的宽度设置为其父容器的 20% 加上 100px。我们无法使用静态值指定此宽度 - 如果父容器使用百分比宽度（或 em 或 rem 之类的相对单位），那么它将根据使用上下文以及其他因素（例如用户的设备或浏览器窗口宽度）而有所不同。但是，我们可以使用 calc() 将元素的宽度设置为其父容器的 20% 加上 100px。20% 是基于父容器 (.wrapper) 的宽度，如果该宽度发生变化，计算结果也会发生变化

CSS 中还有许多其他数学函数可以使用，例如min()、max() 和clamp()；它们分别允许您从一组值中选择最小值、最大值或中间值。您还可以使用三角函数，例如sin()、cos() 和tan() 来计算围绕某个点的旋转元素的角度，或选择将色调角作为参数的颜色。指数函数也可用于动画和过渡，当您需要对元素的移动和外观进行非常精确的控制时。

了解 CSS 函数很有用，这样您在看到它们时就能识别出来。您应该在自己的项目中开始尝试使用它们 - 它们将帮助您避免编写自定义或重复的代码来实现可以使用普通 CSS 达成的效果。

测试您的技能！

您已经阅读完本文，但您能记住最重要的信息吗？在您继续学习之前，您可以进行一些进一步的测试来验证您是否保留了这些信息 - 请查看测试您的技能：值和单位。

摘要

这是一篇快速介绍了您可能遇到的最常见的值和单位类型。您可以在CSS 值和单位参考页面上查看所有不同的类型 - 在您完成这些课程的过程中，您将遇到许多这样的类型。

要记住的关键是，每个属性都定义了允许的值类型列表，每个值类型都有一个定义，解释了这些值是什么。然后，您可以在 MDN 上查找详细信息。例如，了解<image> 也允许您创建颜色渐变非常有用，但这可能不是显而易见的信息！

在下一篇文章中，我们将探讨 CSS 中的项目大小。