@规则

2024-11-27

@规则（也称为CSS指令或CSS at-rules）是一种特殊的声明，以@符号开头，用于执行不同的任务，比如应用样式到特定媒体类型、定义变量、设置字体、控制条件等。

CSS 里包含了以下 @规则：

@font-face用于设置嵌入HTML文档的字体

@font-face {
  font-family: "MyCustomFont";
  src: url("myfont.woff2") format("woff2");
}

@keyframes描述 CSS 动画的关键帧，用于指定动画名称和动画效果。

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@media 如果满足媒体查询的条件则条件规则组里的规则生效。

@media screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

@import 规则用于指定导入的外部样式表及目标媒体。该规则必须在样式表头部最先声明。并且其后的分号是必需的，如果省略了此分号，外部样式表将无法正确导入，并会生成错误信息。IE 使用 @import 无法引入超过 35 条的样式表。 @import 规则一定要先于除了 @charset 的其他任何 CSS 规则。
```
@import url("fineprint.css") print;
@import "custom.css" screen;
```
@namespace 告诉 CSS 引擎必须考虑 XML 命名空间，用于定义XML命名空间，通常用于处理带有特定命名空间的SVG文档。
```
@namespace url("http://www.w3.org/1999/xhtml");
```
@document 如果文档样式表满足给定条件则条件规则组里的规则生效。类似于@media，但用于针对特定的文档域名或URL应用样式，这个规则在大多数浏览器中不被支持。
@charset 用于定义样式表使用的字符集。它必须是样式表中的第一个元素。如果有多个 @charset 被声明，只有第一个会被使用，而且不能在HTML元素或HTML页面的

CLAYYA