CSS @规则(At-rules)系列详解

___@import规则使用方法

本文目录：

零、时光宝盒

一、@import规则定义和用法

二、CSS @import语法

2.1、语法格式

2.2、常见形式

2.3、语法说明

三、@import使用方法例子

3.1、导入 CSS 规则

3.2、根据媒体查询条件导入 CSS 规则

3.2.1、只在媒体为 print 时导入 "printstyle.css" 样式表

3.2.2、只在媒体为 screen 时导入 "screenstyle.css" 样式表

3.2.3、在媒体为 print 和 screen 时导入 "printscreenstyle.css" 样式表

3.2.4、仅在横向屏幕设备上加载 landscape.css 样式表

3.2.5、只在媒体为 screen 且屏幕窗口最大宽度800像素时导入 "styles.css" 样式表

3.3、根据功能支持条件导入 CSS 规则

3.3.1、如何导入使用网格的布局

3.3.2、 @import导入，取决于 子代组合器函数

3.4、将 CSS 规则导入层叠层

3.4.1、创建了一个名为 utilities 的层叠层，它将包含来自导入的样式表 theme 的规则。

3.4.2、样式表中的规则在同一层中进行层叠

3.5、创建两个独立的无名层叠层并将链接规则分别导入到每个层叠层

3.6、错误使用举例

3.6.1、@import at-rule在它无效的样式之后声明，因此它被忽略

3.6.2、@import 规则不是一个 嵌套语句。因此，它不能在 条件组 at-rule 中使用。

 零、时光宝盒

（https://blog.csdn.net/weixin_69553582  逆境清醒）

　　补充今天凌晨写的那篇《CSS @规则(At-rules)系列详解___@font-face规则使用方法》，每个人都有权选择自己想要的人生路。特别是在非正常环境下，我能理解那些困境下为了能够自保而选择。。。的人，我没有怪罪过他们。

　　在“恶”因为掌握着各种高新科技技术占据着绝对控制局面下，我们普通的凡人真的很无助，毫无反抗之力（我们没有任何证据，只会被别人当成疯子）。我看着他（她）们被高科技脑意识操控下去伤害对他（她）们最好的人，被各种愚弄，还把那些别人灌入的操控意识当成自己的想法，自己还想办法证明那些意识是正确的是他自己想要的，于是，那些智者疑邻的场面一次次出现，看什么都像那些操控意识里布局的那样。

　　亲者痛，仇者快，谁开心？每每看穿了这些（不是我个人的事情），我都无助到想哭。

　　那些坏人势力用各种打击方法，毁掉你人生乐趣，操控你关心的人一次次去伤害你，给你制造各种麻烦和疾病，全方面从身体上生理上心理上打击一个人，而且精心设局孤立你，这种处境下，突然病故，被逼疯，被逼到宁愿结束自己生命的有多少人？而能看清这一切，知道到底发生什么的又有多少人？

　　我选择了善良，我被打击，我知道这种处境的苦。我没有权力要求任何人选择和我一样，所以，我能理解那些看到我。。。选择离开的人。我知道他（她）们也正经历着很多烦心事，也许已经忙得焦头烂额，没有精力去管别人。我很普通，从小到大都是可有可无的存在。前几天，我突然想知道我到底算什么，就问我妈：“妈，你知道我喜欢吃什么吗？”我妈回答：“我为什么要知道你喜欢什么。”是啊，我不重要，所以没必要知道。但我却知道爸爸喜欢吃什么，妈喜欢吃什么不吃什么，也知道一些哥哥喜欢的，包括嫂子，因为我心里有他她们，他们是我家里人。

　　可正因为如此，被备受打击困境下，我更加会选择“善”，是不需要积功德全凭初心而为的善。

　　我希望你们也能选择从心，是那颗原本属于自己的心，而不是被迷惑操控下的非本心。

   逆境清醒

2024.10.13

一、@import规则定义和用法

　　@import CSS at-rule 用于从其他有效的样式表导入样式规则，用于引入外部样式表，例如另一个CSS文件。CSS中的@import规则它允许将样式表分成多个文件，使代码更具可维护性和可复用性。

　　@import规则的作用是将所导入的样式表的规则合并到当前样式表中。例如，如果主样式表中定义了一个类，而被导入的样式表中也定义了相同的类，那么导入后的样式表中将包含两个类的规则。

　　@import规则必须位于CSS文件的顶部（开头），并且必须放在所有其他规则之前。可以导入多个样式表，每个样式表一行。如果导入的是相对路径的样式表，则相对路径是相对于当前样式表的位置。

它的形式如下：

@import url("styles.css");

