CSS 语法：选择器、属性和值

Begindev 编辑部 March 25, 2026

在上一章中，我们了解了什么是 CSS 以及为什么它是网页美化不可或缺的工具。现在，是时候深入研究 CSS 语言本身了：它的语法。

就像任何口头语言都有语法规则一样，CSS 也有关于如何编写指令来为 HTML 元素设置样式的特定规则。理解这一基本结构——如何组合选择器、属性和值——是将你的设计意图有效传达给浏览器的关键。

1. CSS 规则的剖析

从本质上讲，CSS 的工作原理是将样式规则应用于 HTML 元素。每一条样式指令被称为一个 CSS 规则集 (CSS Rule Set)。

一个规则集由三个主要部分组成：选择器 (Selector)、属性 (Property) 和 值 (Value)。这三个组件协同工作，告诉浏览器给什么设置样式、怎么设置样式以及具体的特征是什么。

让我们分解一下基本结构：

选择器 {
  属性: 值;
  属性: 值;
}

在你编写的每一个 CSS 样式表中，都会重复这种简单的结构。

1.1 选择器 (Selectors)：定位 HTML 元素

选择器是 CSS 规则集的一部分，用于指示你想要为哪个或哪些 HTML 元素设置样式。它是你“选择”样式目标的方式。选择器可以非常具体（针对单个唯一元素），也可以非常广泛（针对页面上的许多元素）。

例如，如果你想让所有段落文本变红，你会选择所有 <p> 元素。如果你想让所有标题变蓝，你会选择所有 <h1> 元素。

这是一个使用元素选择器（针对特定 HTML 标签的所有实例）的示例：

p {
  /* 这是一个元素选择器。它以页面上所有的 <p> (段落) 元素为目标。 */
}

在后续的章节中，我们将更详细地探索各种类型的选择器。现在，请理解选择器始终是 CSS 规则的第一部分，位于花括号之外，其工作是指向你想要设置样式的 HTML 元素。

1.2 属性 (Properties)：你想要改变的特征

一旦你选择了一个 HTML 元素，你需要决定要改变该元素的什么特征。这个“什么”由属性定义。CSS 提供了大量的属性，允许你控制元素的几乎每一个视觉方面，从颜色和大小到位置和背景。

常见的属性示例包括：

color：控制文本颜色。
font-size：控制文本的大小。
background-color：控制元素的背景颜色。
width：控制元素的宽度。
margin：控制元素外部的间距。

属性后面总是跟着一个冒号 (:)。

让我们扩展我们的例子：

p {
  color: /* 'color' 属性将改变文本颜色。 */;
  font-size: /* 'font-size' 属性将改变文本大小。 */;
}

每个属性都是 CSS 能理解的关键字，指示可以修改的特定视觉属性。

1.3 值 (Values)：你想要如何改变它

值是你想要应用于所选属性的具体设置或特征。它是样式指令的“如何”或“具体是什么”。例如，如果属性是 color（颜色），值可以是 red（红色）。如果属性是 font-size（字体大小），值可以是 16px。

值总是放在属性-值对的冒号 (:) 之后和分号 (;) 之前。不同的属性接受不同类型的值（例如颜色名称、像素值、百分比、关键字）。

继续我们的例子：

p {
  color: blue; /* 'blue' 是属性 'color' 的值。 */
  font-size: 16px; /* '16px' 是属性 'font-size' 的值。 */
}

1.4 分号：结束声明

属性及其值的每个组合构成一个声明 (Declaration)。CSS 规则集中的每个声明必须以分号 (;) 结尾。这个分号告诉浏览器一个声明在哪里结束，另一个声明在哪里开始。如果你忘记了分号，尤其是当它不是规则集中的最后一个属性时，浏览器可能无法正确解释随后的声明。

这是一个完整的规则集：

/* 这是一个完整的 CSS 规则集。 */
p { /* 'p' 是选择器，目标是所有段落元素。 */
  color: blue; /* 'color: blue;' 是第一个声明。'color' 是属性，'blue' 是值。 */
  font-size: 16px; /* 'font-size: 16px;' 是第二个声明。 */
} /* 花括号包含了该选择器的所有声明。 */

1.5 花括号 (Curly Braces)：分组声明

花括号 ({ }) 对于将应用于特定选择器的所有声明进行分组至关重要。花括号内的所有内容都属于该选择器。

h1 { /* 这是 h1 选择器的左花括号 */
  color: green;
  text-align: center;
} /* 这是 h1 选择器的右花括号 */

如果没有花括号，浏览器将不知道哪些样式应用于哪些元素。

2. 实战示例与演示

让我们看几个例子来巩固你对 CSS 语法的理解。

2.1 示例 1：设置段落样式

假设你有一个包含一些段落的 HTML 文档，你想让所有段落都变成某种灰色，并赋予它们稍大的字体。

HTML 可能如下所示：

<body>
    <h1>我的精彩网页</h1>
    <p>这是第一段内容。</p>
    <p>这是第二段，它的样式应该和上面一样。</p>
</body>

这是应用所需样式的 CSS：

/* 段落的 CSS 规则集 */
p { /* 选中所有 <p> 元素 */
  color: #333333; /* 使用十六进制值将文本颜色设置为深灰色 */
  font-size: 18px; /* 将字体大小设置为 18 像素 */
  line-height: 1.6; /* 设置文本行之间的间距 */
}

解析：

p：选择器。它针对网页上的所有段落 (<p>) 元素。
{ }：包裹 p 选择器所有声明的花括号。
color: #333333;：第一个声明。color：属性，表示我们要更改文本颜色。#333333：值，代表深灰色的十六进制代码。;：结束该声明的分号。

2.2 示例 2：设置标题样式

假设你想让所有 <h1> 标题变为绿色并居中对齐。

/* h1 标题的 CSS 规则集 */
h1 { /* 选中所有 <h1> 元素 */
  color: green; /* 将文本颜色设置为绿色 */
  text-align: center; /* 水平居中文本 */
  text-transform: uppercase; /* 将所有文本转换为大写 */
}

2.3 示例 3：组合多个元素的样式

你的 CSS 中可以有许多规则集，每个规则集针对不同的元素并应用不同的样式。

/* 整个页面主体的样式 */
body { 
  font-family: Arial, sans-serif; /* 设置首选字体和后备字体 */
  background-color: #f4f4f4; /* 设置浅灰色背景 */
}

/* h1 标题的样式 */
h1 { 
  color: #2c3e50; /* 深蓝灰色 */
  text-align: center; 
  margin-bottom: 20px; /* 标题下方添加间距 */
}

/* p 段落的样式 */
p { 
  color: #333333; 
  font-size: 1.1em; 
  line-height: 1.6; 
}

这个综合示例展示了多个 CSS 规则集如何协同工作以设置 HTML 文档不同部分的样式。每个规则集都遵循完全相同的 选择器 { 属性: 值; } 语法。