概念
一个at-rule就是一个CSS语句,以 @
开头,后接 标识符
,最后以 ;
结束
大家或多或少得都用过@规则,可能对这个概念有些陌生。
常用的@rule规则
@charset
用于定义样式表中使用的字符编码,他必须写在样式表的最开头且前面不能有别的字符。
/* @charset "<charset>"; */
@charset "UTF-8" ;
@import
用于导入外部css样式表
@import 'custom.css';
@import url("fineprint.css") print;
@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 screen and (min-width: 900px) {
h1 {
color:red;
font-size:14px;
}
}
@page
用于在打印文档时修改某些CSS属性。 @page
规则只能修改 margin
、 orphans
、 widow
和 page breaks of the document
,对其他属性的修改是无效的。
@keyframes
通过定义动画序列中的关键帧来控制css动画中的不步骤
@keyframes slidein {
from {
margin-left: 100%;
width: 300%;
}
to {
margin-left: 0%;
width: 100%;
}
}
@supports
用来检测规则组的规则是否生效。规则与 @media
类似
@viewport
用于设置视口(viewport)的特性
@counter-style
用于定义counter的样式
@font-face
给网页指定字体文件
@doucment
@document
如果满足条件组的条件,则规则生效(推延至 CSS Level 4 规范