你的第一份 CSS：页面有了颜色

跟我看：CSS 是什么

HTML 是页面的骨架。CSS 是它的衣服：颜色、字体、大小、间距。它写在单独的文件里，看起来像这样：

h1 {
  color: darkblue;
}

p {
  font-size: 18px;
  color: #333333;
}

大声读出来：“每个 h1 标题，涂成深蓝色。每个 p 段落，18 像素、深灰色。”

每条规则有三个部分：

属性和值之间用冒号分隔，每行末尾用分号。注意分号——忘记分号是全世界最常见的 CSS 错误。

在你的 my-website 文件夹里，新建一个叫 style.css 的文件。
在每个 HTML 页面的 <head> 里添加这一行：
```
<link rel="stylesheet" href="style.css">
```
意思是：“这个页面的外观在 style.css 文件里。”
测试是否生效——在 style.css 里放一眼就能看出来的东西：
```
body {
  background-color: yellow;
}
```
保存，刷新页面。全变黄了？生效了！（现在可以把黄色删掉了。）

你可以用英文单词写颜色（red、darkblue、lightgray、tomato、gold……），或者更精确地用代码，以井号开头：#1d4ed8 是蓝色，#16a34a 是绿色。在 htmlcolorcodes.com 随便混你喜欢的颜色代码。

给你的网站穿上第一套颜色。在 style.css 里设置：

参考答案——当然，颜色可以随意调整：

🏫 学校网站——参考答案

body {
  background-color: #f0f7ff;
}

h1, h2 {
  color: #1d4ed8;
}

p, li {
  font-size: 18px;
  color: #1f2937;
}

蓝色很适合学校网站——感觉可靠（银行也用蓝色！）。

🙋 个人网站——参考答案

body {
  background-color: #fffbeb;
}

h1, h2 {
  color: #ea580c;
}

p, li {
  font-size: 18px;
  color: #292524;
}

个人网站可以更大胆——暖橙色说”这里很有活力”。

🌍 旅行日记——参考答案

body {
  background-color: #f0fdf4;
}

h1, h2 {
  color: #15803d;
}

p, li {
  font-size: 18px;
  color: #1f2937;
}

像森林和草地的绿色——旅行日记的完美选择。

⚽ 俱乐部网站——参考答案

body {
  background-color: #fafafa;
}

h1, h2 {
  color: #b91c1c;
}

p, li {
  font-size: 18px;
  color: #1f2937;
}

最好选你的 俱乐部颜色——穿红色就红色！

⚠️

可读性规则： 浅色背景用深色文字（或反过来）。浅黄配白底根本看不清。不确定时，问别人：“你能舒服地读这个吗？”

✅

检查一下： 你的网站有了自己的颜色——而且因为 CSS 在一个文件里、链接到每个页面，所有页面一次就都有颜色了。挺聪明，对吧？