css引入方式有哪些区别_对比link style与@import

HTML中引入CSS的常用方式是link和@import，style属内嵌不属引入；link并行加载、支持DOM操作与扩展属性，@import串行加载、功能单一且兼容性较差。

HTML中引入CSS主要有四种方式：link标签、style内嵌样式、@import规则和行内样式（inline style）。但真正常用于外部样式引入的，是 link 和 @import；而 style 标签属于内嵌，不属“引入”范畴，但它常被拿来与 link 混淆比较。下面重点对比 link、style（含内嵌CSS）与 @import 的核心区别。

加载时机与页面渲染表现

link 是 HTML 解析阶段就触发的并行下载，浏览器一边解析 HTML，一边下载并解析对应的 CSS 文件，能尽早参与渲染，避免白屏或闪屏。

• @import 是 CSS 规则，必须等所在 CSS 文件（或 块）开始解析后才发起请求，属于串行加载——比如在 main.css 里写 @import "theme.css";，则 theme.css 要等 main.css 下载完才开始加载
• 标签内的 CSS 会阻塞 HTML 解析（除非加 media="print" 等非关键媒体类型），但不会造成额外网络延迟，因为内容就在 HTML 里

语法位置与使用场景限制

link 只能出现在 HTML 的 中，是标准的 HTML 元素；@import 只能在 CSS 环境中使用——要么写在外部 CSS 文件里，要么包裹在 标签内（此时它本质仍是 CSS 语句）。

• link 支持 rel="preload"、rel="alternate stylesheet" 等扩展用途，还能定义图标、RSS、预连接等
• @import 功能单一，仅用于导入 CSS，且不能出现在 CSS 规则块内部（如不能在 .btn { ... } 里写 @import）
• 是内嵌容器，可直接写 CSS，适合小量、页面专属样式，也支持 @import（但不推荐）

兼容性与浏览器支持

link 自 HTML 2.0 起就存在，所有浏览器无条件支持；@import 是 CSS2.1 规范引入的，IE5+ 才开始识别，IE4 及更早版本完全忽略；部分旧版移动浏览器也有兼容风险。

• 标签本身兼容性极好，但若其中混用 @import，就会继承后者的兼容问题
• 现代开发中，@import 在 CSS 预处理器（如 Sass）中已被 @use / @forward 取代，原生 @import 已逐渐被弃用

DOM操作与动态控制能力

JavaScript 可以轻松创建、插入、移除 link 元素来切换主题或加载按需样式； 标签的内容也可通过 sheet.cssRules 或 textContent 动态修改。

• @import 无法通过 JS 直接添加或删除——它不是 DOM 节点，只是 CSS 解析时的一条指令
• 用 link 实现暗色模式切换、A/B 测试样式加载等，是行业通用做法；用 @import 做这类事不可行