at-rule由一个@关键字和后续的一个区块组成,如果没有区块,则以分号结束。
@charset
用于提示css文件使用的字符串编码方式,它如果被使用,必须出现在最前面。这个规则只是在给出语法解析阶段前使用,并不影响页面上展示效果。
@charset "utf-8"
@import
用于引入一个css文件,除@charset规则不会被引入外,可以引入一个文件的全部内容。
-
@
import
"mystyle.css";
-
@
import url(
"mystyle.css");
@media
media query 使用规则,它能够对设备的类型进行一些判断,在media的区块中,是普通规则列表。
-
@
media print {
-
body {
-
font-size:
10pt;
-
}
-
}
@page
page用于分页媒体访问网页时的表现设置,页面是一种特殊的盒模型结构,除了页面本身,还可以设置它周围的盒。
-
@
page {
-
size:
8.5in
11in;
-
margin:
10%;
-
@top-left {
-
content:
"Hamlet";
-
}
-
@
top-
right {
-
content: "
Page "
counter(
page);
-
}
-
}
@counter-style
counter-style产生一种数据,用于定义列表项的表现。
-
@
counter-
style triangle {
-
system:
cyclic;
-
suffix: "";
-
}
@key-frames
key-frames产生一种数据,用于定义动画关键帧。
-
@
keyframes diagonal-side {
-
from {
-
left:
0;
-
top:
0;
-
}
-
-
to {
-
left:
100px;
-
top:
100px;
-
}
-
}
@fontface
fontface用于定义一种字体,iconfont技术就是利用这个特性来实现。
-
@
font-face {
-
font-family: Gentium;
-
src:
url(http://xxxx);
-
}
-
p {
-
font-family: Gentium, serif;
-
}
@support
support检查环境的特性,它与media比较类似。
@namespace
用于跟xml命名空间配合的一个规则,表示内部的css选择器全都带上特定命名空间。
@viewport
用于设置视口的一些特性,不过兼容性目前不是很好,多数时候被html的meta代替。
其他
以下是一些不太推荐使用的@规则:
@color-profile
@document
@font-feature-values