CSS 学习笔记（一）— style.css 开头几行

2026-06-21

开始读 css/style.css，把每一段的含义记下来。这是第一部分，讲到链接样式为止。

1. 统一盒模型（第 1～5 行）

*,
*::before,
*::after {
  box-sizing: border-box;
}

• * — 通配选择器，选中页面上每一个元素
• ::before / ::after — 伪元素，元素前后可能插入的内容也要算上
• box-sizing — 属性名，决定 width / height 怎么计算
• border-box — 属性值：宽高包含 padding 和 border

浏览器默认是 content-box（宽高只算内容区，padding 和 border 会额外加宽）。改成 border-box 后，写多少宽就是多少宽，布局更好算。除了 content-box 和 border-box，日常基本用不到别的值。

2. 页面基调 — body（第 7～14 行）

body {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.05rem;
  line-height: 1.7;
  color: #1a1a1a;
  background: #fafafa;
}

• margin: 0 — 去掉浏览器给 body 的默认白边
• font-family — 字体，从左到右依次尝试；serif 是衬线字体族
• font-size: 1.05rem — 字号，相对根元素略大一点
• line-height: 1.7 — 行高为字号的 1.7 倍，长文更好读
• color: #1a1a1a — 文字颜色，深灰黑，比纯黑柔和
• background: #fafafa — 背景色，很浅的灰

color、font-family、font-size、line-height 会被子元素继承；margin 和 background 不会继承。

3. 链接样式 — a（第 16～23 行）

a {
  color: #2563eb;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

• a — 标签选择器，所有链接默认蓝色、无下划线
• a:hover — 伪类，鼠标悬停时加下划线

后面还有更具体的规则会覆盖默认值，比如 nav a 把导航链接改成灰色。规则越具体，优先级越高。

待续

下一篇笔记：CSS 学习笔记（二）— 页头与布局。