link标签是唯一可靠、浏览器原生支持且默认阻塞渲染的外部css加载方式；必须写rel="stylesheet"才能触发css解析，漏写则标签被完全忽略，路径错误或放body中易致fouc。
link 标签是唯一可靠、浏览器原生支持且默认阻塞渲染的外部 CSS 加载方式。其他方法（如 @import、style 内嵌、JS 动态创建）要么有加载缺陷，要么不适用于生产环境。
为什么必须用 rel="stylesheet"
浏览器只认这个 rel 值来触发 CSS 解析流程。漏写或写成 rel="style"、rel="css"，标签会被完全忽略——连 404 都不会报，DevTools 的 Network 面板里都看不到请求。
-
rel="stylesheet"是硬性规范，HTML5 中不可省略 - 加了
type="text/css"没坏处，但现代浏览器已完全忽略它 - 如果用了
preload，必须配对as="style"，否则预加载无效
href 路径写错的典型表现
样式不生效但控制台无报错？大概率是路径问题。浏览器静默失败，Network 面板里显示 404 或 pending 状态。
- 相对路径（如
./css/main.css）以 HTML 文件位置为基准，不是 CSS 文件自身位置 - 根相对路径（如
/css/main.css）从域名后开始算，适合多级目录项目，避免../../套娃 - 绝对 URL（如
https://cdn.example.com/v1.2.0/theme.css）要确保 HTTPS 一致，混用 HTTP 会因混合内容被拦截 - Windows 下文件名大小写不敏感，Linux 服务器上
Style.CSS≠style.css
放在
FOUC（Flash of Unstyled Content）不是因为放错了位置，而是因为加载链路被拖慢了。
-
@import在 CSS 文件里再引入别的 CSS：强制串行加载，比link多一次网络往返 - 把
link放在底部：浏览器可能先渲染无样式的 DOM，再重绘，尤其在慢网下明显 - CSS 文件体积过大（> 100KB）或服务器响应慢：考虑拆分关键 CSS 内联 + 剩余异步加载
- CDN 缓存未命中或跨域配置缺失（如缺少
Access-Control-Allow-Origin）
媒体查询和条件加载的实际写法
别依赖 JS 判断设备再加载 CSS，link 原生支持按需加载，且更早介入渲染流程。
- 打印专用：
<link rel="stylesheet" href="print.css" media="print">—— 屏幕上完全不加载 - 响应式断点：
<link rel="stylesheet" href="mobile.css" media="screen and (max-width: 767px)"> - 暗色模式：
<link rel="stylesheet" href="dark.css" media="(prefers-color-scheme: dark)"> - 多个条件组合时，用
and连接，不能用逗号；括号必须全角英文，否则解析失败
script 的执行（除非加 async 或 defer），所以一个卡住的 link 不仅影响样式，还可能拖慢整个页面交互就绪时间。路径、rel 属性、放置位置，三者缺一不可。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
