在 CSS 中包含两种语法规则：
普通规则：由选择器、属性和值构成，在之前的学习中我们主要使用的就是这种规则；
@规则：以@开头后面跟随一个关键字的形式构成，也被称为“AT规则”，根据使用方法的不同又可以分为“常规规则”与“嵌套规则”两种。
我们主要来介绍一下 CSS 中的 @ 规则。
1. 常规规则
所谓“常规规则”指的是语法类似下面的规则：
@[KEYWORD](RULE);
（1）@charset
@charset 用来设置 CSS 文件使用的字符编码，语法格式如下：
@charset<charset>;
其中 <charset> 为具体的字符编码，默认值为“utf-8”。
在使用时需要注意以下几点：
①如果设置 @charset 的话，那么它必须出现在 CSS 文件的最前面，@charset 之前不能出现任何字符；
②字符编码需要使用双引号包裹起来；
③@规则名称（@charset）与具体的字符编码之间需要使用一个空格分隔；
④规则后面的分号不能省略；
⑤如果设置多个 @charset，那么只有第一个声明有效；
⑥不能在 HTML 元素或者 <style> 标签中使用 @charset；
⑦如果以不同的方式定义了多种字符编码规则，它们的优先级顺序如下：
● HTML 文件开头的字符编码声明；
●HTTP 请求头中的字符编码声明；
●CSS 文件中使用 @charset 定义的字符编码声明；
●<link> 标签中 charset 属性设置的字符编码声明（HTML5 中已废弃）。
下面示例中演示了 @charset 的使用，以及几个错误的示例：
/*设置CSS的编码格式为UnicodeUTF-8*/@charsetUTF-8;@charsetutf-8;/*大小写不敏感*//*错误演示*/@charset'iso-8859-15';/*无效的,使用了错误的引号*/@charset'UTF-8';/*无效的,使用了错误的引号*/@charsetUTF-8;/*无效的,@charset与字符编码之间多用了一个空格*/@charsetUTF-8;/*无效的,@规则之前多了一个空格*/@charsetUTF-8;/*无效的,字符编码需要使用双引号包裹*/
（2）@import
@import 用来向当前 CSS 样式文件中导入其它样式文件。通过 @import 可以引入其他样式表文件中除 @charset 以外的所有内容，另外 @import 也必须放在样式文件的最前面。@import 的语法格式如下：
@import<url><media_query_list>
其中，<url> 为使用绝对或相对路径指定的要导入的外部样式表文件路径，也可以使用 url() 函数来指定文件路径；<media_query_list> 为可选参数，用来指定媒体查询的条件，多个条件之间使用逗号,分隔。
在实际项目中不建议过多的使用 @import，因为它会造成很多额外的请求，阻塞其它文件的加载。
在使用 @import 时，还需要注意以下几点：
●@import 必须在样式表文件的开头最先声明，并且声明的末尾必须使用分号结尾，如果省略了结尾的分号，可能会导致外部样式表无法正确导入；
●在 IE 浏览器使用 @import 最多只能引入 35 条样式表。
下面示例中演示了 @import 的使用：
@importurl(global.css);@importurl(global.css);@importglobal.css;@importurl(fineprint.css)print;@importurl(bluish.css)projection,tv;@import'custom.css';@importurl(chrome://communicator/skin/);@importcommon.cssscreen,projection;@importurl('landscape.css')screenand(orientation:landscape);以上几种定义方式都是有效的，当使用 url() 来设置样式表文件的路径时，包裹路径的引号可有可无；当直接使用具体路径来设置样式表文件的路径时，包裹路径的引号则必须保留。
（3）@namespace
@namespace 用来定义 CSS 样式表中 XML 命名空间的 @规则，可以为当前样式文件内的所有选择器都设置指定的命名空间。@namespace 通常用来处理包含多个命名空间的文档，比如 HTML5 里内联的 SVG、MathML 或者混合多个词汇表的 XML。
@namespace 必须定义在所有 @charset 和 @import 的之后，并且在样式表中要位于其他任何样式声明之前。@namespace 可以用来定义默认命名空间，当指定默认命名空间后，所有的通用选择器和类选择器（但不包括属性选择器）都只会应用在这个命名空间的元素中。@namespace 也可以用于定义命名空间前缀，当一个通用、类、属性选择器前面有命名空间前缀修饰时，这个选择器将只匹配那些命名空间与元素名或属性匹配的元素。
下面示例中演示了 @namespace 的使用：
/*默认命名空间*/@namespaceurl(XML-namespace-URL);@namespaceXML-namespace-URL;/*命名空间前缀*/@namespaceprefixurl(XML-namespace-URL);@namespaceprefixXML-namespace-URL;
2. 嵌套规则
所谓“嵌套规则”指的就是在 @规则后面需要跟随一个花括号{ }，其中包含了一些其它的规则声明，类似于下面这样：
@[KEYWORD]{/*嵌套语句*/}（1）@media
@media 用来根据一个或多个媒体查询的结果来应用样式表的某一部分（花括号中的样式信息），使用 @media 您可以指定一组媒体查询和一个 CSS 样式块，当且仅当媒体查询与正在使用的设备匹配时，指定的 CSS 样式才会应用于文档。
媒体查询是用于判断设备信息的一组条件，如设备的宽高值，宽高比，颜色，分辨率等，当条件匹配时，才会执行其内嵌套的样式信息。
@media 可以放置在样式表中的任意位置，也可以放置于其它 @规则中，示例代码如下：
@mediaalland(min-width:1280px){/*宽度大于1280*/}@media(-webkit-min-device-pixel-ratio:1.5),(min-resolution:2dppx){/*Retina屏幕*/}@mediaprint{/*打印*/}@media screen,screen9{/*IE7,IE8*/}@mediascreen9{/*IE7*/}（2）@page
@page 用于在打印文档时修改某些 CSS 属性，需要注意的是，使用 @page 您只能修改部分 CSS 属性，例如外间距属性 margin，打印相关的 orphans、widows 属性，以及 page-break-* 等属性，其他的 CSS 属性会被忽略。
/*表示打印时第一页的上、左外边距均为50%*/@page:first{margin-left:50%;margin-top:50%;}（3）@supports
@supports 用于检查浏览器是否支持某个 CSS 特性，也被称为“特性查询”，该规则的语法结构如下：
@supports(rule)[operator(rule)]*{sRules};其中，rule 为某个具体的 CSS 样式，必须使用括号包裹；operator 的可选值为 or、and、not，通过 operator 参数可以指定多条 CSS 样式。
@supports 既可以在样式文件的顶部定义，也可以在其它嵌套规则内部定义。但是 @supports 目前还在实验阶段，在使用时要先确定浏览器是否支持。
下面示例中演示了 @supports 的使用：
/*当浏览器支持display:grid属性时要使用的CSS样式*/@supports(display:grid){div{display:grid;}}/*当浏览器不支持display:grid属性时要使用的CSS样式*/@supportsnot(display:grid){div{float:right;}}/*同时检查多个条件*/@supports(display:flex)and(-webkit-appearance:checkbox){.module{display:flex;}}（4） @font-face
@font-face 用于从远程服务器或者用户本地加载指定的字体，语法格式如下：
@font-face{font-family:<identifier>;src:<url>[format(<string>)][,<url>[format(<string>)]]*;<font>;}参数说明如下：
●<identifier>：字体名称；
●<url>：使用 url()（远程字体）或者 local()（本地字体）来指定字体的存放路径，可以是相对路径也可以是绝对路径；
●<string>：用来指定自定义字体的格式，例如以下几种类型 truetype、opentype、embedded-opentype、svg 等；
●<font>：定义字体相关样式。
提示：@font-face 可以放在 css 样式表的顶部，也可以放在其它嵌套规则中。如果同时使用 local() 函数和 url() 函数加载字体，则会优先加载 local() 函数中定义的本地字体，如果没有找到则会加载 url() 函数中定义的远程字体。
下面示例中演示了 @font-face 的使用：
/*定义@font-face规则*/@font-face{/*指定字体名称*/font-family:OpenSans;/*指定字体文件的路径*/src:url(/fonts/OpenSans-Regular-webfont.woff2)format(woff2),url(/fonts/OpenSans-Regular-webfont.woff)format(woff);}/*字体的应用*/p{font-family:OpenSans;}（5）@keyframes
@keyframes 用来定义 CSS3 中 animation 动画关键帧（或 waypoints）的样式，以此来控制动画序列中的中间步骤。定义该规则后，需要通过 animation-name 属性来使用。关键帧序列是由百分比来标识命名的，起始状态和结束状态分别为 from 和 to 代表 0% 和 100% 。
@keyframes 的语法格式如下：
@keyframes<identifier>{<keyframes-blocks>}其中 <identifier> 用来定义动画名称；<keyframes-blocks> 用来定义动画在每个阶段的样式，即帧动画。
下面示例中演示了 @keyframes 的使用：
/*声明*/@keyframesslidein{from{margin-left:100%;width:300%;}to{margin-left:0%;width:100%;}}@keyframesslideout{0%{top:0;}50%{top:30px;}100%{top:60px;}}/*应用*/p{animation-name:slidein;animation-duration:4s;}div{animation-name:slideout;animation-duration:4s;}（6）@document
@document 用来根据文档的 URL 限制文档中样式的作用范围，通过该属性可以为指定用户定义专属的样式。目前 @document 还在实验阶段，具体标准会在 CSS4 中确定。
@document 中的可用函数如下所示：
●url()：匹配整个 URL；
●url-prefix()：匹配文档的 URL 是否以参数指定的值开头；
●domain()：匹配文档的域名是否为参数中指定的域名或者为它的子域名；
●regexp()：匹配文档的 URL 是否和参数中指定的正则表达式匹配，该表达式必须匹配整个 URL。
提示：提供给 url()、url-prefix() 和 domain() 函数的参数可以不使用引号包裹，但提供给 regexp() 函数的参数必须使用引号包裹起来。
下面示例中演示了 @document 的使用：
@documenturl(http://www.weixueyuan.net/),url-prefix(http://www.weixueyuan.net/Style/),domain(weixueyuan.net),regexp(https:.*){/*该条CSS规则会应用在下面的网页:+URL为http://www.weixueyuan.net/的页面.+任何URL以http://www.weixueyuan.net/Style/开头的网页+域名weixueyuan.net下的所有网页+任何URL以https:开头的网页*//*定义样式*/body{color:purple;background:yellow;}