最便捷的引入方式是用<link>标签引入外部CSS文件，但必须满足三要素：路径正确、rel="stylesheet"不遗漏、且置于<head>内；任一缺失均会导致样式失效或FOUC现象。
最便捷的引入方式是用 <link> 标签引入外部 CSS 文件，但前提是路径写对、rel="stylesheet" 不漏、且放在 <head> 里——三者缺一不可，否则页面就“没样式”。
为什么 <link rel="stylesheet" href="style.css"> 放在 <head> 外会失效
浏览器解析 HTML 是从上到下流式进行的。如果 <link> 被误塞进 <body> 底部，HTML 内容已渲染完成，样式才开始加载，就会出现“先白屏/错位，再闪一下变样”的 FOUC（Flash of Unstyled Content）现象。
-
<link>必须在<head>内，且最好紧贴<title>后面 - 哪怕只差一行，比如写在
<meta>之后但<title>之前，部分老浏览器也可能忽略它 - 某些 SSR 框架（如 Next.js）若把
<link>动态注入<body>，DevTools 看似有标签，实际不生效
href 路径写错的 3 种典型表现
控制台报 404 是最直白的提示，但很多问题藏得更深：路径看似对，却因相对基准错而加载失败。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 当前 HTML 在
/blog/post.html，href="css/style.css"实际请求的是/blog/css/style.css，不是你想象的根目录下的/css/style.css - 用
../css/style.css时，一旦 HTML 被移到子目录（比如从/index.html移到/a/b/c/index.html），路径立刻断裂 - 开发时本地能跑，部署到 Nginx 或 CDN 后 404——大概率是用了相对路径，而服务器路由没配好别名或重写规则
别碰 @import，哪怕它看起来像“CSS 里的 <link>”
@import 是 CSS 规则，不是 HTML 标签，它天然串行、阻塞、不支持预加载，现代项目里没有它的容身之地。
立即学习“前端免费学习笔记（深入）”；
- 写在
<style>块里：<style>@import "base.css";</style>—— 浏览器必须先下载并解析完这个<style>块，才能发起base.css请求，比<link>多一个 RTT - 写在 CSS 文件里：
@import url("theme.css");—— 如果该 CSS 还被<link>引入，整个链路变成“link → 解析 → import → 请求 → 解析”，极易触发 FOUC - IE6–IE8 对带
media的@import（如@import "print.css" print;）支持异常，部分声明直接被跳过
真正容易被忽略的点是：样式是否生效，不只取决于“有没有引入”，更取决于“是否在渲染前就可用”。<link> 的位置、路径、rel 属性，三者任何一个出错，都会让样式表变成“摆设”——而这种错误往往没有红色报错，只有页面看起来“不太对”。
