CSS 学习笔记（三）— 站点标题与导航

2026-06-21

继续读 css/style.css 第 46～72 行。这一部分在页头布局（笔记二）的基础上，给站点标题和导航链接做更具体的样式设定。

对应 HTML

<a class="site-title" href="index.html">双喜的博客</a>
<nav>
  <a href="index.html" aria-current="page">首页</a>
  <a href="about.html">关于</a>
</nav>

规律是：HTML 搭模块，CSS 逐块装修。通用的 a { } 先定默认，再针对 .site-title、nav a 分别微调。

1. 站点标题（第 46～51 行）

.site-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1a1a1a;
  text-decoration: none;
}

.site-title 本身也是 <a> 链接，会先套用通用的 a { color: #2563eb; }，再被这里覆盖成标题样式：

• font-size: 1.25rem — 比正文略大
• font-weight: 700 — 粗体（400 正常，700 粗）
• color: #1a1a1a — 深灰黑，不像普通链接那样蓝色
• text-decoration: none — 无下划线，看起来像站名

2. 标题悬停（第 53～56 行）

.site-title:hover {
  text-decoration: none;
  color: #2563eb;
}

和正文链接相反：平时深色，悬停变蓝，仍不加下划线。

3. 导航容器 nav（第 58～63 行）

nav {
  display: flex;
  gap: 1.25rem;
  font-family: system-ui, sans-serif;
  font-size: 0.95rem;
}

• display: flex — 「首页」「关于」横排
• gap: 1.25rem — 两个链接之间的间距
• font-family: system-ui, sans-serif — 无衬线字体，和正文衬线区分
• font-size: 0.95rem — 略小于正文

页头用了两次 flex：外层 .site-header .inner 让标题和导航左右分布；内层 nav 让导航项横排并有间距。

4. 导航链接（第 65～72 行）

nav a {
  color: #555;
}

nav a:hover,
nav a[aria-current="page"] {
  color: #1a1a1a;
}

nav a — 后代选择器

只影响导航里的链接，不影响正文里的蓝色链接。平时是灰色 #555。

nav a:hover — 悬停变深

鼠标移上去变成 #1a1a1a，表示正在交互。

nav a[aria-current="page"] — 属性选择器

选中带 aria-current="page" 属性的链接，即当前页对应的导航项，颜色也是 #1a1a1a。不用 JavaScript 就能标出「你在这里」。

关于 :hover

悬停用的是伪类 :hover，不限于 a:hover。本文件里就有三种：

• a:hover — 普通链接悬停，加下划线
• .site-title:hover — 标题悬停，变蓝
• nav a:hover — 导航链接悬停，变深色

同一个 <a> 可能匹配多条规则，更具体的优先。例如导航里的「首页」主要受 nav a:hover 影响，而不是通用的 a:hover。

本节小结

• 先写通用规则（a），再写模块规则（nav a、.site-title）
• :hover 加在谁后面，谁就拥有悬停效果
• [aria-current="page"] 是属性选择器，标记当前页

待续

下一篇笔记：main 和 .intro 正文区样式。

← 笔记（二）