外部CSS不生效主因是<link>标签错误：缺rel="stylesheet"、未置于<head>内或路径计算错误；rel值大小写敏感且必须为stylesheet；href应使用根相对路径；media不匹配会导致样式不加载。
外部 CSS 不生效，八成不是文件写错了，而是 <link> 标签本身没写对——漏 rel="stylesheet"、放错位置、路径算错基准，三者占全部问题的 90% 以上。
rel="stylesheet" 缺失或大小写错误就等于没写
浏览器只靠 rel 值决定是否启动 CSS 解析流程。rel="stylesheet" 是 HTML5 规范唯一认可的标识。写成 rel="style"、rel="css"、rel="StyleSheet"（大小写敏感），甚至漏掉整个属性，标签就退化为普通链接：Network 面板能看到 200，但 Elements 面板 Styles 栏为空，控制台也不报错——静默失效。
- 错误写法：
<link href="style.css">、<link rel="preload" as="style" href="style.css"> - 正确写法只有这一种核心组合：
<link rel="stylesheet" href="style.css"> -
type="text/css"已冗余，现代浏览器默认就是它，写了纯属多占字节
<link> 必须是 <head> 的直接子元素
浏览器解析 HTML 是流式自上而下的。<link rel="stylesheet"> 在 <body> 里，等于告诉浏览器：“先渲染 DOM，CSS 慢点来”。结果就是 FOUC（Flash of Unstyled Content）：文字闪一下、按钮跳位、响应式断点失效。移动端尤其明显，字体可能先用系统默认字体渲染，再重绘一次。
-
<link>必须是<head>的直接子元素，别嵌套在<script>或<meta>里 - 顺序建议：
<title>→<link rel="stylesheet">→ 其他<script> - 别用 JS 动态插入
<link>来“优化首屏”，那只是把 FOUC 变成可预期的闪屏
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 属性不匹配会导致样式完全不加载
如果给 <link> 加了 media 属性，而当前环境不匹配，表格/页面就完全不会读取该 CSS。例如：<link rel="stylesheet" href="table.css" media="print"> 这段代码只在打印预览时生效，普通浏览下 table.css 里的所有规则都不会作用于页面。
- 默认不写
media，等价于media="all"，始终生效 - 响应式场景常用
media="screen and (max-width: 768px)"，但需确认当前视口宽度是否满足条件 - 调试时可临时删掉
media属性，排除加载被拦截的问题 - 带
media的<link>即使不匹配也会下载 CSS 文件（现代浏览器已优化，但仍有请求开销）
最容易被忽略的是 CSS 文件编码不是 UTF-8 或含 BOM 头，会导致部分规则解析失败——尤其是中文注释或特殊字符附近的选择器莫名失效；还有就是 CSS 文件里根本没写 table、th、td 等选择器规则，引入了也白搭。
