样式表（stylesheet）是一个单独的规则文件，控制页面的外观，所以颜色或字体只需改一次，所有链接它的页面都会跟着变。当试题要求一个页面或小型网站外观一致时，就会用到这项技能，它建立在你已经写好的页面结构之上。
CSS 规则怎样运作？
一条规则有选择器（selector，要设计什么）和一个或多个声明（declaration，怎样设计），每个声明以分号结尾。
h1 {
color: navy;
font-family: Arial, sans-serif;
font-size: 28px;
}这里 h1 是选择器。color、font-family 和 font-size 是属性，每个后面跟一个值。漏掉分号是规则只生效一半的最常见原因。
怎样建立并链接样式表？
- 新建一个纯文本文件，命名为
style.css，放在网站文件夹里。 - 每个选择器写一条规则，先写试题点名的元素。
- 保存文件，扩展名保持
.css。 - 在每个页面的
head里加链接行：<link rel="stylesheet" href="style.css">。 - 重新载入页面，检查每项要求是否已经显示出来。
例题
一道虚构的试题要求：所有二级标题为深绿色、20 像素高，所有段落用 16 像素的 Arial 字体。
第 1 步： 新建 style.css。
第 2 步： 写两条规则。
h2 {
color: darkgreen;
font-size: 20px;
}
p {
font-family: Arial, sans-serif;
font-size: 16px;
}第 3 步： 在 index.html 的 head 里加链接行。样式表在同一个文件夹，所以路径就是 style.css。
第 4 步： 如果第二个页面 pages/events.html 也需要这些规则，它的链接行是 <link rel="stylesheet" href="../style.css">，因为样式表在上一层文件夹。以后把 darkgreen 改成 navy，只改一次，两个页面的所有 h2 就都变了颜色。
要留意的错误
常见的失误是把同样的样式复制到每个元素的标签里。
<h2 style="color: darkgreen;">When we meet</h2>
<h2 style="color: darkgreen;">What we do</h2>现在看起来可以，但违背了一致性的目标：之后要改，每个标题都得改一遍，而且总会漏掉一个。改正方法是在样式表里写一条 h2 规则，页面上只用普通的 <h2> 标签。另一个更不容易发现的错误是链接行里的路径写错，整个样式表就会悄悄失效。
自我检测
1. 找出错误：p { color: red font-size: 14px; }
显示答案
red 后面缺少分号。正确写法：p { color: red; font-size: 14px; }
2. pages 文件夹里的页面要链接网站主文件夹里的 style.css。写出正确的 href。
显示答案
../style.css，因为样式表在页面上一层的文件夹。
3. 四个页面共用一个样式表。客户想换标题颜色。需要修改几个文件？
显示答案
一个：样式表。四个页面都会跟着它变。
接下来学什么？
接下来让页面之间互相连通：创建有效的相对链接。回到单元指南，并用实操任务与证据检查器对照任务要求检查你的结果。
学生可能单独理解一条规则，却在它必须跨文件夹结构生效时丢分。我们的老师会在一对一 ICT 线上补习中帮你解决这一点。