概念
一个at-rule就是一个CSS语句，以 @开头，后接 标识符，最后以 ；结束
大家或多或少得都用过@规则，可能对这个概念有些陌生。
常用的@rule规则
@charset
用于定义样式表中使用的字符编码，他必须写在样式表的最开头且前面不能有别的字符。
/* @charset "<charset>"; */
@charset "UTF-8" ;
@import
用于导入外部css样式表
@import 'custom.css';
@import url("fineprint.css") print;
@namespace
用来定义使用css样式表中的xml命名空间的@规则
/* @namespace <namespace-prefix>? [ <string> | <url> ]; */
@namespace url(http://www.w3.org/1999/xhtml);
@namespace svg url(http://www.w3.org/2000/svg);
@media
用于定义在一个或多个设备类型、具体特点和环境的媒体查询来应用样式
/* @media */
@media screen and (min-width: 900px) {
h1 {color:red;font-size:14px;
}
}
@page
用于在打印文档时修改某些CSS属性。 @page规则只能修改 margin、 orphans、 widow 和 page breaks of the document，对其他属性的修改是无效的。
@keyframes
通过定义动画序列中的关键帧来控制css动画中的不步骤
@keyframes slidein {
from {
margin-left: 100%;
width: 300%;
}
to {
margin-left: 0%;
width: 100%;
}
}
@supports
用来检测规则组的规则是否生效。规则与 @media类似
@viewport
用于设置视口（viewport）的特性
@counter-style
用于定义counter的样式
@font-face
给网页指定字体文件
@doucment
@document如果满足条件组的条件，则规则生效（推延至 CSS Level 4 规范