在 CSS 中，每个属性都可以接受一个或多个值。CSS 提供了多种值和单位，以便我们能够精确地控制页面的布局和样式。

一、什么是 CSS 的值？

CSS 的值是用来定义样式属性的具体数据。不同的样式属性接受不同类型的值，这些值可以是数字、长度、百分比、颜色、图片、位置、字符串、标识符或者函数。理解这些值的使用方式以及它们如何影响页面的呈现，将帮助你创建更具表现力和功能性的网页设计。

二、数字、长度和百分比

1、数字

数字是最基本的 CSS 值，通常用来设置样式属性的数值。例如，设置字体大小、边距、边框宽度等：

p {
    font-size: 16px; /* 字体大小为 16 像素 */
    margin: 20px;    /* 外边距为 20 像素 */
}
  • 1.
  • 2.
  • 3.
  • 4.

在上述代码中，16 和 20 都是数字值，分别用于定义字体大小和外边距。

2、长度

长度值用于定义元素的尺寸和位置，通常以像素（px）、点（pt）、厘米（cm）等单位表示。长度单位分为绝对单位和相对单位。

1）绝对长度单位

绝对长度单位用于定义固定的尺寸，不依赖于其他因素。常见的绝对单位包括：

  • 像素 (px)：最常用的单位，适用于大多数场景。
  • 点 (pt)：常用于打印样式表，一个点等于 1/72 英寸。
  • 厘米 (cm) 和 毫米 (mm)：用于较为精确的尺寸控制。
div {
    width: 300px; /* 300 像素宽 */
    height: 200pt; /* 200 点高 */
}
  • 1.
  • 2.
  • 3.
  • 4.
2）相对长度单位

相对长度单位根据父元素的尺寸或视口的大小进行调整。常见的相对单位包括：

  • 百分比 (%)：相对于包含块的尺寸。例如，width: 50% 会将元素的宽度设置为其父元素宽度的一半。
  • em：相对于当前元素的字体大小。例如，font-size: 2em 会将字体大小设置为当前字体大小的两倍。
  • rem：相对于根元素的字体大小。与 em 类似，但总是相对于根元素的字体大小。
.container {
    width: 50%; /* 容器宽度为其父元素宽度的 50% */
}

.text {
    font-size: 2em; /* 字体大小为当前字体大小的两倍 */
}

.base-text {
    font-size: 16px; /* 根字体大小 */
}

.relative-text {
    font-size: 1.5rem; /* 字体大小为根字体大小的 1.5 倍 */
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.

三、颜色

CSS 提供了多种方式来定义颜色，包括颜色关键词、十六进制值、RGB 和 RGBA 值、HSL 和 HSLA 值。

1、颜色关键词

CSS 颜色关键词是预定义的颜色名称。例如：

h1 {
    color: red; /* 使用颜色关键词 */
}
  • 1.
  • 2.
  • 3.

常见的颜色关键词包括 black、white、blue、green 等。

2、十六进制 RGB 值

十六进制颜色值是另一种定义颜色的方法，通常以 #RRGGBB 的格式表示，其中 RR、GG 和 BB 是红色、绿色和蓝色的十六进制值。十六进制值可以缩写为 #RGB 格式：

p {
    color: #3498db; /* 十六进制颜色值 */
}

h2 {
    color: #ff0; /* 缩写形式 */
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.

3、RGB 和 RGBA 值

RGB 值表示红色、绿色和蓝色的强度，取值范围从 0 到 255。RGBA 值在 RGB 值的基础上增加了透明度（alpha），取值范围从 0 到 1：

div {
    background-color: rgb(52, 152, 219); /* 使用 RGB 值 */
}

span {
    color: rgba(255, 0, 0, 0.5); /* 使用 RGBA 值，红色，50% 透明度 */
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.

4、HSL 和 HSLA 值

HSL 值表示色相（hue）、饱和度（saturation）和亮度（lightness）。HSLA 值在 HSL 的基础上增加了透明度（alpha）：

section {
    background-color: hsl(200, 70%, 50%); /* 使用 HSL 值 */
}

footer {
    color: hsla(120, 100%, 50%, 0.3); /* 使用 HSLA 值，绿色，30% 透明度 */
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.

四、图片

图片可以通过 url() 函数引入，也可以通过渐变函数定义背景图像：

.header {
    background-image: url('image.jpg'); /* 使用图片 URL */
}

.footer {
    background: linear-gradient(to right, red, yellow); /* 使用渐变背景 */
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.

五、位置

位置值用于定位元素。常见的定位值包括 top、right、bottom 和 left，可以用长度单位、百分比或关键字表示：

.positioned {
    position: absolute;
    top: 10px;
    right: 20px;
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.

六、字符串和标识符

在 CSS 中，字符串用于定义字体、内容等，标识符用于选择器和属性值。例如：

blockquote::before {
    content: "“"; /* 使用字符串 */
}

.code {
    font-family: "Courier New", Courier, monospace; /* 使用标识符 */
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.

七、函数

CSS 函数用于计算和生成动态值。常见的 CSS 函数包括 calc()、var()、clamp()、min() 和 max()：

.container {
    width: calc(100% - 20px); /* 使用 calc 函数 */
}

.element {
    font-size: var(--base-font-size); /* 使用 var 函数 */
}

.box {
    width: clamp(200px, 50%, 400px); /* 使用 clamp 函数 */
}

.text {
    font-size: min(16px, 4vw); /* 使用 min 函数 */
}

.panel {
    height: max(300px, 50vh); /* 使用 max 函数 */
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.

八、示例代码

示例 1: 使用不同单位和颜色

/* 设置不同的颜色和单位 */
.box {
    width: 50%; /* 相对单位 */
    height: 200px; /* 绝对单位 */
    background-color: rgb(255, 99, 71); /* RGB 颜色 */
    border: 5px solid rgba(0, 0, 0, 0.5); /* RGBA 颜色 */
}

.text {
    font-size: 2em; /* em 单位 */
    color: hsl(120, 100%, 50%); /* HSL 颜色 */
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.

示例 2: 使用字符串和函数

/* 使用字符串和 CSS 函数 */
.quote::before {
    content: "“"; /* 字符串 */
    font-size: calc(1em + 2px); /* 计算函数 */
}

.responsive {
    width: clamp(300px, 50%, 600px); /* clamp 函数 */
    height: min(500px, 80vh); /* min 函数 */
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.