CSS | @文档规则

CSS（层叠样式表）是用于设计 Web 网站的一种样式语言。通过 CSS，您可以控制 HTML 和 XML 文档的外观和设计。

在 CSS 中，您可以使用 @规则来描述您的样式表。@规则通常以“@”字符为开头，后跟一些关键词。以下是一些常见的@规则及其功能：

@charset

@charset 规则定义 CSS 文件的字符集。例如，如果您的文件采用 UTF-8 字符集，则可以在文件开头添加以下代码：

@charset "UTF-8";

@import

@import 规则允许您导入其他 CSS 文件。例如，您可以像这样导入一个名为“styles.css”的 CSS 文件：

@import url("styles.css");

@media

@media 规则允许您根据设备的不同特征定义不同的样式。例如，您可以为屏幕宽度大于 768 像素的设备定义一组样式，为屏幕宽度小于 768 像素的设备定义另一组样式：

@media screen and (min-width: 768px) {
  /* 样式 */
}

@media screen and (max-width: 767px) {
  /* 样式 */
}

@font-face

@font-face 规则允许您定义自己的字体。您可以在 CSS 文件中添加以下代码：

@font-face {
  font-family: "MyFont";
  src: url("myfont.woff");
}

然后，您就可以像这样使用这个字体：

body {
  font-family: "MyFont";
}

@page

@page 规则允许您定义打印页面的样式。例如，您可以禁止打印页眉和页脚：

@page {
  margin-top: 0;
  margin-bottom: 0;
}

这样，当用户打印页面时，页眉和页脚就会被去掉。

@keyframes

@keyframes 规则允许您定义动画。例如，您可以创建一个名为“myanimation”的动画：

@keyframes myanimation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

然后，您可以将这个动画应用于元素：

.element {
  animation: myanimation 1s ease-in-out;
}

这样，元素将会在 1 秒内从完全透明变为完全不透明。

以上是一些常用的 CSS @规则。通过灵活使用这些规则，您可以编写出更具有表现力和交互性的 Web 网站。