一个 at-rule 是一个CSS 语句，以'@'符号开头,后跟一个标识符，并包括直到下一个';'的所有内容,或下一个CSS块，以先到者为准。
一、at-rules规则归类
| 规则 | 类型 | 作用 | 备注 |
|---|---|---|---|
| 常规规则 | 定义样式表使用的字符集 | http head中<meta charset="utf-8">将覆盖该内容 | |
| 常规规则 | 从其他样式表导入样式规则 | 导入的规则（不导入@charset）优先于其他规则 | |
| 常规规则 | |||
| 嵌套规则 | 根据媒体类型进行响应式布局 | ||
| 嵌套规则 | 打印文档的css属性 | ||
| 嵌套规则 | 自定义字体 | ||
| 嵌套规则 | 声明CSS3 animation动画关键帧 | ||
| 嵌套规则 | 是否支持某CSS属性声明 | ||
| 嵌套规则 | 指定适用于特定页面的样式/为用户定义的样式表 |
二、at-rules规则详解
1.常用规则
接受以下常用语法
@[KEYWORD] (RULE);复制代码
1.@charset
@charset "UTF-8";复制代码
2.@import
@import 'global.css';复制代码
3.@namespace
不懂怎么用
/* Namespace for XHTML */@namespace url(http://www.w3.org/1999/xhtml);/* Namespace for SVG embedded in XHTML */@namespace svg url(http://www.w3.org/2000/svg);复制代码
2.嵌套规则
所有的嵌套规则都可以嵌套进条件规则中
@[KEYWORD] { /* Nested Statements */}复制代码 4.@media
作用 根据用户媒体类型从而进行响应式布局 方法 @media@规则由一个或多个媒体查询组成，每个媒体查询包含一个可选的媒体类型和若干媒体特性。多个查询可通过使用逻辑运算符以多种方式组合起来，且对大小写敏感。
仅当媒体查询计算为真时，即，当指定的媒体类型与正在显示文档的设备的类型匹配并且所有媒体特征表达式计算为真时，才应用相应的样式。涉及未知媒体类型的查询总是错误的。
/*以下示例为当前屏幕为彩色屏幕，且最大宽度为800px时命中该样式，即用此方法检测当前屏幕是否为手机屏幕*/@media screen and (max-width: 800px) { bottom: -25px;}复制代码 附录 媒体类型描述设备的一般类别。除非使用not或only逻辑运算符，否则媒体类型是可选的，并且将隐含使用all类型。
| 媒体类别 | all | screen | speech | |
|---|---|---|---|---|
| 说明 | 所有设备 | 分页资料或打印模式查看的文档 | 彩色的电脑屏幕 | 语音合成器 |
5.@page
作用 在打印文档时修改某些CSS属性 ⚠️注意 不能用@page规则来修改所有的CSS属性，而是只能修改margin,orphans,widow 和 page breaks of the document。对其他属性的修改是无效的。
@page :first { margin: 1in;}复制代码 6.@font-face
作用 允许网页开发者为其网页指定在线字体，从而消除对用户电脑字体的依赖。、
<-- 定义了一个可下载的字体，并应用到了文档的整个body标签上。 --!>Web Font Sample This is Bitstream Vera Serif Bold.复制代码
警告 你不能在一个 CSS 选择器中定义 @font-face
.className { @font-face { font-family: MyHelvetica; src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"), url(MgOpenModernaBold.ttf); font-weight: bold; } }复制代码 7.@keyframes
作用 比transitions更能控制动画序列的中间步骤； 通过在动画序列中定义关键帧（或waypoints）的样式来控制CSS动画序列中的中间步骤；
复制代码
/* simple "from > to" */@keyframes move { from { left: 5%; } to { left: 85%; }}/* assign animation to ball element */.ball { animation: 1s move;}/* base styles */body { text-align: center; background: #fafafa; position: relative;}.ball { width: 10%; padding-bottom: 10%; border-radius: 50%; background: #2098d1; box-shadow: -3px 5px 0px rgba(0,0,0,0.2); position: absolute; top: 100px; left: 5%;}复制代码 8.@supports
⚠️提示 实验中的功能，需检查当前浏览器是否支持 作用 检测是否支持指定的CSS属性，若命中则渲染样式
@supports (animation-name: test) { … /* 如果支持不带前缀的animation-name,则下面指定的CSS会生效 */ @keyframes { /* @supports是一个CSS条件组at-rule,它可以包含其他相关的at-rules */ … }}/* 检测是否不支持指定的CSS属性 */@supports ( not ((text-align-last:justify) or (-moz-text-align-last:justify) ){ … /* 这里的CSS代码用来模拟text-align-last:justify */}复制代码 9.@document
⚠️提示 实验中的功能，需检查当前浏览器是否支持
作用 主要是为用户定义的样式表设计的，但也可以在作者定义的样式表
方法 指定一个或多个匹配函数。如果任何功能适用于给定的URL，则该规则将对该URL生效。 可用的函数有下面几个:
- url(), 匹配整个URL
- url-prefix(), 匹配文档的URL是否以参数指定的值开头
- domain(), 匹配文档的域名是否为参数中指定的域名或者为它的子域名
- regexp(), 匹配文档的URL是否和参数中指定的正则表达式匹配.该表达式必须匹配整个URL.
@document url(http://www.w3.org/), url-prefix(http://www.w3.org/Style/), domain(mozilla.org), regexp("https:.*")/* 该条CSS规则会应用在下面的网页: + URL为"http://www.w3.org/"的页面. + 任何URL以"http://www.w3.org/Style/"开头的网页 + 任何主机名为"mozilla.org"或者主机名以".mozilla.org"结尾的网页 + 任何URL以"https:"开头的网页 */{ /* make the above-mentioned pages really ugly */ body { color: purple; background: yellow; }}复制代码