link rel="stylesheet"是整站样式统一的基础设施，所有页面必须通过同一套外部css文件渲染，漏写、拼错rel值、路径错误或位置错误（如放body内）均会导致样式静默失效、白屏或fouc，且浏览器不报错。
link rel="stylesheet" 是整站样式统一的基础设施
整站风格统一不是靠人盯 CSS 文件，而是靠 <link rel="stylesheet"> 的加载机制强制约束：所有页面都必须通过同一套（或几套有明确顺序的）外部 CSS 文件渲染。一旦某页漏写、路径错、位置错，那页就立刻脱离统一风格——不是“看起来不一样”，是根本没样式可应用。
- 多个页面共用同一个
href="assets/css/main.css"，修改一处，全站生效；改错一处，全站出问题 - 不同模块可拆分 CSS（如
table-theme.css、form-layout.css），但只要它们都通过<link>引入且顺序一致，覆盖逻辑就可控 - 若某页用内联
<style></style>覆盖关键规则，会破坏一致性——这不是<link>的问题，而是人为绕过统一机制
路径写错或放错位置，风格统一直接失效
看似只是“样式没出来”，实则是整站统一性在部署环节的第一道防线被击穿。常见断点：
-
<link>放在里：表格、按钮等元素先裸奔渲染，再重绘——用户看到“闪一下”，且 SSR/Next.js 环境下触发hydration mismatch -
href路径以 HTML 文件为基准，不是编辑器打开位置：比如pages/user.html要引入根目录下的/assets/css/main.css，就得写href="/assets/css/main.css"，写成href="../assets/css/main.css"就 404 - Linux 服务器大小写敏感：
Main.css≠main.css，路径对但文件名错，Network 面板里压根没有请求记录
rel 属性拼错，浏览器静默放弃，整站变白屏
rel="stylesheet" 是唯一被浏览器识别为“必须阻塞渲染并解析”的值。拼错一个字母，后果不是“部分样式不生效”，而是整个 CSS 文件被跳过：
-
rel="styleSheet"（大小写错）、rel="css"（非标准值）、rel= stylesheet（缺引号）、rel="stylesheet "（末尾空格）——全部无效 - 浏览器不会报错，控制台安静，Network 面板无请求，HTML 结构完好，但
内容全按默认样式显示，像没写过一行 CSS - 这种错误极难排查，尤其当多人协作时，有人本地开发用 Live Server 自动补全，上线后路径和 rel 值一换就失效
多 CSS 文件加载顺序决定最终风格是否可控
整站统一不等于只用一个 CSS 文件。更现实的是分层管理：reset.css → base.css → theme.css → page-specific.css。而顺序由 <link> 在 中的书写顺序严格决定：
- 后加载的 CSS 中同选择器规则，会覆盖前面的——这是实现“主题切换”或“暗色模式”的底层依据
- 如果把
theme.css写在reset.css前面，重置规则就可能覆盖掉主题色，导致按钮颜色回退到浏览器默认 - 不要依赖 @import：它在 CSS 文件内部使用，会阻塞后续资源，且无法被构建工具有效提取或压缩，破坏构建时的样式合并逻辑
真正卡住整站风格统一的，往往不是设计规范写得不够细，而是 <link> 标签在每个 HTML 文件里是否完全一致——路径、rel、位置、顺序，四个点中任一点出偏差，那一页面就自动退出统一队列。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
