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