CSS - @规则

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

此规则必须放置在样式表的开头，位于所有其他 at 规则之前（@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 还可以创建或添加级联层，与级联交互，就好像规则直接写在样式表中一样。

  • 这些可以使用 CSSImportRule.supportsText 在 JavaScript 中获取条件。

语法

@import url | list-of-media-queries

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

@import "main.css";
@import url("chrome://运动/跑步/");

下面代码中演示的 @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样式表中的规则合并在同一个样式表中。

@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 yxjc123.com</h1>
      <p>This is an example to demonstrate the CSS @import rule.</p>
   </div>
</body>
</html>