CSS：@规则 At-rules

@规则 At-rules

1、@charset

用于指定样式表中使用的字符编码。

要点：

• 必须是样式表中的第一个元素，前面不能有任何字符；
• 必须是双引号，紧跟一个空格字符(U+0020)，并立即以分号结束；
• 字符编码必须是IANA-registry定义的。

语法

@charset "UTF-8";
@charset "iso-8859-15";

正式的语法

@charset "<charset>";

示例： 有效和无效的字符集声明

@charset "UTF-8";       /* Set the encoding of the style sheet to Unicode UTF-8 */
@charset 'iso-8859-15'; /* Invalid, wrong quoting style used */
@charset  "UTF-8";      /* Invalid, more than one space */
 @charset "UTF-8";      /* Invalid, there is a character (a space) before the at-rule */
@charset UTF-8;         /* Invalid, the charset is not a CSS <string> */

---

2、@font-face

用于指定了用来显示文本的自定义字体；字体既可以从远程服务器加载，也可以从用户自己的计算机上安装的本地字体加载。

语法：

@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
       url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
}

常用到的为：

• font-family：指定字体族
• font-style
• font-variant
• font-weight
• src： 指定包含字体数据的资源。可以是远程字体文件位置的URL，也可以是用户计算机上字体的名称。

---

3、 @import

用于从其他样式表导入样式。

语法：

@import url; //表示要导入的资源的位置。路径可以是绝对的，也可以是相对的。

示例： 导入css

@import 'custom.css';
@import url("chrome://communicator/skin/");

---

4、@keyframes

@keyframes 通过在动画序列中定义关键帧（或路径点）的样式，来控制CSS动画序列中的中间步骤。这比 转场 transition 更能控制动画序列的中间步骤。

语法：

@keyframes slidein {
  from {
    transform: translateX(0%);
  }

  to {
    transform: translateX(100%);
  }
}

值：

标识关键帧列表的名称，必须与CSS语法中的标识符匹配。

from：表示起始偏移量为 0%

to：表示一个100%的结束偏移量。

百分比：动画序列中指定关键帧应该出现的 时间百分比。

说明：

1、如果关键帧规则没有指定动画的开始或结束状态（即 0% / from 和 100% / to），浏览器将使用元素的现有样式作为开始/结束状态。

2、在关键帧规则中不能动画的属性会被忽略，但受支持的属性仍然会被动画化。

3、如果给定的 animation-name 存在多个关键帧集，则使用解析器遇到的最后一个。

4、如果一个给定的动画时间偏移重复，则 @keyframes 规则中的所有关键帧的百分比都被用于该帧。如：

@keyframes ani-height-color {
  50% {
    height: 200px;
  }

  50% {
    background: green;
  }
}

5、用 !important 限定的关键帧中的声明将被忽略。

---

5、@media

@media 可以用于基于一个或多个媒体查询的结果应用样式表的一部分。使用它，可以指定一个媒体查询和一个CSS块，当且仅当媒体查询与正在使用内容的设备匹配时应用于文档。

语法：

/* 在代码的顶层 */
@media screen and (min-width: 900px) {
  article {
    padding: 1rem 3rem;
  }
}

/* 嵌套在另一个条件规则中 */
@supports (display: flex) {
  @media screen and (min-width: 900px) {
    article {
      display: flex;
    }
  }
}

媒体类型：媒体类型描述了设备的一般类别。除非使用not或only逻辑操作符，否则媒体类型是可选的，并暗示了all类型。

• all：适用于所有设备；
• print：用于在屏幕上以打印预览模式查看已分页的材料和文件；
• screen：主要用于屏幕。

媒体特性：媒体特性描述用户代理、输出设备或环境的特定特性。媒体特性表达式测试它们的存在或值，并且完全是可选的。每个媒体特性表达式必须用括号括起来。

• height：视口的高度；
• width：视口的宽度，包括滚动条的宽度；
• orientation：朝向：竖屏或横屏
• resolution：分辨率。

逻辑运算符

• not ：
• and ：将多个媒体特性组合成单个媒体查询，要求每个链接特性返回true才能使查询为true。
• only ：仅在整个查询匹配时应用样式。
• , ：用于将多个媒体查询组合成一个规则。逗号分隔列表中的每个查询都与其他查询分开处理。因此，如果列表中的任何一个查询为真，整个媒体语句返回真。换句话说，列表的行为类似于 逻辑或 操作符。

示例：

@media print {
  body { font-size: 10pt; }
}

@media screen {
  body { font-size: 13px; }
}

@media screen, print {
  body { line-height: 1.2; }
}

@media only screen
  and (min-width: 320px)
  and (max-width: 480px)
  and (resolution: 150dpi) {
    body { line-height: 1.4; }
}

---

参考

MDN At-rules