link标签引入CSS的关键是rel必须为"stylesheet"且href路径合法并返回text/css类型，否则样式不生效；它不支持async/defer，应避免@import而用多个link并行加载。
link 标签引入 CSS 文件，关键不是“能不能加”，而是 rel 和 href 是否合法、是否在正确时机被浏览器识别。错一个属性，CSS 就可能不加载、不生效，甚至触发阻塞或 MIME 类型错误。
rel="stylesheet" 是硬性要求，不是可选项
浏览器只认 rel="stylesheet" 才会把 link 当作样式资源加载并应用。其他值比如 rel="style"、rel="css" 或漏写 rel，都会让标签被忽略——页面无报错，但样式完全不生效。
常见误写：
-
<link href="main.css">（缺rel）→ 浏览器当普通链接处理 -
<link rel="import" href="main.css">（已废弃且不支持 CSS 加载）→ 控制台警告，无样式 -
<link rel="alternate stylesheet" href="theme.css">（这是可切换的备用样式，不会默认启用）→ 需 JS 手动激活
href 路径必须可解析，且返回 Content-Type: text/css
路径写错、服务器没配 MIME 类型，都会导致 CSS 不生效。浏览器控制台 Network 标签里能看到 main.css 返回 404 或状态码 200 但 Content-Type 是 text/plain 或 application/octet-stream，这时样式一定不加载。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 用相对路径时，以 HTML 文件所在位置为基准，不是以 CSS 文件位置；
href="css/main.css"表示 HTML 同级目录下有个css/文件夹 - 避免使用
file://协议直接双击打开 HTML：本地文件系统不走 HTTP，多数浏览器会拒绝加载外部 CSS（CORS 策略或 MIME 限制） - 开发阶段优先用本地服务器（如
python3 -m http.server或 VS Code Live Server），确保响应头含Content-Type: text/css
放在 <head> 里，但不要盲目 defer 或 async
link 标签本身不支持 async 或 defer 属性——这两个只对 script 有效。强行加上不会报错，但毫无作用。
想控制 CSS 加载时机，可用：
-
media属性做条件加载：<link rel="stylesheet" href="print.css" media="print">，只在打印时加载 -
onload事件监听加载完成：<link rel="stylesheet" href="main.css" onload="console.log('CSS loaded')"> - 动态创建：
const link = document.createElement('link'); link.rel = 'stylesheet'; link.href = 'main.css'; document.head.append(link);，适合按需注入
避免 @import 替代 link，尤其在 production 环境
@import 写在 CSS 文件里，会导致串行加载、阻塞渲染、无法并行下载——比 link 多一轮 HTTP 请求，且无法被 preload 或预连接优化。
典型陷阱：
- 在
style.css里写@import url("reset.css");→ 浏览器先下载style.css，再解析出@import，再发请求取reset.css - 多个
@import嵌套 → 加载链变长，首屏时间明显恶化 - 部分旧版 iOS Safari 对
@import支持不稳定，偶发空白样式
真正需要拆分样式时，用多个 <link rel="stylesheet"> 并行加载更可靠；压缩合并则交给构建工具（如 PostCSS、Webpack），别靠 @import。
