CSS @import 的用法：规则

前言：

CSS `@import` 是一种用于引入外部 CSS 文件的规则。通过使用 `@import` 规则，我们可以将一个 CSS 文件导入到另一个 CSS 文件中，从而将多个 CSS 文件合并为一个。这种方式可以提高代码的可维护性和重用性，并有助于组织大型项目中的样式表。

规则：

`@import` 规则的基本语法如下：

@import url("styles.css");

在示例中，我们使用 `url()` 函数指定要导入的外部 CSS 文件的路径。路径可以是相对路径或绝对路径，也可以是一个完整的 URL。你还可以在 `url()` 函数内部使用引号包裹路径，但这不是必需的。

可以在样式表中的任何位置使用 `@import` 规则，但建议将其放在样式表的开头。多个 `@import` 规则可以按顺序出现，以导入多个外部样式表。请注意，每个 `@import` 规则都会导致额外的网络请求，因此最好将它们最小化并将多个样式表合并为一个。

示例：

假设我们有一个名为 `main.css` 的样式表，其中定义了一些基本的样式规则。我们还有另一个名为 `extra.css` 的样式表，其中定义了一些额外的样式规则。我们想将 `extra.css` 导入到 `main.css` 中。

main.css:

body {
  font-family: Arial, sans-serif;
  background-color: #f2f2f2;
}

extra.css:

h1 {
  color: #ff0000;
  text-decoration: underline;
}

main.css（导入 extra.css）：

@import url("extra.css");

/* 主样式规则继续... */

通过将 `@import` 规则放置在 `main.css` 的开头，样式规则定义在 `extra.css` 中也将适用于 `main.css` 中的元素。这样，我们可以实现在一个样式表中同时定义多个样式规则。

总结：

`@import` 是一种有用的 CSS 规则，可以将外部样式表合并为一个样式表，提高代码的可维护性和重用性。通过使用 `@import` 规则，我们可以将一个样式表中的样式规则导入到另一个样式表中，为我们的网页提供更多灵活的样式定制选项。