link 标签必须放在 head 中，否则会触发 FOUC；href 路径错误是 404 主因；rel="stylesheet" 不可省略，type="text/css" 已废弃；多个 link 按顺序加载，影响样式权重与渲染阻塞。
link 标签必须放在 head 里，否则可能触发 FOUC
浏览器解析 HTML 是从上到下流式进行的。如果把 <link rel="stylesheet" href="style.css"> 放在 里，CSS 加载完成前，页面会先以无样式状态渲染一次（Flash of Unstyled Content），文字跳动、布局闪回都是常见表现。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 始终把
<link>放在内，且尽量靠前（早于<title></title>或紧随其后） - 不要用
<script></script>动态插入<link>来“延迟加载 CSS”，这等于主动制造 FOUC - 如果真要控制加载时机（比如非关键 CSS），用
media="print" + onload或rel="preload"配合onload切换，而不是直接挂载
href 路径写错是 404 的最常见原因
外部 CSS 引入失败，90% 以上是路径问题，不是语法或服务器配置。浏览器控制台报 Failed to load resource: the server responded with a status of 404 () 就该先盯住 href 值。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用相对路径时，基准是当前 HTML 文件所在目录，不是当前 URL 路径或 JS 执行位置
-
href="css/style.css"表示 HTML 同级目录下的css/文件夹；href="../assets/style.css"表示上一级的assets/ - 开发中优先用根相对路径：
href="/css/style.css"（开头带/），避免嵌套子页时路径错乱 - 检查大小写——Linux 服务器区分
Style.css和style.css，本地 Windows 可能不报错但上线就 404
rel="stylesheet" 不能省，type="text/css" 已废弃
HTML5 中 type="text/css" 是冗余属性，现代浏览器默认按 CSS 解析 rel="stylesheet" 的 <link>。但漏掉 rel="stylesheet" 会导致样式完全不生效，且没有任何错误提示。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 必须写
rel="stylesheet"，这是唯一决定浏览器是否当作样式表加载的关键属性 - 删掉
type="text/css"，它不仅多余，还可能在某些严格模式下引发验证警告 - 别用
rel="import"或rel="prefetch"替代，它们不触发样式应用
多个 link 标签的加载顺序影响样式权重和渲染阻塞
CSS 是渲染阻塞资源，浏览器会按 <link> 出现顺序依次下载并解析。后面引入的样式规则可以覆盖前面同名选择器，但若前面的 CSS 卡住（如超时、大文件），后面的也会被阻塞。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 把重置样式（reset / normalize）、基础变量（CSS Custom Properties）放在最前
- 业务组件样式、页面专属样式往后排，确保基础结构不被覆盖破坏
- 避免在
末尾放一个巨长的vendor.css，它会拖慢首屏渲染；拆分或用media="print" + onload异步加载非关键部分 - 不要用
@import在 CSS 里再引入其他 CSS——它会串行加载，比多个<link>更慢
