link标签必须写在<head>里，不能放在<body>中；浏览器自上而下解析HTML，若误置body内会导致FOUC、样式延迟或IE6–8直接忽略，且rel="stylesheet"和正确href路径缺一不可。
link 标签必须写在 里，不能放在 中
浏览器解析 HTML 是从上到下顺序执行的。link 标签如果误写在 <body> 内，样式可能延迟应用，甚至触发 FOUC（Flash of Unstyled Content）；更严重的是，IE6–8 会直接忽略它，导致 CSS 完全不加载。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 始终把
<link rel="stylesheet" href="style.css">放在<head>内，最好紧贴<title>或<meta>标签之后 - 不要用
@import在 CSS 文件里再导入另一个 CSS——它会阻塞渲染，且无法并行下载 - 若需 JS 动态加样式，用
document.createElement('link')+appendChild到document.head，而不是document.body
href 路径写错是 404 的最常见原因
外部样式表加载失败时，开发者工具 Network 面板里 style.css 显示 404，90% 是路径问题。关键点：相对路径是基于 HTML 文件位置计算的，不是 CSS 文件本身的位置。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 打开 Network 面板，点击那个 404 请求，看「Initiator」列，确认是哪个 HTML 文件发起的请求
-
href="css/style.css"表示从 HTML 所在目录进入css/子目录找文件 - 不确定路径时，优先用绝对路径：
href="/assets/css/main.css"（以/开头，从网站根目录算起） - 避免写太多
../，比如href="../../../styles.css"，移动文件后极易失效
rel="stylesheet" 缺失或拼错会导致样式彻底不生效
漏写 rel="stylesheet"，或者写成 rel="style"、rel="css"，浏览器就不认为这是样式表，href 会被完全忽略，Network 里甚至可能都看不到请求。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 检查
link标签是否同时包含rel="stylesheet"和href，二者缺一不可 - 不要加过时属性，如
type="text/css"—— 现代浏览器不需要，写了也无害但没必要 - 务必用引号包裹值：
href="style.css"，而不是href=style.css（某些解析器会出错）
本地双击打开 HTML 时 CSS 不生效？别指望浏览器自动猜
本地直接双击打开 index.html，浏览器只加载该 HTML 文件本身，**不会自动识别同目录下的 .css 文件**。必须显式声明引用关系，否则样式就是空白。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确认文件结构清晰，例如：
index.html和style.css在同一文件夹下 - 确保两者都已保存（未保存的修改在浏览器中不会体现）
- 用 VS Code、Sublime Text 等编辑器时，别只改了 CSS 文件却忘了保存 HTML 里的
link标签 - CodePen 等在线编辑器能“自动整合”，是因为它们做了封装；本地开发没有这层机制，必须手动写
link
link 是否在 <head> 里、href 路径是否能在文件管理器里手动拼出来。 
