CSS @规则

CSS @规则是用来控制样式表以外的一些特殊内容的工具，比如页面媒体类型、打印页面样式等。在 CSS 中，@符号用于引导将要使用的规则，可以在任何位置使用，但最好放在样式文件的开头，方便开发者查看和维护代码。

@charset

@charset规则用来定义样式表的字符集，必须出现在样式表的第一行，否则会失效。常见的字符集有UTF-8、GB2312等。

@charset "UTF-8";

@import

@import规则用来引入另一个 CSS 文件，并将其合并进当前样式表。可以在样式表中包含多个@import规则，每个规则之间用逗号分隔。但是，大量的@import规则会显著延长加载时间，因此最好只使用少量的@import规则。

@import url(style.css);

@media

@media规则用来媒体查询，这允许开发者在不同设备上定制样式表，以适应设备不同的显示屏幕大小、分辨率、颜色等属性。在一个@media规则块内，定义的样式规则只有当条件满足时才会应用。

@media (min-width: 768px) {
  /* 屏幕宽度大于等于 768px 时应用的样式规则 */
}

@font-face

@font-face规则用于自定义字体，可以在样式表中引入自己的字体文件，并给网站的标题、正文等设置自己的字体。但需要注意的是，字体文件必须以EOT、WOFF、TTF或SVG格式的其中一种为后缀名。

@font-face {
  font-family: "MyFont";
  src: url("MyFont.eot");
  src: url("MyFont.woff") format("woff"),
       url("MyFont.ttf") format("truetype"),
       url("MyFont.svg#MyFont") format("svg");
}

@page

@page规则用于定义打印页面的样式，可以控制分页、页眉、页脚等设置。该规则中涉及到的属性较多，因此需要根据实际需求来定制。

@page {
  size: 8.5in 11in;
  margin: 10%;
  border: 1px solid #ccc;
  @top {
    content: "Page Header";
  }
  @bottom {
    content: "Page Footer";
  }
}

@keyframes

@keyframes规则用于定义动画效果，可以定义动画的关键帧（开始、中间和结束状态）和持续时间等。

@keyframes myanimation {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

以上就是 CSS @规则的介绍。掌握这些规则可以帮助开发者更好地定制页面样式，为用户提供更好的体验。