@import 有什么作用？如何使用？ ​

题干 ​

• @import

题解 ​

@import 是一个 CSS 的规则，它的作用是从其他的有效的样式表中导入样式规则。@import 规则必须定义在样式表的顶部，除了 @charset 和 @layer 之外，它必须在其他任何规则和样式声明之前，否则它会被忽略。@import 规则也支持媒体查询，所以你可以根据不同的媒体类型来决定是否导入相应的样式表。

@import 的语法如下：

@import url | string list-of-mediaqueries;

其中：

• url | string 是一个字符串、一个 URL 或者一个 url () 函数，表示要导入的资源的位置。URL 可以是绝对的或者相对的。
• list-of-mediaqueries 是一个逗号分隔的媒体查询列表，它指定了导入样式表的媒体依赖条件。如果浏览器不支持这些查询中的任何一个，它就不会加载相应的资源。

例如：

/* 导入 navigation.css 样式表 */
@import "navigation.css";

/* 导入 printstyle.css 样式表，只在打印媒体时生效 */
@import "printstyle.css" print;

/* 导入 mobstyle.css 样式表，只在屏幕媒体并且视口最大为 768 像素时生效 */
@import "mobstyle.css" screen and (max-width: 768px);

@import 的优点是可以将 CSS 代码分割成多个文件，方便组织和管理，也可以根据不同的条件来选择性地加载样式表。 @import 的缺点是它会增加额外的文件请求，可能会影响网页的加载速度和渲染性能。 而且它会等待页面全部下载完毕再被加载，所以可能会出现闪烁或者样式错乱的情况。

应谨慎地使用 @import 规则，尽量减少导入文件的数量和大小，避免影响用户体验。

相关 ​

CSS 加载方式有几种？

@charset、@layer 有什么作用？

贡献者 ​

isboyjc