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 文件（或<style></style>块）开始解析后才发起请求，属于串行加载——比如在main.css里写@import "theme.css";，则theme.css要等main.css下载完才开始加载 -
<style></style>标签内的 CSS 会阻塞 HTML 解析（除非加media="print"等非关键媒体类型），但不会造成额外网络延迟，因为内容就在 HTML 里
语法位置与使用场景限制
link 只能出现在 HTML 的 中，是标准的 HTML 元素；@import 只能在 CSS 环境中使用——要么写在外部 CSS 文件里，要么包裹在 <style></style> 标签内（此时它本质仍是 CSS 语句）。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
-
link支持rel="preload"、rel="alternate stylesheet"等扩展用途，还能定义图标、RSS、预连接等 -
@import功能单一，仅用于导入 CSS，且不能出现在 CSS 规则块内部（如不能在.btn { ... }里写@import） -
<style></style>是内嵌容器，可直接写 CSS，适合小量、页面专属样式，也支持@import（但不推荐）
兼容性与浏览器支持
link 自 HTML 2.0 起就存在，所有浏览器无条件支持；@import 是 CSS2.1 规范引入的，IE5+ 才开始识别，IE4 及更早版本完全忽略；部分旧版移动浏览器也有兼容风险。
立即学习“前端免费学习笔记（深入）”；
-
<style></style>标签本身兼容性极好，但若其中混用@import，就会继承后者的兼容问题 - 现代开发中，
@import在 CSS 预处理器（如 Sass）中已被@use/@forward取代，原生@import已逐渐被弃用
DOM操作与动态控制能力
JavaScript 可以轻松创建、插入、移除 link 元素来切换主题或加载按需样式；<style></style> 标签的内容也可通过 sheet.cssRules 或 textContent 动态修改。
-
@import无法通过 JS 直接添加或删除——它不是 DOM 节点，只是 CSS 解析时的一条指令 - 用
link实现暗色模式切换、A/B 测试样式加载等，是行业通用做法；用@import做这类事不可行
