最简单可靠的方式是每个HTML页面在<head>中用<link rel="stylesheet">引入同一外部CSS文件；推荐将common.css置于css/子目录并统一引用href="css/common.css"；公共CSS应只含通用规则，页面专属样式须后引入以控制覆盖顺序。
多个 HTML 页面怎么共享同一份 CSS
直接在每个页面的 <head> 里用 <link rel="stylesheet"> 引入同一个外部 CSS 文件，是最简单也最可靠的方式。不需要构建工具、不依赖服务器配置，浏览器原生支持，改一处全站生效。
公共 CSS 文件该放哪儿、怎么引用
关键是路径要对，且能被所有页面稳定访问。常见做法是把 common.css 放在站点根目录或专门的 css/ 子目录下：
- 如果所有页面都在根目录（如
index.html、about.html），就把common.css放在同级，引用为：<link rel="stylesheet" href="common.css"> - 更推荐建
css/common.css，然后所有页面统一写：<link rel="stylesheet" href="css/common.css"> - 避免用相对路径如
../css/common.css—— 页面嵌套层级一变就 404 - 不要用绝对 URL（如
https://example.com/css/common.css）除非你明确需要 CDN 或跨域共享
样式冲突和覆盖顺序怎么控制
CSS 是按引入顺序和选择器权重叠加的，不是“替换”。所以：
- 公共样式文件应只放通用规则：重置（
reset或normalize）、基础排版（body、h1、p）、工具类（.text-center、.mt-2）等 - 页面专属样式必须后引入，比如：
<link rel="stylesheet" href="css/common.css"><br><link rel="stylesheet" href="css/about.css">
- 别在
common.css里写高权重选择器（如div#header .nav li a:hover），否则后续很难覆盖 - 用
!important是临时补救，不是设计手段 —— 公共 CSS 里尽量不出现
要不要拆成多个 CSS 文件（比如 reset + base + theme）
可以，但得权衡。拆分本身不提升性能，反而可能增加 HTTP 请求（尤其 HTTP/1.1 下）。现代实践中：
立即学习“前端免费学习笔记（深入）”；
- HTTP/2 环境下，多个小文件影响不大，可按语义拆（
base.css、layout.css、theme.css），方便团队分工维护 - 若项目极小（common.css 更省心，避免引入顺序混乱
- 注意：拆了就得管好加载顺序，比如
reset.css必须在最前，theme.css在最后 - 别为了“模块化”而拆分 —— 如果所有页面都用同一套主题色和栅格，硬拆反而增加出错概率
common.css 中过早固化组件结构（比如写死 .card { width: 300px; }），结果某个页面需要响应式卡片时只能用更强选择器或 !important 去顶掉 —— 这种设计债比多引一个文件麻烦得多。 
