CSS @import 规则

CSS @import 语法

在 CSS 中，@import 规则用于在 “一个 CSS 文件” 中导入 “另一个 CSS 样式表”，从而提高代码的复用性。

语法：

/* 方式 1 */
@import url("文件路径");

/* 方式 2 */
@import "文件路径";

说明：

我们也可以在 @import 规则后加上媒体查询（media query），这样只有当设备符合特定条件时（如宽度、屏幕类型等），才会导入该样式表。其中，多个媒体查询可以用英文逗号（,）隔开。

比如下面代码表示，如果设备的宽度小于或等于 600px，就导入 mobile.css；如果大于 600px，则导入 desktop.css。

@import url("mobile.css") screen and (max-width: 600px);
@import url("desktop.css") screen and (min-width: 601px);

@import 规则既可以在 CSS 文件中使用，也可以在 HTML 的 style 标签内使用。但需要注意的是，@import 必须位于样式表的最顶部（即所有其他样式规则之前），否则将不会生效。

注意: 在 HTML 中，推荐使用 link 标签来导入 CSS 文件，不推荐使用 @import 规则。这是因为使用 link 引入的 CSS 文件会被浏览器优先加载和解析，页面可以更快渲染。而使用 @import 导入的样式表会在页面加载完成后才开始下载，可能会导致页面闪烁，影响性能。

CSS @import 摘要

属于	CSS @规则
使用频率	低
是否继承	否
默认值	无
兼容性	查看
官方文档	查看
MDN	查看

CSS @import 示例

接下来，我们通过几个简单的例子来讲解一下 CSS @import 规则是如何使用的。

1. @import 导入通用样式

在这个例子中，我们尝试使用 @import 规则在一个主样式表 (main.css) 中导入一个通用的样式表 (base.css)。

base.css 文件内容：

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
}
h1, h2 {
    color: crimson;
    text-align: center;
}

main.css 文件内容：

@import url("base.css");

.container {
    max-width: 300px;
    margin: 0 auto;
    padding: 20px;
    background-color: lightskyblue;
}

index.html 文件内容：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <div class="container">
        <h1>绿叶网</h1>
        <p>为好教程，全力以赴。</p>
    </div>
</body>
</html>

页面效果如下图所示。

@import 示例

分析：

在 main.css 文件的顶部，我们使用 @import url("base.css"); 来将 base.css 的所有样式规则导入进来。

 这样一来，我们只需要在 index.html 中链接 main.css 这一个样式文件，就能同时应用 base.css 和 main.css 中的所有样式了。

2. @import 使用 “媒体查询” 进行有条件的导入

在下面例子中，我们尝试使用 @import 规则根据不同的媒体条件导入不同的样式表，例如为打印机设备单独导入一个样式。

print.css 文件内容：

body {
    font-family: serif;
    font-size: 12pt;
    color: #000;
}
header, nav, footer {
    display: none;
}

screen.css 文件内容：

body {
    background-color: #f0f0f0;
}
header {
    background-color: #333;
    color: #fff;
    padding: 10px;
}

main.css 文件内容：

@import "screen.css" screen;
@import "print.css" print;

index.html 文件内容：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <header>
        <h1>标题</h1>
    </header>
    <nav>导航栏</nav>
    <main>
        <p>这是正文内容。</p>
    </main>
    <footer>页脚</footer>
</body>
</html>

分析：

在 main.css 文件中，@import "screen.css" screen; 表示只会在屏幕设备上导入 screen.css。而 @import "print.css" print; 表示只会在打印时导入 print.css，用于隐藏不必要的元素和调整字体。

这样一来，我们就可以根据不同的设备类型，来应用相应的样式文件，从而实现更细粒度的控制。

注意: 虽然配合媒体查询可以让样式在特定条件下才生效，但浏览器通常仍会下载所有导入的文件。因此，为了性能考虑，我们依然建议尽量减少 @import 的使用。