字体和 class · 跟马丁学编程

跟我看：更好看的字体

浏览器默认字体很无聊。用一条规则给整个页面换字体：

body {
  font-family: Verdana, Arial, sans-serif;
}

font-family 是一个愿望清单：“用 Verdana。没有？那就 Arial。也没有？那就任何 sans-serif 字体（sans-serif）。”

几乎每台电脑都有的字体：Verdana、Georgia（有小脚，适合较长文字）、Trebuchet MS、Courier New（像打字机）。多试几种——换字体对网站效果很大。

跟我看：class

到目前为止你可以一次给所有段落加样式。但如果有一个段落需要看起来不同——比如重要通知呢？这就是 class 的用途：

在 HTML 里，给标签一个 class 名字：

<p class="notice">No school tomorrow!</p>

在 CSS 里，用点来选中它：

.notice {
  background-color: #fef3c7;
  border: 2px solid #f59e0b;
  padding: 10px;
  border-radius: 8px;
}

background-color——只有那个元素的背景色
border——边框：粗细、样式、颜色
padding——文字和边框之间的空间（文字不会贴边）
border-radius——圆角

你可以给任意多个元素加同一个 class——它们都会穿一样的”衣服”。像校服，但是给标签穿的。

轮到你了 💪

用 body 上的 font-family 给整个网站设置字体。
想一个符合你项目的 class，在两个地方使用它。

🏫 学校网站——参考答案（"news" class）

<p class="news">📢 No school on Friday – teacher training day!</p>
<p class="news">📢 Paper drive starts Monday.</p>

body {
  font-family: Verdana, Arial, sans-serif;
}

.news {
  background-color: #fef3c7;
  border: 2px solid #f59e0b;
  padding: 10px;
  border-radius: 8px;
}

🙋 个人网站——参考答案（"favorite" class）

<p class="favorite">⭐ Favorite game: Minecraft</p>
<p class="favorite">⭐ Favorite food: pancakes</p>

body {
  font-family: "Trebuchet MS", Verdana, sans-serif;
}

.favorite {
  background-color: #ffedd5;
  border: 2px solid #ea580c;
  padding: 10px;
  border-radius: 8px;
}

🌍 旅行日记——参考答案（"tip" class）

<p class="tip">🎒 Trip tip: head up the mountain early, before it gets hot.</p>
<p class="tip">🎒 Tip: bring water shoes to the beach!</p>

body {
  font-family: Georgia, "Times New Roman", serif;
}

.tip {
  background-color: #dcfce7;
  border: 2px solid #16a34a;
  padding: 10px;
  border-radius: 8px;
}

⚽ 俱乐部网站——参考答案（"win" class）

<li class="win">Eagles – Hawks 3 : 1</li>
<li>Falcons – Eagles 2 : 2</li>
<li class="win">Eagles – Wildcats 4 : 0</li>

body {
  font-family: Verdana, Arial, sans-serif;
}

.win {
  background-color: #dcfce7;
  font-weight: bold;
}

胜利马上用绿色高亮——就像真正的积分榜！

✅

检查一下： 你的网站有了新字体，至少有一个元素用了自己的 class，看起来和别的不一样。

这堂课你要记住

body 上的 font-family 改变整个网站的字体。
class 是名字牌：HTML 里 class="name"，CSS 里 .name { ... }。
padding、border 和 border-radius 把普通段落变成漂亮的小色块。