第 2 单元：理解 CSS 的功能

欢迎来到网页设计的世界！本章将带你深入了解层叠样式表（Cascading Style Sheets，简称 CSS）。
如果说 HTML 提供了网站的结构和内容（文字、链接、图像），那么 CSS 就是赋予其美观、条理和专业感的“魔法”。你可以把 CSS 看作是你网站的室内设计师。

如果起初觉得有些棘手，不必担心——我们将逐步拆解 CSS 的工作原理、核心重要性，以及编写有效样式规则所需的简单语法。

1. 什么是 CSS，为什么我们需要它？

定义

CSS 的全称是 Cascading Style Sheets（层叠样式表）。它的主要功能是描述 HTML 元素在屏幕、纸张或其他媒体上的呈现方式。

关注点分离（核心原因）

在现代网页开发中，我们遵循关注点分离（Separation of Concerns）原则。这意味着要将内容（HTML）与展示/设计（CSS）保持独立。

  • HTML： 只关注结构（例如：“这是一个标题”、“这是一个段落”、“这是一个按钮”）。
  • CSS： 只关注外观（例如：“标题应该是蓝色且居中的”、“按钮应该有绿色背景和圆角”）。

类比： 想象一下制造一辆汽车。HTML 是引擎、车架和底盘——这是使其成为汽车的基础结构。而 CSS 是车漆、舒适的座椅、合金轮毂和仪表盘设计。没有 CSS，车也能开，但它看起来就像一个乏味的金属盒子！

核心要点： CSS 控制格式和布局的各个方面，确保单个网页或整个大型网站的样式保持一致。

2. CSS 规则的构成

CSS 规则是告诉浏览器如何为特定 HTML 元素设置样式的指令。每条规则都遵循明确的结构：

第 1 步：选择器（Selector）

选择器用于识别你想要设置样式的 HTML 元素。

  • 示例： 如果你想更改所有段落的文本，你的选择器就是 p。
  • 示例： 如果你想更改所有一级标题，你的选择器就是 h1。

第 2 步：声明块（Declaration Block）

这部分被包含在花括号 { } 中，包含一条或多条声明（实际的样式指令）。

第 3 步：声明（属性与值）

每条声明由一个属性（Property）和一个值（Value）组成，中间用冒号 : 分隔。声明必须以分号 ; 结尾。

记忆小技巧： 记住 PVC 原则（Property: Value;，即属性: 值;）。

图示展示了 CSS 规则的组成：选择器指向 p，属性指向 color，值指向 blue，所有内容都包含在声明块中。

规则示例说明：
h1 { color: red; font-size: 24px; }

  • 选择器（h1）： 选中所有的 Heading 1（一级标题）元素。
  • 属性 1（color）： 更改文本颜色。
  • 值 1（red）： 将文本设置为红色。
  • 属性 2（font-size）： 更改文本大小。
  • 值 2（24px）： 将文本大小设置为 24 像素。

应避免的常见错误： 忘记在声明末尾添加分号 ; 会导致块中后续的样式规则失效！

3. 应用 CSS 的方法（连接 HTML 与样式）

将 CSS 引入 HTML 文档主要有三种方式。具体选择哪种取决于你所构建网站的规模和复杂程度。

3.1 外部样式表（最佳实践）

这是所有大型项目最专业、最推荐的方法。

  • 工作方式： 所有 CSS 代码都存储在一个单独的文件中（例如 styles.css）。
  • 功能： HTML 文档通过在 <head> 部分中使用 <link> 标签来链接此外部文件。
  • 代码： <link rel="stylesheet" type="text/css" href="styles.css" />
  • 优点： 集中式控制。 你只需编辑一个 CSS 文件，就能修改成千上万个页面的样式。这在更新网站外观时能节省大量时间。

3.2 内部（嵌入式）样式

当你有仅适用于单个页面的特定样式，且不想为此创建单独的外部文件时，这种方法非常有用。

  • 工作方式： CSS 规则直接写在 HTML 文档中，包含在 <style> 标签内。
  • 位置： <style> 标签放置在 HTML 文档的 <head> 部分内。
  • 优点： 样式与内容结构分离开来（不同于行内样式），但仍包含在一个文件中。

3.3 行内样式（尽可能避免）

行内样式将 CSS 直接应用于单个 HTML 元素。

  • 工作方式： CSS 声明作为 style 属性直接添加到 HTML 开始标签中。
  • 代码： <p style="color: green; margin-left: 20px;">此段落具有行内样式。</p>
  • 缺点： 违反了关注点分离原则。如果你需要修改所有段落的样式，你必须手动编辑每一个 <p> 标签，这既费时又容易出错。除非绝对必要（例如某些特定的邮件模板），否则通常应避免使用。
快速复习：放置层级

对于专业且可扩展的工作，首选顺序始终为：
1. 外部样式表（可维护性最高）
2. 内部样式（页面特定样式）
3. 行内样式（最后手段）

4. 层叠（Cascading）的重要性

CSS 中的 “C” 代表 Cascading（层叠）。这是一个决定当多条规则冲突时哪条规则生效的关键特性。

类比： 想象一下你同时收到三位经理针对同一任务的指示，你该听谁的？“层叠”机制就是为浏览器回答这个问题的。

理解冲突解决

当浏览器发现多条规则试图为同一个元素设置样式时（例如：外部样式表说段落文本是蓝色的，但行内样式说它是红色的），它会使用严格的等级制度来决定应用哪条规则。

层叠顺序的主要决定因素是特异性（Specificity）（即哪条规则更详细）以及来源位置（Source Location）（样式来自哪里）。

特异性规则（基本等级）

通常来说，越靠近实际 HTML 元素的样式被认为越“具体”，优先级越高，会覆盖更远的样式。

简单的优先级顺序（胜出规则）如下：

  1. 行内样式： 总是胜出，因为它们直接应用于元素。（特异性最高）
  2. 内部/嵌入式样式： 定义在当前 HTML 页面 <head> 部分的样式。
  3. 外部样式表： 从单独文件链接的样式。
  4. 浏览器默认样式： 如果你不设置任何 CSS，浏览器使用的内置样式。（特异性最低）

你知道吗？ “层叠”一词源于样式表从上往下流动并继承规则的想法，但更具体的规则（如行内样式）有权覆盖继承而来的规则。

为什么层叠很有用？

层叠允许开发者定义宽泛的全局样式（在外部样式表中），然后轻松地进行小的、局部的调整（使用内部或行内样式），而无需重写整个样式表。它在保持控制力的同时提供了极大的灵活性。

功能核心要点
  • 功能： CSS 管理外观（格式、颜色、布局）并确保关注点分离。
  • 规则结构： 选择器锁定元素，属性定义特性（如 color），值定义设置（如 blue）。
  • 最佳方法： 使用外部样式表以方便维护。
  • 层叠： 决定了冲突发生时哪条规则获胜。行内样式总是覆盖外部或内部样式。

请继续练习定义规则和链接外部样式表。掌握这些核心概念将使你的网页开发过程更加顺畅！