其中，`url("styles.css")`指定了要引入的外部样式表的文件路径。

可以在一个CSS文件中使用多个@import规则，每个规则引入一个外部样式表。例如：

@import url("reset.css");
@import url("layout.css");
@import url("theme.css");

　　注意，使用@import规则引入的样式表会在页面加载时下载，这可能会导致页面加载速度较慢。

　　另外，@import规则只能引入CSS样式表文件，不能引入其他类型的文件（例如JavaScript文件）。

　　前端开发中常使用标签来引入外部样式表，因为标签的加载方式更加高效，可以并行下载多个样式表，提高页面加载性能。因此，可以按自己实际情况使用标签而非@import规则来引入外部样式表。

在使用@import时需要注意以下几点：

• 1、 @import规则必须出现在样式表的开头，即：必须位于文档顶部（在任何其他 at-rule（除了 @charset 和 @layer）和样式声明之前，否则将被忽略）。
• 2、@import导入的样式表需要通过HTTP请求加载，因此会增加页面的加载时间；
• 3、@import规则只能导入样式表，不能导入其他类型的文件；
• 4、@import 规则允许您将样式表导入另一张样式表中。
• 5、@import 规则还支持媒体查询，因此可以允许依赖媒体的导入。

二、CSS @import语法

2.1、语法格式

CSS @import语法：
 
@import = 
  @import [  |  ] [ layer | layer(  ) ]?  ;  
 

= 
   |
   

= 
  [ '.' ]*  

= 
  [ supports( [ | ] ) ]? ?  

= 
  url( * )  |
                       

= 
  src( * )  

= 
  not                            |
  [ and ]*  |
  [ or ]*   

= 
  ( )  |
         |
         

= 
   

= 
  [ ? ) ]  |
  [ ( ? ) ]                 

= 
  ( )  

2.2、常见形式

常见形式：
@import url;
@import url layer;
@import url layer(layer-name);
@import url layer(layer-name) supports(supports-condition);
@import url layer(layer-name) supports(supports-condition) list-of-media-queries;
@import url layer(layer-name) list-of-media-queries;
@import url supports(supports-condition);
@import url supports(supports-condition) list-of-media-queries;
@import url list-of-media-queries;

2.3、语法说明

　　导入的规则必须在所有其他类型的规则之前，除了 @charset 规则和创建层的 @layer 语句。

　　为了使 用户代理 避免检索不支持媒体类型的资源，代码编写时，可以指定媒体相关的导入条件。这些条件导入在 URL 后指定用逗号分隔的 媒体查询。在没有媒体查询的情况下，导入不依赖于使用的媒体。为list-of-media-queries 指定all具有相同的效果。

　　类似地，用户代理可以在@import at-rule 中使用supports() 函数，仅在特定功能集受支持（或不受支持）时才获取资源。这使作者能够利用最近引入的 CSS 功能，同时为旧版本的浏览器提供优雅的回退。请注意，可以在 JavaScript 中使用 CSSImportRule.supportsText 获取@import at-rule 的supports() 函数中的条件。

　　@import 规则也可以用于通过从链接资源导入规则来创建 层叠层。 规则也可以导入到现有的层叠层中。为此，@import 使用 layer 关键字或 layer() 函数。来自导入样式表的样式规则中的声明将与它们在导入点直接写入样式表一样，与层叠交互。

三、@import使用方法例子

3.1、导入 CSS 规则

把 "njqxstyles.css" 样式表导入当前样式表中：

@import "njqxstyles.css"; /* 使用字符串 */
或者
@import url("njqxstyles.css"); /* 使用 url */

以上两个示例展示了如何将 url 指定为 和 url() 函数。

3.2、根据媒体查询条件导入 CSS 规则

3.2.1、只在媒体为 print 时导入 "printstyle.css" 样式表

/* 只在媒体为 print 时导入 "printstyle.css" 样式表*/
@import url("printstyle.css") print;
或
@import "printstyle.css" print;

3.2.2、只在媒体为 screen 时导入 "screenstyle.css" 样式表

/* 只在媒体为 screen 时导入 "screenstyle.css" 样式表*/
@import "screenstyle.css" screen;

3.2.3、在媒体为 print 和 screen 时导入 "printscreenstyle.css" 样式表

/* 在媒体为 print 和 screen 时导入 "printscreenstyle.css" 样式表*/
@import url("printscreenstyle.css") print, screen;

3.2.4、仅在横向屏幕设备上加载 landscape.css 样式表

/* 仅在横向屏幕设备上加载 landscape.css 样式表。 */
@import url("landscape.css") screen and (orientation: landscape);

上面示例中的 @import 规则展示了媒体相关条件，这些条件必须为真才能应用链接的 CSS 规则。

