前言
在前端开发中，如何优雅地将 CSS 引入 HTML 决定了页面的加载性能与维护成本。本文将带你梳理 CSS 的四种引入方式，并重点解析面试常客：link 与 @import 到底有什么区别？
一、 CSS 的引入方式
1. 行内样式 (Inline Styles)
直接在 HTML 标签的 style 属性中书写 CSS。
- 示例：
<h1 style="color:red;">Hello World</h1> - 缺点：样式与结构高度耦合，不利于复用和维护，通常仅用于 JS 动态修改特定样式。
2. 内部样式表 (Internal Style Sheet)
在 HTML内使用 <style> 标签书写 CSS。
- 场景：适用于单个页面的特殊样式，或者简单的 Demo 演示。
3. 外部样式表 (External Style Sheet)
将 CSS 存放在独立的文件中，通过以下两种方式引用：
3.1 链接式（最推荐）
使用 HTML 的 <link> 标签引用：
<link rel="stylesheet" href="style.css" />
3.2 导入式
在 CSS 或 <style> 标签中使用 @import 指令：
<style>
@import url("style.css");
</style>
二、 核心面试题：link 与 @import 的区别
这是前端面试中关于 CSS 基础的高频考点，建议收藏。
| 维度 | link 标签 | @import 指令 |
|---|---|---|
| 所属范畴 | HTML 标签。除了引入 CSS，还能定义 RSS、Rel 等。 | CSS 语法。只能用于引入 CSS 文件。 |
| 加载顺序 | 同步加载。页面加载时，CSS 与 HTML 同时加载。 | 异步/延迟加载。页面 HTML 加载完后，才会下载 CSS。 |
| 兼容性 | 无兼容性问题。属于 HTML 标准。 | 有兼容性问题。老版本浏览器（如 IE5 以下）不支持。 |
| DOM 操作 | 支持。可以通过 JS 操作 DOM 动态改变样式。 | 不支持。JS 无法直接操作 @import 引入的样式。 |
| 权重影响 | 正常层叠。 | 在部分旧版浏览器中，权重可能略低于 link。 |
三、 深度解析：为什么现在很少用 @import？
- 页面闪烁 (FOUC) ：由于
@import会等到 HTML 加载完才开始加载 CSS，这会导致页面先以“无样式”的状态显示，然后突然闪现出样式，严重影响用户体验。 - 性能瓶颈：
@import会导致浏览器无法并行下载资源。如果 A.css 里@import了 B.css，浏览器必须先下完 A 才能发现 B，增加了加载链路的长度。
💡 总结建议
在实际生产开发中，始终首选 <link> 标签引入外部样式表。它不仅性能更好，且更符合现代浏览器的并行下载策略。
