link 标签必须写在 head 中，否则因流式解析导致样式未加载即渲染，引发闪屏、布局错乱或 FOUC；rel="stylesheet" 不可省略，路径须正确（推荐根相对路径），type="text/css" 已冗余。
link 标签必须写在 head 里，不然样式可能不生效
浏览器解析 HTML 是从上到下流式进行的，<link> 如果放在 <body> 里，CSS 文件加载完成前，DOM 已经开始渲染，容易出现闪屏、布局错乱或样式未应用。哪怕页面看起来“好像也行”，实际在弱网或高延迟设备上大概率出问题。
-
<link rel="stylesheet" href="style.css">必须出现在<head>内部 - 多个
<link>按顺序加载，后加载的 CSS 规则会覆盖前面同名选择器（层叠规则） - 不要用
<script>动态插入<link>来“延迟加载样式”——这会破坏 CSS 阻塞渲染的预期行为，导致 FOUC（Flash of Unstyled Content）
href 路径写错是 404 的最常见原因
路径错误不会报 JS 错误，但控制台会出现 GET http://.../style.css 404，页面无样式却找不到明显线索。重点检查三类路径写法：
- 相对路径：比如当前 HTML 在
/pages/index.html，想引用/css/main.css，得写href="../css/main.css"，不是./css/main.css - 根相对路径（推荐）：以
/开头，如href="/css/main.css"，始终相对于站点根目录，跟 HTML 所在位置无关 - 绝对 URL：适合 CDN 或跨域资源，如
href="https://cdn.example.com/style.css"，注意协议要匹配（HTTPS 页面别引 HTTP 资源，会触发混合内容警告）
rel="stylesheet" 不能省，type="text/css" 可以删
HTML5 中 type="text/css" 是冗余的，默认就是它，写了反而多余；但 rel="stylesheet" 是强制的——没有它，浏览器根本不当这是样式表，只是个普通外部资源。
- ✅ 正确：
<link rel="stylesheet" href="theme.css"> - ❌ 错误：
<link href="theme.css">（没rel，完全无效） - ⚠️ 过时：
<link rel="stylesheet" type="text/css" href="theme.css">（type不必要）
加载时机和性能影响：preload vs prefetch vs stylesheet
普通 <link rel="stylesheet"> 会阻塞 HTML 解析和页面渲染，这是设计使然；但如果想提前加载关键 CSS（比如首屏必需），可以用 rel="preload"，但要注意它不会自动应用样式：
立即学习“前端免费学习笔记（深入）”；
-
<link rel="preload" as="style" href="critical.css">→ 提前下载，但不解析、不应用 - 必须配合
<link rel="stylesheet" href="critical.css">才真正起效（或用 JS 动态切换rel） -
rel="prefetch"是为后续页面准备的，对当前页无意义，别用来“优化首屏” - 多个 CSS 文件建议合并或使用
media属性做条件加载，比如media="print"的样式不会阻塞屏幕渲染
rel="stylesheet" + href + 放在 <head> 里的组合，其余都是干扰项或优化分支。路径写错、漏 rel、放错位置，这三样占了 90% 的引入失败案例。 
