外部css不生效主因是rel="stylesheet"缺失或错误、link未置于head内、href路径计算基准错误；三者均导致样式静默失效，无报错但cssom不构建。
外部 CSS 不生效，八成是 rel="stylesheet" 漏了、<link> 放错了位置，或者 href 路径算错了基准——不是浏览器不支持，而是它根本没“认出”这是要解析的样式表。
rel="stylesheet" 必须写对，大小写和空格都敏感
浏览器只靠 rel 值决定是否启动 CSS 解析流程。rel="stylesheet" 是 HTML5 规范唯一认可的标识。写成 rel="style"、rel="css"、rel="StyleSheet"（首字母大写）、rel="stylesheet "（末尾多空格），甚至漏掉整个 rel 属性，标签就退化为普通链接：文件可能下载成功（Network 面板能看到 200），但 CSSOM 不构建、Styles 面板空白、控制台也无报错。
-
<link href="main.css">→ 缺rel，静默失效 -
<link rel="import" href="main.css">→ 已废弃，控制台警告，无样式 -
<link rel="alternate stylesheet" href="theme.css">→ 这是备用样式，需 JS 手动激活才启用
必须放在 里，不能塞进
浏览器解析 HTML 是自上而下流式进行的。<link rel="stylesheet"> 在 中，等于告诉浏览器：“先画页面，CSS 慢点来”。结果就是 FOUC（页面闪一下、文字跳位、响应式断点失效），移动端尤其明显。IE6–8 更直接忽略整条规则。
- 必须是
的直接子元素，不能嵌在<script></script>或<meta>里 - 推荐顺序：
<title></title>→<link rel="stylesheet">→ 其他<script></script> - 动态插入（如
document.head.append(link)）虽可行，但只是把 FOUC 变成可预期的闪屏，不解决本质问题
href 路径必须基于 HTML 文件位置计算，别信“相对路径很直观”
href 的计算基准永远是当前 HTML 文件的 URL，不是编辑器打开的目录，也不是服务器根路径。例如 HTML 在 /blog/article.html，写 href="css/style.css"，浏览器实际请求的是 /blog/css/style.css，而非你想要的 /css/style.css。
- 开发时快速验证：右键源码里的
href值 → “在新标签页中打开”，看是否能直接显示 CSS 内容 - Network 面板里找 404 请求，点开看 “Initiator” 列指向哪个
<link> - 推荐统一用根相对路径：
href="/css/style.css"（开头带/） - 本地双击打开
file://协议时，多数浏览器会拒绝加载外部 CSS，务必用python3 -m http.server或 VS Code Live Server 测试
type="text/css" 已冗余，media 属性写错会让 CSS “条件性消失”
type="text/css" 在 HTML5 中已为默认值，显式声明纯属多占字节；而 media 不是装饰属性，一旦写了但值不合法（比如 media="screen and (min-width:768px" 少了个括号），整个 <link> 会被视为无效，CSS 不加载也不报错。
- 不写
media等价于media="all"，始终生效 - 打印样式必须加：
<link rel="stylesheet" href="print.css" media="print">，否则普通浏览下完全不生效 -
<link>不支持async或defer—— 这两个只对<script></script>有效，强行加上毫无作用 - 避免在 CSS 文件里用
@import引其他 CSS，它串行加载、阻塞渲染、无法并行下载，比<link>多一轮 HTTP 请求
真正容易被忽略的其实是路径基准和 rel 属性的严格性——它们不报错，却让整个样式链静默断裂。检查时优先盯死这两点，比翻 CSS 规则本身更高效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
