link 标签必须写在 head 里，否则 CSS 虽下载但样式赶不上渲染，导致 FOUC；href 路径错误会 404 且无报错；rel="stylesheet" 不可省略，type="text/css" 已过时。
link 标签必须写在 head 里，否则可能白加载
浏览器解析 html 是从上到下流式进行的。如果把 <link rel="stylesheet" href="style.css"> 放在 里，css 文件虽然会下载，但样式规则往往赶不上元素渲染——页面先闪一下无样式的“裸奔态”，再重绘，用户体验差，还可能触发 fouc（flash of unstyled content）。
实操建议：
-
<link>必须放在内，且尽量靠前（比如紧跟<meta charset>后） - 不要用
@import在 CSS 里导入其他 CSS——它会阻塞并串行加载，比<link>慢一拍 - 如果要用 JS 动态加载 CSS，得监听
load事件再操作 DOM，否则容易读到未生效的计算样式
href 路径写错是 404，但浏览器不报红错
当 href 指向的 CSS 文件不存在时，开发者工具 Network 面板里能看到 404，但控制台通常不抛异常，页面也照常渲染——只是没样式。新手常以为“代码没毛病”，其实是路径错了。
常见错误现象：
-
href="css/style.css"在根目录 HTML 里能用，在/article/2024/下的 HTML 就 404（相对路径基于当前 HTML 位置） - 用了
file:///协议打开本地 HTML，但 CSS 路径含http://或反斜杠\，直接跨域或解析失败 - 服务器开了路由模式（如 Vue Router history 模式），但没配静态资源 fallback，
/user/css/style.css被当成前端路由处理了
实操建议：统一用以 / 开头的绝对路径（如 href="/static/css/style.css"），避免相对路径歧义。
立即学习“前端免费学习笔记（深入）”；
rel="stylesheet" 不能省，type="text/css" 已过时
HTML5 中 type="text/css" 是可选的，默认就是 CSS；但 rel="stylesheet" 是强制的——它告诉浏览器“这个 link 是用于应用样式的”，缺了就当普通外部资源处理，不会解析为样式表。
使用场景与参数差异：
- 要预加载 CSS 又不想立即应用？用
rel="preload" as="style"+ JS 动态挂载，但注意 preload 不等于执行 - 想按媒体条件加载（比如只在打印时生效）？加
media="print"，浏览器会跳过非匹配场景的下载 - 多个
<link>加载同个 CSS？浏览器去重，但顺序仍影响层叠权重，别依赖“覆盖”来调试
内联 style 和 import 都有明确代价
不是所有 CSS 都适合外链。但滥用内联或 @import 会带来真实问题：
- 把大段 CSS 写进
<style></style>标签：无法缓存，每次 HTML 更新都得重传全部样式 - 在 CSS 里用
@import url("base.css")：必须等主 CSS 下载解析完才发起请求，阻塞渲染链路 - 用
<style></style>+scoped（如 Vue 单文件组件）：生成属性选择器增加体积，且无法被 CSS-in-JS 工具优化
真正该内联的只有首屏关键 CSS（Critical CSS），而且得配合 media="print" 等 hack 延迟非关键样式加载——这点多数人根本没测过实际收益。
路径、位置、rel 属性这三处看着简单，但每个都卡在浏览器加载机制的关节上。改一个字母可能就从“样式正常”变成“全站白屏”，偏偏控制台还不吭声。
