第 7 课 9 / 17 ｜ 编码：L07-12
为黄梅戏分享会建立统一样式

两个页面，共享一份样式表

两个 HTML 页面各有自己的内容，通过同一个链接引入 shared.css，共用通知样式。

① 同一个文件夹，一份共享样式

demo/
├── home.html
├── details.html
└── shared.css

两个页面的 head 中都写 <link rel="stylesheet" href="shared.css">。下面分别对照页面代码与效果。

② 活动首页：home.html

<!-- 写在 head 中 -->
<link rel="stylesheet" href="shared.css">

<!-- 写在 body 中 -->
<h1>黄梅戏分享会</h1>
<p class="notice">周三14:00 · A208</p>
<a href="details.html">查看详情</a>

用 class="notice" 标记首页的通知文字；链接指向详情页。

③ 活动详情：details.html

<!-- 写在 head 中 -->
<link rel="stylesheet" href="shared.css">

<!-- 写在 body 中 -->
<h1>分享会详情</h1>
<p class="notice">请提前十分钟到场</p>
<p>交流唱腔、人物与舞台观察。</p>
<a href="home.html">返回首页</a>

详情页也使用 notice 类，但通知文字不同。共享样式不等于共享正文。

④ shared.css：一处修改，两页使用

.notice {
  color: teal;
  line-height: 1.7;
}

把共享文件中的 teal 改成 crimson 并保存，刷新两个页面，通知都会变色。若其中一页未变化，检查链接路径、类名和覆盖规则。

思考：详情页写成 class="Notice"，还能匹配吗？

这里的类名区分大小写。Notice 与 notice 不同；引用同一 CSS 不意味着每条规则都能匹配。

展开完整示例代码

demo/home.html

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>黄梅戏分享会</title>
  <link rel="stylesheet" href="shared.css">
</head>
<body>
  <h1>黄梅戏分享会</h1>
  <p class="notice">周三14:00 · A208</p>
  <a href="details.html">查看详情</a>
</body>
</html>

demo/details.html

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>分享会详情</title>
  <link rel="stylesheet" href="shared.css">
</head>
<body>
  <h1>分享会详情</h1>
  <p class="notice">请提前十分钟到场</p>
  <p>交流唱腔、人物与舞台观察。</p>
  <a href="home.html">返回首页</a>
</body>
</html>

demo/shared.css

body { margin:16px; font-family:"Times New Roman",SimSun,serif; color:#18314f; }
h1 { font-family:"Times New Roman",SimHei,sans-serif; font-size:24px; }
.notice { color:teal; line-height:1.7; }