3. CSS 语法结构

本节目标：搞清楚一条 CSS 规则由哪几部分构成，能看懂和书写标准 CSS 语法。

一条 CSS 规则长什么样

CSS 规则的基本结构就三部分：选择器 + 声明块 + 声明。看这个例子：

p {
  color: red;
  text-align: center;
}

用图示来理解：

选择器 {
  属性: 值;
  属性: 值;
}
  ↑         ↑
  p      color: red
        ↑         ↑
       属性       值

选择器（selector）：告诉浏览器「这条规则用在哪些 HTML 元素上」
声明块（declaration block）：花括号 {} 包裹的所有内容
声明（declaration）：每条 属性: 值; 就是一条声明

选择器的作用

选择器就是 CSS 的「导航」，它指向你想设置样式的元素：

/* 选择所有 <p> 标签 */
p {
  font-size: 16px;
}

/* 选择 class="title" 的元素 */
.title {
  color: blue;
}

/* 选择 id="main" 的元素 */
#main {
  width: 800px;
}

选择器写对了，样式才能匹配到正确的元素。后面两章会专门讲各种选择器的用法。

声明：属性与值

每条声明由属性和值组成，中间用冒号分隔，末尾用分号结束：

选择器 {
  属性: 值;
  ↑       ↑
  color: red;
}

常见的属性-值对比如下：

属性	值	作用
`color`	`red` / `#ff0000` / `rgb(255,0,0)`	文字颜色
`font-size`	`16px` / `1em` / `1rem`	字体大小
`background-color`	`#fff` / `lightblue`	背景颜色
`text-align`	`left` / `center` / `right`	文本对齐
`width`	`100px` / `50%`	宽度
`height`	`200px` / `auto`	高度

Note

冒号是半角英文冒号 :，不是中文冒号 ：。写错了样式不生效。

分号不能忘

每条声明末尾的分号 ; 是必须的。没写分号，浏览器解析会出错：

/* 正确写法 */
p {
  color: red;
  text-align: center;
}

/* 错误写法：少了分号，两条声明会一起失效 */
p {
  color: red
  text-align: center;
}

[!TIP>
最后一条声明后面的分号可以省略，但建议每条都写。这样后面加新声明时不会忘记。

多行与单行写法

CSS 不强制换行，所以下面两种写法效果完全一样：

/* 多行写法（推荐） */
p {
  color: red;
  text-align: center;
}

/* 单行写法 */
p { color: red; text-align: center; }

实际项目中推荐多行写法，每条声明占一行。好处是：

代码可读性强，一眼能看到所有属性
Git diff 时改动一目了然
找某个属性更方便

声明块里放什么

声明块 {} 里面放的是若干条声明。可以是一条，也可以是很多条：

/* 只有一条声明 */
h1 {
  font-size: 24px;
}

/* 多条声明 */
h1 {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-bottom: 16px;
}

同一个选择器的多条声明会同时生效。如果你对同一个属性写了两次，后写的覆盖先写的：

p {
  color: red;
  color: blue;  /* 最终生效的是蓝色 */
}

语法错误排查

新手写 CSS 常犯的语法错误：

错误	正确
`p { color: red, text-align: center; }`	`p { color: red; text-align: center; }`
`p { color：red; }`	`p { color: red; }`
`p color: red;`	`p { color: red; }`
`p { color=red; }`	`p { color: red; }`
`p { color: red;`	`p { color: red; }`

Note

写错一个分号或括号，可能导致整条规则失效。浏览器开发者工具（F12）会帮你定位错误。

一个完整示例

下面是一个包含多种选择器和声明的完整例子：

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>CSS 语法示例</title>
  <style>
    /* 元素选择器 */
    h1 {
      color: navy;
      text-align: center;
    }

    /* 类选择器 */
    .intro {
      font-size: 16px;
      line-height: 1.8;
      color: #666;
    }

    /* 多属性声明 */
    .card {
      width: 300px;
      padding: 20px;
      border: 1px solid #ddd;
      border-radius: 8px;
    }
  </style>
</head>
<body>
  <h1>CSS 语法结构</h1>
  <p class="intro">这是介绍文字。</p>
  <div class="card">这是一个卡片。</div>
</body>
</html>

学完这章你应该知道

一条 CSS 规则 = 选择器 + 声明块（花括号）
声明块里是一条条 属性: 值; 的声明
分号不能忘，冒号用半角的
同一个属性写两次，后写的覆盖先写的
推荐每条声明单独一行

下一章我们讲 CSS 注释，学会给自己的代码加说明。