3.2.5、只在媒体为 screen 且屏幕窗口最大宽度800像素时导入 "styles.css" 样式表

/* 只在媒体为 screen 且屏幕窗口最大宽度800像素时导入 "styles.css" 样式表 */
 
@import "styles.css" screen and (max-width: 800px);

3.3、根据功能支持条件导入 CSS 规则

3.3.1、如何导入使用网格的布局

下面的示例展示了使用简单声明语法支持条件。

/* @import 规则说明了如何导入使用网格的布局（如果支持 display: grid），否则导入使用 display: flex 的 CSS。*/
 
@import url("gridy.css") supports(display: grid) screen and (max-width: 400px);
@import url("flexy.css") supports((not (display: grid)) and (display: flex))
  screen and (max-width: 400px);

　　上面的 @import 规则说明了如何导入使用网格的布局（如果支持 display: grid），否则导入使用 display: flex 的 CSS。

　　虽然只能有一个 supports() 语句，但可以将任意数量的功能检查与 not、and 和 or 结合使用。

　　但是，在混合使用时，必须使用括号定义优先级，例如 supports((..) or (..) and not (..)) 是无效的，但 supports((..) or ((..) and (not (..)))) 是有效的。

　　如果只有一个声明，则无需将其包装在额外的括号中：这在上面的第一个示例中有所体现。

　　您也可以在 supports() 中指定 CSS 函数，如果它们受支持并且可以在用户代理上评估，则它将评估为 true。

3.3.2、 @import导入，取决于 子代组合器函数

例如，下面的代码展示了一个 @import，它取决于 子代组合器 (selector()) 和 font-tech() 函数。

/* 展示了一个 @import，它取决于 子代组合器 (selector()) 和 font-tech() 函数*/
 
@import url("whatever.css")
supports((selector(h2 > p)) and (font-tech(color-COLRv1)));

3.4、将 CSS 规则导入层叠层

3.4.1、创建了一个名为 utilities 的层叠层，它将包含来自导入的样式表 theme 的规则。

/* 创建了一个名为 utilities 的层叠层，它将包含来自导入的样式表 theme 的规则 */
 
@import "theme.css" layer(utilities);

3.4.2、样式表中的规则在同一层中进行层叠

headings.css 和 links.css 样式表中的规则与 audio[controls] 规则在同一层中进行层叠。

/* headings.css 和 links.css 样式表中的规则与 audio[controls] 规则在同一层中进行层叠。*/
@import url(headings.css) layer(default);
@import url(links.css) layer(default);
 
@layer default {
  audio[controls] {
    display: block;
  }
}

3.5、创建两个独立的无名层叠层并将链接规则分别导入到每个层叠层

@import "theme.css" layer();
@import "style.css" layer;

　　这是一个创建两个独立的无名层叠层并将链接规则分别导入到每个层叠层的示例。没有声明名称的层叠层是无名层叠层。无名层叠层在创建时被最终确定：它们不提供任何重新排列或添加样式的方法，也不能从外部引用。
 

3.6、错误使用举例

3.6.1、@import at-rule在它无效的样式之后声明，因此它被忽略

以下是错误的声明：
 
* {
  margin: 0;
  padding: 0;
}
/* more styles */
@import url("my-imported-styles.css");
 
由于@import at-rule 在它无效的样式之后声明，因此它被忽略。

正确的使用方法：
 
@import url("my-imported-styles.css");
* {
  margin: 0;
  padding: 0;
}
/* more styles */

3.6.2、@import 规则不是一个 嵌套语句。因此，它不能在 条件组 at-rule 中使用。

举个例子来说明@import规则不能在条件组at-rule中使用的情况：

假设我们有两个CSS文件：styles.css和media-queries.css。

styles.css中包含了一些通用的样式规则：

body {
  font-size: 16px;
  color: #333;
}

而media-queries.css中包含了一些针对不同设备的特定样式规则：

@media screen and (max-width: 600px) {
  body {
    font-size: 14px;
  }
}

现在，如果我们想要在styles.css中引入media-queries.css，我们可能会尝试使用@import规则，如下所示：

@import "media-queries.css";

然而，这种做法是错误的，因为@import规则不能在条件组at-rule中使用。

条件组at-rule是指在@media、@supports和@document等规则中定义的条件表达式。

正确的做法应该是在HTML文件中使用link标签来引入CSS文件：

.css">
.css" media="screen and (max-width: 600px)">

通过link标签引入CSS文件，可以将通用样式和特定样式分开，保持代码的可维护性和可读性。

          推荐阅读：

CSS @规则(At-rules)索引目录