外部css不生效主因是rel="stylesheet"缺失、link未置于head内或href路径错误；浏览器流式解析导致fouc，且rel值大小写敏感、路径以html文件url为基准。
外部CSS不生效，八成是 rel="stylesheet" 漏了、<link> 放错了位置，或 href 路径算错了基准——不是浏览器不支持，而是它根本没“认出”这是要解析的样式表。
为什么 <link> 必须写在
浏览器解析 HTML 是流式自上而下的。<link rel="stylesheet"> 在 里，等于告诉浏览器：“先渲染 DOM，CSS 慢点来”。结果就是 FOUC（Flash of Unstyled Content）：文字闪一下、按钮跳位、响应式断点失效。移动端尤其明显，字体可能先用系统默认字体渲染，再重绘一次。
-
<link>必须是的直接子元素，别嵌套在<script></script>或<meta>里 - 顺序建议：
<title></title>→<link rel="stylesheet">→ 其他<script></script> - 别用 JS 动态插入
<link>来“优化首屏”，那只是把 FOUC 变成可预期的闪屏
rel="stylesheet" 缺失或拼错就等于没写
浏览器只靠 rel 值决定是否启动 CSS 解析流程。rel="stylesheet" 是 HTML5 规范唯一认可的标识。写成 rel="style"、rel="css"、rel="StyleSheet"（大小写敏感），甚至漏掉整个属性，标签就退化为普通链接：Network 面板能看到 200，但 Elements 面板 Styles 栏为空，控制台也不报错——静默失效。
- 正确写法只有这一种核心组合：
<link rel="stylesheet" href="style.css"> -
type="text/css"已冗余，现代浏览器默认就是它，写了纯属多占字节 - 别混淆
<link rel="preload" as="style">—— 它不会应用样式，只预加载
href 路径怎么写才不 404
href 的计算基准永远是当前 HTML 文件的 URL，不是编辑器打开的目录，也不是服务器根路径。相对路径 href="css/style.css" 在 /blog/article.html 中，实际请求的是 /blog/css/style.css，而非你想要的 /css/style.css。
- 开发时快速验证：右键页面源码里的
href值 → “在新标签页中打开”，看能否直接显示 CSS 内容 - Network 面板里找 404 请求，点开看 “Initiator” 列，直接定位到哪个
<link>发起的 - 推荐统一用根相对路径：
href="/css/style.css"（开头带/），避免嵌套层级带来的歧义 - 本地双击打开
file://协议时，相对路径可能被浏览器安全策略拦截，务必用live-server或vite preview测试
多个 <link> 的顺序和隔离策略
CSS 加载是串行阻塞的：浏览器按 <link> 出现顺序依次下载、解析、构建 CSSOM。后加载的 CSS 规则可覆盖前面同选择器的声明，但顺序错乱会导致意料外的样式丢失或重绘。
- 推荐顺序：
normalize.css→bootstrap.min.css→custom.css - 非关键 CSS（如打印样式、暗色主题）用
media属性隔离：<link rel="stylesheet" href="print.css" media="print">，它仍会下载，但不参与初始渲染 - 别滥用
@import——它在 CSS 里再导入其他 CSS，会强制串行加载，拖慢渲染
最容易被忽略的其实是 rel 属性缺失和路径层级误判——这两个问题在本地开发时可能“看起来能用”，但一部署到子路径或 CDN 就立刻暴露，而且调试时 Network 面板里看不到任何 CSS 解析错误，只看到空白或错乱布局。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
