【CSS】import

Heo2024-05-14 18:43

在 CSS 中，@import 是一种用于导入外部样式表的规则。它可以将一个 CSS 文件中的样式引入到另一个 CSS 文件中，使得样式可以在多个文件中共享和重用。

CSS 的引用方式有：

外联： link 标签外部链接样式表

内联：在 head 中使用 style

嵌入：在元素的开始标记里通过 style 属性定义样式

其中，url 是要导入的外部样式表 URL 地址，可以是本地文件路径或者是网络地址。

例如，要将一个为 "styles.css" 的外部样式表导入到另一个 CSS 文件中，可以使用以下代码：

css 复制代码

<style>
@import "styles.css";
</style>

@import 规则必须放在 CSS 文件的最前面，位于其他任何 CSS 规则的前面。这样，当浏览器解析 CSS 文件时，会先加载和应用导入的样式表，然后再继续解析和应用后续的 CSS 规则。

另外，@import 还支持一些选项和参数，例如媒体查询（media query），可以根据不同的设备或屏幕尺寸导入不同的样式表。

@import 和 link 的区别：

@import 是 CSS 提供的规则，用于在 CSS 文件中导入外部样式表，位于 CSS 文件的最前面，同步加载，可能导致页面加载变慢，存在加载顺序，比如 a.css 里面包含 b.css，对于老的浏览器不支持。
link 是 HTML 的标签元素，用于引用外部资源，包括 CSS 文件，可以放在标签中任何位置，支持异步加载，不会阻塞 HTML析和其他资源的下载。当用 js 控制 dom 去改变样式的时候，只能使用 link，因为 @import 不是 dom 可以控制的。

另外，从性能优化的角度来讲，尽量要避免使用@import。

使用@import引入CSS会影响浏览器的并行下载。使用@import引用的CSS文件只有在引用它的那个CSS文件被下载、解析之后，浏览器才会知道还有另外一个CSS需要下载，这时才去下载，然后下载后开始解析、构建 Render Tree 等一系列操作。

多个@import会导致下载顺序紊乱。在IE中，@import会引发资源文件的下载顺序被打乱，即排列在@import 后面的JS文件先于@import下载，并且打乱甚至破坏@import自身的并行下载。