CSS中的@规则：深入了解那些你不容错过的特性

CSS中的@规则主要有以下几种：

1. @import：用于导入其他CSS文件。

@import url("style.css");

2. @media：用于根据不同的媒体类型应用不同的样式规则。

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

3. @font-face：用于定义自定义字体。

@font-face {
  font-family: "CustomFont";
  src: url("customfont.woff") format("woff");
}

4. @keyframes：用于创建动画关键帧。

@keyframes example {
  from { background-color: red; }
  to { background-color: yellow; }
}

5. @supports：用于根据特定的CSS功能支持情况来应用样式规则。

@supports (display: grid) {
  body {
    background-color: green;
  }
}

6. @charset：用于指定样式表中使用的字符编码。

@charset "UTF-8";

7. @namespace：用于指定XML命名空间。

@namespace url(http://www.w3.org/1999/xhtml);

这些是CSS中的@规则，每个都有其特定的用途和语法。