外部CSS不生效主因是link标签位置错误、rel="stylesheet"缺失或拼错、href路径基准计算错误；必须置于head内，rel值严格小写且完整，href用根相对路径可避免404。
外部CSS不生效，90% 是 <link> 标签写错了位置、漏了 rel="stylesheet"，或 href 路径算错了基准 —— 不是 CSS 写得不好，而是浏览器根本没把它当样式表处理。
为什么 <link> 必须放在 <head> 里
浏览器从上到下解析 HTML，<link rel="stylesheet"> 在 <body> 里，等于告诉浏览器：“先画页面，CSS 慢点来”。结果就是 FOUC（页面闪一下、文字跳位、响应式断点失效），移动端尤其明显。IE6–8 更直接忽略，整页无样式。
-
<link>必须是<head>的直接子元素，不能嵌在<script>或<meta>里 - 推荐顺序：
<title>→<link rel="stylesheet">→ 其他<script> - 别用 JS 动态插入
<link>来“优化首屏”，那只是把 FOUC 变成可预期的闪屏
rel="stylesheet" 漏写或拼错就等于没写
浏览器只靠 rel 值决定是否启动 CSS 解析流程。rel="stylesheet" 是 HTML5 规范唯一认可的标识。写成 rel="style"、rel="css"、rel="StyleSheet"（大小写敏感），甚至漏掉整个属性，标签就退化为普通链接：Network 面板能看到 200，但 Elements 面板 Styles 栏为空，控制台也不报错 —— 静默失效。
- 常见错误现象：
Network面板里看不到 CSS 请求；Elements中<head>下有<link>，但 Styles 面板空白 -
rel="stylesheet "（末尾空格）也可能被某些解析器误判 -
type="text/css"已冗余，现代浏览器默认就是它，写了纯属多占字节
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测试
media 属性写错会让 CSS “条件性消失”
media 不是装饰属性。一旦写了但值不合法（比如 media="screen and (min-width:768px" 少了个括号），整个 <link> 会被浏览器视为无效，CSS 不加载也不报错。
- 默认不写
media，等价于media="all"，始终生效 - 打印样式要加
media="print"，否则普通浏览下完全不生效 - 响应式常用
media="screen and (max-width: 768px)"，但需确认当前视口宽度是否满足条件 - 调试时可临时删掉
media属性，排除加载被拦截的问题
最容易被忽略的其实是路径基准和 rel 属性的严格性——它们不报错，却让整个样式链静默断裂。检查时优先盯死这两点，比翻 CSS 规则本身更高效。
