唯一真正的外部CSS引入方式是<link rel="stylesheet">，因其支持并行下载、预加载、缓存及完整属性控制；@import和<style>内写CSS均为CSS规则级操作，非HTML资源加载机制，存在串行阻塞、兼容性差、无法预加载等问题。
外部CSS资源只有一种标准引入方式：<link rel="stylesheet">。所谓“三种方式”是常见误解，把@import和<style>内写@import误当作外部引入手段——它们本质不是HTML级的资源加载，而是CSS规则层面的导入，行为、时机、兼容性都完全不同。
为什么<link rel="stylesheet">是唯一真正的外部引入方式
浏览器解析HTML时，遇到<link rel="stylesheet" href="main.css">会立即发起HTTP请求，并行下载；它支持media、onload、disabled等属性，可被预加载器识别，也能参与HTTP缓存和CDN分发。
- 必须带
rel="stylesheet"，缺了这个，浏览器根本不当它是CSS，连解析都不会触发 -
href路径推荐用根路径（如/css/main.css），避免因HTML文件位置变动导致404 - 不要放在
<body>里：虽能生效，但会触发强制重排，且部分老浏览器（如IE6）可能忽略 - 多个
<link>按HTML中出现顺序加载，但实际解析完成时间取决于网络和文件大小，不保证执行顺序
@import不是HTML引入方式，而是CSS语法陷阱
@import只能出现在CSS文件顶部或<style>块首行，不能直接写在HTML里。它本质是串行依赖：浏览器必须先下载并解析完当前CSS，才能发起@import指向的下一个请求。
- 写成
<style>@import "theme.css";</style>看似省事，实则比<link>多一次HTTP往返，且无法被预加载 - IE6–IE8对
@import有严重bug，比如@import "print.css" print会被完全忽略 - 哪怕
@import写在<link>后面，它引用的文件也可能更晚生效，导致样式闪烁（FOUC） - 不能放在
@media内部或任何CSS规则之后，否则整条@import会被静默丢弃
<style>标签里写CSS不算“引入外部资源”
<style>是内联样式容器，里面写的任何CSS都是HTML文档的一部分，不产生额外HTTP请求，也不走缓存机制。即使你用JS动态写入@import，它依然受限于上述CSS规则约束，且无法突破<style>本身的非缓存特性。
立即学习“前端免费学习笔记（深入）”；
- 它无法复用：每个页面都要重新传输全部样式代码
- 优先级虽高于外部CSS，但调试时容易混淆来源——DevTools里显示为
<style>而非文件名 - 在Vue等框架中加
scoped属性有用，但原生HTML不识别该属性，写了等于没写 - 适合极小范围覆盖（如后台管理页临时主题切换），不适合“引入外部资源”这个目标
真正影响加载性能和维护成本的，从来不是“选哪种方式”，而是<link>是否放对位置、路径是否稳定、文件是否合理拆分。把@import当引入方式，等于拿螺丝刀当锤子用——工具没坏，只是根本不在一个维度上。
