CSS - @import 属性_CSS 菜鸟教程

CSS at-rule @import用于包含来自其他有效样式表的样式规则。

此规则必须放在样式表的开头、所有其他规则（@charset 和 @layer 除外）之前以及样式声明之前;否则将被忽略。

可能的值

url - 它可以是一个 <string>、一个 <url> 或一个 <url（）> 函数，用于指定它的位置。URL 可以是绝对的，也可以是相对的。
list-of-media-queries - 这些查询根据媒体类型定义了应用链接 URL 的 CSS 规则的条件。它由一系列以逗号分隔的媒体查询组成。
layer-name - 它表示将链接资源的内容导入到的级联层的名称。

概述

以下是使用规则时需要注意的一些要点@import：

导入源中的规则必须位于所有其他规则类型之前，但创建层的 @charset 规则和 @layer 语句除外。
@import 规则不能嵌套，因此不能在条件 AT 规则中使用。
作者可以将依赖于媒体的导入条件与@import规则一起使用，以避免检索不受支持的媒体类型的资源。
有条件导入涉及按 URL 进行媒体查询;如果缺少查询，则导入是无条件的。
@import 中的 supports（）函数有助于根据 supports（）函数检索资源，从而允许使用新的 CSS 函数，并为旧浏览器提供回退功能。
@import还可以创建或添加级联层，与级联进行交互，就像规则直接编写在 Styelsheet 中一样。
可以使用 CSSImportRule.supportsText 在 JavaScript 中获取这些条件。

语法

@import url | list-of-media-queries

以下语法演示了如何使用 <string> 和 <url（）> 函数定义 URL。

@import "main.css";
@import url("chrome://sport/run/");

以下代码中演示的 @import 规则指定了依赖于媒体的条件，必须满足这些条件才能使关联的 CSS 规则生效。

@import url("sensor.css") print;
@import url("builder.css") print, screen;
@import "general.css" screen;
@import url("imgpotrait.css") screen and (orientation: potrait);

在下面的代码中，将创建一个名为 pages 的级联层，其中包含来自导入的书籍样式表的规则。

@import "book.css" layer(pages);

在下面的代码中，pages.css 样式表和 units.css 样式表中的规则与 indexes[chapters] 规则合并在同一层中。

@import url(pages.css) layer(default);
@import url(units.css) layer(default);

@layer default {
	 	indexes[chapters] {
	 	display: block;
	 	}
}

声明后未指定名称的级联层称为未命名级联层。
这些未命名的图层在创建时指定;不能修改或扩展它们以包含其他样式，并且外部引用无法访问它们。

以下代码演示了如何创建两个不同的未命名级联层，以及如何将链接规则导入到每个层中。

@import "main.css" layer();
@import "follow.css" layer;

CSS @import - 导入外部字体样式表

在此示例中，@import 规则用于将 Google Fonts 中的外部字体样式表导入到 CSS 文件中。

<html>
<head>
<style>
	 	@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
	 	body {
	 	 	 font-family: 'Roboto', sans-serif;
	 	 	 background-color: #f0f0f0;
	 	 	 color: #333;
	 	 	 margin: 0;
	 	 	 padding: 0;
	 	}
	 	.container {
	 	 	 width: 80%;
	 	 	 margin: 0 auto;
	 	 	 padding: 25px;
	 	 	 background-color: #ffffff;
	 	 	 border-radius: 15px;
	 	 	 box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	 	}
	 	h1 {
	 	 	 font-family: 'Arial', sans-serif;
	 	 	 color: #007bff;
	 	}
	 	p {
	 	 	 font-family: 'Georgia', serif;
	 	 	 font-size: 20px;
	 	}
	 	.custom-text {
	 	 	 font-family: 'Courier New', monospace;
	 	 	 font-size: 16px;
	 	 	 font-weight: bold;
	 	 	 color: #13cf45;
	 	}
</style>
</head>
<body>
	 	<div class="container">
	 	 	 <h1>Greetings!</h1>
	 	 	 <p>This is an example to demonstrate the CSS @import rule.</p>
	 	 	 <div class="custom-text">
	 	 	 	 	Custom Font Style for this text.
	 	 	 </div>
	 	</div>
</body>
</html>

CSS @import - 从外部 CSS 导入

在以下示例中，@import 规则用于从名为 imported-styles.css 的外部 CSS 文件导入样式。

<html>
<head>
<style>
	 	@import url('imported-styles.css');
	 	 	 body {
	 	 	 font-family: Arial, sans-serif;
	 	 	 background-color: #f0f0f0;
	 	 	 margin: 0;
	 	 	 padding: 0;
	 	}
	 	.container {
	 	 	 width: 80%;
	 	 	 margin: 0 auto;
	 	 	 padding: 20px;
	 	 	 background-color: #ffffff;
	 	 	 border-radius: 5px;
	 	 	 box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	 	}
	 	h1 {
	 	 	 color: #007bff;
	 	}
	 	p {
	 	 	 color: #333;
	 	}
</style>
</head>
<body>
	 	<div class="container">
	 	 	 <h1>Welcome to Tutorialspoint</h1>
	 	 	 <p>This is an example to demonstrate the CSS @import rule.</p>
	 	</div>
</body>
</html>

<< CSS - image-rendering 属性 CSS - inline-size 属性 >>