link 标签必须写在 head 中，否则触发 FOUC；需写 rel="stylesheet"（大小写敏感），type="text/css" 已废弃；href 路径须正确且可访问；多个 link 顺序决定层叠优先级，HTTP/2 不改变该规则。
link 标签必须写在 head 里，否则可能触发 FOUC
浏览器解析 HTML 是自上而下流式渲染的。如果 <link rel="stylesheet"> 放在 里，样式表加载完成前，浏览器会先用默认样式渲染内容，等 CSS 下载并解析完才重绘——这就是 FOUC（Flash of Unstyled Content）。尤其在弱网或大样式文件下特别明显。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 始终把
<link>放在内，紧贴<title></title>后面更稳妥 - 避免用
@import在 CSS 文件里引入其他样式表，它会阻塞并串行加载，比<link>慢得多 - 不要指望把
<link>放在开头就能“差不多”，部分浏览器（如旧版 Safari）甚至会忽略 body 里的<link rel="stylesheet">
rel="stylesheet" 不能省，type="text/css" 已过时
rel 属性不是摆设。浏览器靠它识别资源类型：rel="stylesheet" 告诉浏览器“这是要立即下载、解析、应用的 CSS”，而 rel="preload" 或 rel="prefetch" 就不会触发样式应用。漏写或写错 rel，样式表就只是个被下载但被忽略的文件。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 必须写
rel="stylesheet"，拼写大小写敏感，REL="STYLESHEET"或rel='StyleSheet'都无效 -
type="text/css"在 HTML5 中已废弃，现代浏览器默认按 CSS 解析，加了反而冗余，还可能在某些严格模式下报 warning - 别用
rel="alternate stylesheet"来“引入主样式”，那是给用户手动切换主题用的，不加disabled属性也不会自动启用
href 路径出错时，浏览器静默失败，连 404 都不一定报
CSS 文件 404 时，浏览器通常不会中断页面渲染，控制台也未必显示错误（尤其在某些移动端 WebView 或旧版 IE 中）。你只看到页面没样式，却找不到源头——因为 <link> 加载失败是静默的，不像 JS 报错那样醒目。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 检查
href是否为相对路径且基准正确：根目录用/css/style.css，同级目录用style.css，上级用../reset.css；别依赖当前 URL 的路径猜测 - 打开浏览器开发者工具的 Network 面板，过滤
css，看该请求状态码是不是 200；404 或 302 重定向失败都算加载失败 - 避免用带查询参数的路径如
style.css?v=1.2却忘了服务端实际没这个文件——参数不影响匹配，但会干扰缓存和部署验证
多个 link 标签的顺序决定层叠优先级，不是文件名或路径决定的
CSS 层叠规则中，“来源顺序”（source order）指样式表在 HTML 中出现的先后位置。后加载的 <link> 里定义的相同选择器，会覆盖前面加载的——哪怕它体积小、路径短、名字叫 reset.css。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 通用重置（如 normalize.css）放最前，基础样式（base.css）其次，组件/布局（layout.css）再后，主题或覆盖样式（theme.css）放最后
- 别指望通过
!important绕过顺序问题——它解决的是声明级别冲突，不是资源加载顺序问题 - 动态插入
<link>（比如用 JS 创建）时，插入位置依然生效：插在已有<link>后面，就排在后面；插在最前，就可能被后续样式覆盖
最容易被忽略的是：HTTP/2 下多个 <link> 不再有传统“连接数限制”压力，但顺序和位置的影响一点没变。很多人优化到 HTTP/2 就以为可以随便乱放，结果样式覆盖逻辑全乱了。
