语法
@import: url | string list-of-mediaqueries | initial | inherit;
@import 规则示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document </title>
<style>
@import url('https://fonts.googleapis.com/css?family=Coiny');
@import url('https://fonts.googleapis.com/css?family=Lobster');
.p1 {
font-family: 'Coiny', cursive;
}
.p2 {
font-family: 'Lobster', cursive;
}
</style>
</head>
<body>
<h2>@import 属性示例</h2>
<p class="p1">The @import rule allows you to import a style sheet into another style sheet.</p>
<p class="p2">The @import rule also supports media queries, so you can allow the import to be media-dependent.</p>
</body>
</html>
相对 URL 和绝对 URL 的区别
@import 规则接受 <url> 或者 <string> 数据类型，以确定应导入的文件。
这可以作为绝对或者相对 URL 提供。
下面的代码示例使用相对 URL。
这意味着 URL 相对于当前样式表的位置。
这里我们不需要提供路径。
相反，我们只提供文件的名称。
@import "relative.css";
在下一个示例中，URL 仍然是相对的，尽管我们提供了一些路径信息：
@import "../css/relative.css";
如我们所见，以下代码示例包含带有域名的完整路径。
这意味着 URL 是绝对的。
@import "http://www.examples.fr/css/absolute.css";
CSS @import 规则属性值说明
| 值 | 描述 |
|---|---|
| url | 一个<URL>;或者<字符串>显示要导入的资源的位置。 URL可以是相对的或者绝对的。 |
| string list-of-mediaqueries | 逗号分隔的媒体列表查询调节链接URL中定义CSS规则的应用程序。 |
| initial | 使属性使用其默认值。 |
| inherit | 从父母元素继承属性。 |
CSS @import at-rule 用于从其他样式表导入样式规则并支持媒体查询。
@import 关键字必须后跟要包含的样式表的 URI。
还允许使用字符串。
它必须在文档的顶部但在@charset 规则之后。
@import 属性不能在条件组规则中使用。
| 初始值 | - |
|---|---|
| 应用于 | - |
| 继承 | 无效 |
| 可动画的 | 无效 |
| 版本 | CSS2. |
| DOM 语法 | Object.Style。@ import =“URL”; |
媒体查询
@import 规则支持媒体查询。
这意味着导入可以依赖于媒体。
在下面的代码示例中，我们只能在打印媒体时导入样式表。
@import "mediaquerry.css" print;
日期：2020-06-02 22:14:35 来源：oir作者：oir