- css的顶层样式表由两种规则组成
- at-rule , at规则,由 @关键字 和后续的一个区域块组成
- qualified-rule ,qualified规则, 就是 普通规则。 我们常用的 选择器 等
at 规则
-
@charset 提示css文件的编码方式
@charset 用于提示 CSS 文件使用的字符编码方式,它如果被使用,必须出现在最前面。这个规则只在给出语法 解析阶段前使用,并不影响页面上的展示效果。
@charset "utf-8";
-
@import 导入另一个css文件
@import 用于引入一个 CSS 文件,除了 @charset 规则不会被引入,@import 可以引入另一个文件的全部内容。
@import "mystyle.css";
@import url("mystyle.css");
@import [ <url> | <string> ]
[ supports( [ <supports-condition> | <declaration> ] ) ]?
<media-query-list>? ;
- @media 媒体查询,多用于适配不同屏幕
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;
symbols: ‣;
suffix: " ";
}
- @key-frames
keyframes 产生一种数据,用于定义动画关键帧。
@keyframes diagonal-slide {
from {
left: 0;
top: 0;
}
to {
left: 100px;
top: 100px;
}
}
- @fontface
fontface 用于定义一种字体,icon font 技术就是利用这个特性来实现的。
@font-face {
font-family: Gentium;
src: url(http://example.com/fonts/Gentium.woff);
}
p { font-family: Gentium, serif; }
- @support
support 检查环境的特性,它与 media 比较类似。
- @namespace
用于跟 XML 命名空间配合的一个规则,表示内部的 CSS 选择器全都带上特定命名空间。
- @viewport
用于设置视口的一些特性,不过兼容性目前不是很好,多数时候被 html 的 meta 代替。