at-rule 由一个 @ 关键字和后续的一个区块组成，如果没有区块，则以分号结束
- **@chartset**：用于提示 CSS 文件使用的字符编码方式，如果被使用，必须出现在最前面
```css
@chartset 'utf-8';
```
- **@import**：用于引入一个 CSS 文件，除了 @chartset 规则不会被引入，@import 可以引入另一个文件的全部内容
```
@import 'common.css'
@import url('base.css');
```
- **@media**：媒体查询，能够对设备的类型，浏览器窗口大小进行判断。在 @media 的区块中，是普通规则列表
```css
@media print {
body { font-size: 14pt; }
}
```
- **@keyframes**：用于定义动画关键帧
```css
@keyframes move {
from { left: 0; top: 0; }
to { left: 100px; top: 100px; }
}
```
- **@fontface**：用于定义一种字体，iconfont 技术就是利用这个特性来实现的
```css
@font-face {
font-family: Gentium;
src: url(http://example.com/fonts/Gentium.woff);
}
h1 {
font-family: Gentium, serif;
}
```
- **@page**：用于页面打印的时候修改页面的 CSS 属性
```css
@page {
margin: 20px;
}
```
- **@counter-style**：用于定义列表的表现
```css
@counter-style triangle {
system: cyclic;
symbols: ‣;
suffix: ' ';
}
```
- **@support**：检查环境的特性，它与 @media 比较类似
- **@namespace**：用于跟 XML 命名空间配合的一个规则，表示内部的 CSS 选择器全部带上特定的命名空间
- **@viewport**：用于设置视口的一些特性，不过兼容性目前不是很好，多数时候被 HTML 的 meta 代替
- 其他：除了以上这些，还有目前不太推荐使用的 at 规则
- @color-profile：是 SVG1.0 引入的 CSS 特性，但是实现状况不怎么好
- @document：还没讨论清楚，被推迟到了 CSS4 中
- @font-feature-values
