一个at-rule就是一个CSS语句，以@开头，后接标识符，最后以；结束。
@charset
@charset用于定义样式表中使用的字符编码。它必须写在样式表的最开头且前面不可有别的字符。
/* @charset "<charset>"; */ @charset "UTF-8";
@import
@import用于导入外部CSS样式表文件。
/* @import url; */
/* @import url list-of-media-queries; */
@import 'custom.css';
@import url("fineprint.css") print;
@namespace
@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 */
@media screen and (min-width: 900px) {
h1 {
color:red;
font-size:14px;
}
}
web前端开发学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法
（详细的前端项目实战教学视频，PDF）
@page
@page用于在打印文档时修改某些CSS属性。@page规则只能修改margin、orphans、widow 和 page breaks of the document，对其他属性的修改是无效的。
/*
* @page <page-selector-list> {
* <page-body>
* }
*/
@page {
size: 10in 20in;
margin: 10% 20%;
}
@keyframes
@keyframs通过定义动画序列中的关键帧来控制CSS动画不同步骤的状态。
/* @keyframes */
@keyframes slidein {
from {
margin-left: 100%;
width: 300%;
}
to {
margin-left: 0%;
width: 100%;
}
}
@supports
@supports用来检测规则组的规则是否生效。规则与@media类似
/*
* @supports <supports_condition> {
* <specific rules>
* }
*/
@supports (display: flex) {
div {
display: flex;
}
}
@viewport
@viewport用于设置视口（viewport）的特性。
/*
* @viewport {
* <group-rule-body>
* }
*/
@viewport {
min-width: 640px;
max-width: 800px;
}
@viewport {
zoom: 0.75;
min-zoom: 0.5;
max-zoom: 0.9;
}
@viewport {
orientation: landscape;
}
@counter-style
@counter-style用于自定义counter的样式
/*
* @counter-style <counter-style-name> {
* <group-rule-body>
* }
*/
@counter-style circled-alpha {
system: fixed;
symbols: Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ;
suffix: " ";
}
.items {
list-style: circled-alpha;
}
@font-face
@font-face用于给网页指定文本字体。
/*
* @font-face {
* <group-rule-body>
* }
*/
@font-face {
font-family: "Bitstream Vera Serif Bold";
src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
}
body { font-family: "Bitstream Vera Serif Bold", serif }
@doucment
@document如果满足条件组的条件，则规则生效（推延至 CSS Level 4 规范）
/*
* @document name(guide) {
* <group-rule-body>
* }
*/
@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;
}
}
web前端开发学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法
（详细的前端项目实战教学视频，PDF）
注：上面的@规则属性并非完整，还有少量相关的没有列出，需要详细列表的可以翻阅MDN
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/css-tool/t58791.shtml
