CSS - @import 规则

CSS 的@import规则用于从其他有效的样式表中包含样式规则。此规则必须放置在样式表的开头，在所有其他@规则（除了@charset和@layer）和样式声明之前；否则它将被忽略。

语法

@import url | string  list-of-media-queries | layer-name;

属性值

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

CSS @import 规则的使用

以下代码片段显示了如何使用@import属性。

@import 规则与字符串

@import "main.css";
@import "text.css";

@import 规则与 URL

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

@import 规则与媒体查询

//import the css properties of sensor if media is print 
@import url("sensor.css") print;

//import the css properties of builder if  media is print or screen
@import url("builder.css") print, screen;

//import the css properties of general if media is screen
@import "general.css" screen;
@import url("imgpotrait.css") screen and (orientation: potrait);

@import 规则与层

// import the content of book.css into the pages layer 
@import "book.css" layer(pages);

// import the content of main.css and follow.css into an unnamed cascade layer  
@import "main.css" layer();
@import "follow.css" layer;

CSS @import 规则的示例

以下示例说明了如何使用@import规则。

@import 规则用于导入外部字体

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

示例

  
<!DOCTYPE html>
<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">
      <h2>
         CSS @import Rule
      </h2>
      <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>

@import 规则用于从外部 CSS 导入

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

示例

 
<!DOCTYPE html>
<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">
      <h2>
         CSS @import Rule
      </h2>
      <h1>
         Welcome to Tutorialspoint
      </h1>
      <p>
         This is an example to demonstrate
         the CSS @import rule.
      </p>
   </div>
</body>
</html>

支持的浏览器

属性
@import	1.0	5.5	1.0	1.0	3.5

css_properties_reference.htm

打印页面