link 标签必须写在 head 里，因浏览器自上而下解析，若置于 body 中会导致 CSS 未加载完就渲染，引发闪屏或布局跳动；且需确保 href 路径正确、rel="stylesheet" 完整准确、避免 @import 阻塞。
link 标签必须写在 head 里，不是 body 里
浏览器解析 HTML 是从上到下顺序执行的。如果把 <link rel="stylesheet" href="style.css"> 放在 <body> 里，CSS 文件可能还没加载完，页面就先渲染出无样式的 HTML，造成闪屏或布局跳动。
常见错误现象：元素位置突然偏移、文字颜色/大小延迟生效、控制台没报错但样式就是不生效
- 必须放在
<head>内，且最好在<title>之后、<script>之前 - 不要用
@import在 CSS 文件里引入其他 CSS——它会阻塞渲染，且无法并行加载 - 如果用了
async或defer的<script>，仍不能把<link>放到<body>底部来“优化”
href 路径写错是样式不生效的头号原因
路径问题比想象中更敏感：相对路径以当前 HTML 文件所在目录为基准，不是以 CSS 文件、也不是以服务器根目录为准。
使用场景举例：HTML 在 /pages/index.html，CSS 在 /css/main.css，那么 href 应该写 ../css/main.css，而不是 /css/main.css（除非你开了服务器且配置了根路径）
立即学习“前端免费学习笔记（深入）”；
-
href="style.css"→ 表示和 HTML 同目录 -
href="css/style.css"→ 表示 HTML 同目录下的css/子目录 -
href="../assets/style.css"→ 表示 HTML 上级目录里的assets/目录 - 浏览器控制台 Network 面板里，
style.css显示404或状态码不是200，基本就是路径错了
rel="stylesheet" 缺失或拼错会导致完全忽略该文件
浏览器只认 rel="stylesheet" 这个值来识别外部样式表。写成 rel="style"、rel="css" 或漏掉 rel，标签会被当成普通链接处理，CSS 内容不会被解析。
错误现象：link 标签出现在 DOM 中，但开发者工具 Elements 面板里看不到任何样式规则、Computed 栏里只有用户代理样式
- 必须写全
rel="stylesheet"，大小写敏感，不能简写 - 不要加多余空格，比如
rel = "stylesheet"在某些旧环境可能出问题（虽然现代浏览器大多兼容） - type 属性已废弃，不用写
type="text/css"，写了也无害，但没必要
内联 style 和外部 CSS 冲突时，优先级不只看谁在后面
很多人以为“后引入的 CSS 一定覆盖前面的”，其实不然。选择器权重（specificity）才是决定性因素。一个 id 选择器可以轻松压过十个 class 选择器，哪怕它写在前面。
容易踩的坑：明明 link 加载成功，但按钮还是蓝色而不是红色、用 !important 强行覆盖结果导致后续维护困难
- 检查开发者工具 Elements 面板右侧的 Styles 栏，看哪条规则被划掉（strikethrough），鼠标悬停能显示具体权重值
- 避免滥用
!important；优先用更精确的选择器，比如把.btn改成.header .btn - 内联
style="color: red"的权重高于所有外部 CSS，但可维护性最差，仅限临时调试
