1. CSS 是什么

这是什么：CSS（Cascading Style Sheets，层叠样式表）= 描述元素长什么样的样式表，管颜色、字号、间距和排布。

为什么用：上一章的 HTML 负责搭出网页的骨架，但页面光有骨架很「素」——颜色、字号、间距这些都得另有人管。

如何用：先看一条 CSS 规则怎么写，再挑行内、内部、外部三种引入方式把样式加进页面。

HTML 管结构，CSS 管样式，分工明确——不把样式写在 HTML 里，是这个教程从头到尾的约定。

1.1 一条 CSS 规则的结构

CSS 由一条条规则组成，每条规则分「选择器」和「样式声明」：

h1 {
  color: red;
  font-size: 28px;
}

1.2 三种引入方式

方式 1：行内样式（不推荐，应急用）

直接写在标签的 style 属性里：

<p style="color: red;">这段文字是红色</p>

方式 2：内部样式表

写在 <style> 标签里，通常放在 <head> 中：

<head>
  <style>
    p {
      color: red;
    }
  </style>
</head>

方式 3：外部样式表（推荐）

把 CSS 存成独立文件，用 <link> 引入。下面示范引用的是网上公开的样式表——公共 CDN 上的 normalize.css，任何网页都能直接访问到：

<head>
  <link rel="stylesheet" href="https://registry.npmmirror.com/normalize.css/8.0.1/files/normalize.css" />
</head>

推荐外部样式表：结构与样式分离、多处页面复用同一份样式、下载一次可缓存。

自己项目的 CSS 同理：写进独立文件，把 href 里的地址换成那份文件的存放路径即可，姿势一模一样。

1.3 「层叠」是什么意思

CSS 的「层叠」指多条规则同时命中一个元素时，会按规则叠合：

• 不冲突的属性：全部生效
• 冲突的属性：优先级高的赢（下一章讲）
• 同级冲突：后写的赢（就近原则）

p { color: red; }   /* 先写 */
p { color: blue; }  /* 后写 → 实际是蓝色 */

你会看到：两段规则都命中 p，最后段落是蓝色——这就是「后写的覆盖先写的」。

1.4 动手改

1. 把 <h1> 改成绿色，<p> 改成 14px
2. 增加一条 body { background: #f5f5f5; }，看整页变色
3. 把 color: blue 那行删掉，观察文字变回红色

1.5 小结

• CSS 规则 = 选择器 + 声明（属性: 值;）
• 三种引入：行内 / 内部 / 外部，项目里用外部样式表
• 「层叠」让多条规则叠加生效，冲突时按优先级与先后顺序决定

下一章：选择器与优先级 🐸