@规则 At-rules
1、@charset
用于指定样式表中使用的字符编码。
要点：
- 必须是样式表中的第一个元素，前面不能有任何字符；
- 必须是双引号，紧跟一个空格字符(U+0020)，并立即以分号结束；
- 字符编码必须是IANA-registry定义的。
语法
@charset "UTF-8";
@charset "iso-8859-15";
正式的语法
@charset "";
示例： 有效和无效的字符集声明
@charset "UTF-8"; /* Set the encoding of the style sheet to Unicode UTF-8 */
@charset 'iso-8859-15'; /* Invalid, wrong quoting style used */
@charset "UTF-8"; /* Invalid, more than one space */
@charset "UTF-8"; /* Invalid, there is a character (a space) before the at-rule */
@charset UTF-8; /* Invalid, the charset is not a CSS */
2、@font-face
用于指定了用来显示文本的自定义字体；字体既可以从远程服务器加载，也可以从用户自己的计算机上安装的本地字体加载。
语法：
@font-face {
font-family: "Open Sans";
src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
}
常用到的为：
-
font-family：指定字体族 font-stylefont-variantfont-weight-
src： 指定包含字体数据的资源。可以是远程字体文件位置的URL，也可以是用户计算机上字体的名称。
3、 @import
用于从其他样式表导入样式。
语法：
@import url; //表示要导入的资源的位置。路径可以是绝对的，也可以是相对的。
示例： 导入css
@import 'custom.css';
@import url("chrome://communicator/skin/");
4、@keyframes
@keyframes 通过在动画序列中定义关键帧（或路径点）的样式，来控制CSS动画序列中的中间步骤。这比 转场 transition 更能控制动画序列的中间步骤。
语法：
@keyframes slidein {
from {
transform: translateX(0%);
}
to {
transform: translateX(100%);
}
}
值：
标识关键帧列表的名称，必须与CSS语法中的标识符匹配。
from：表示起始偏移量为 0%
to：表示一个100%的结束偏移量。
百分比：动画序列中指定关键帧应该出现的 时间百分比。
说明：
1、如果关键帧规则没有指定动画的开始或结束状态（即 0% / from 和 100% / to），浏览器将使用元素的现有样式作为开始/结束状态。
2、在关键帧规则中不能动画的属性会被忽略，但受支持的属性仍然会被动画化。
3、如果给定的 animation-name 存在多个关键帧集，则使用解析器遇到的最后一个。
4、如果一个给定的动画时间偏移重复，则 @keyframes 规则中的所有关键帧的百分比都被用于该帧。如：
@keyframes ani-height-color {
50% {
height: 200px;
}
50% {
background: green;
}
}
5、用 !important 限定的关键帧中的声明将被忽略。
5、@media
@media 可以用于基于一个或多个媒体查询的结果应用样式表的一部分。使用它，可以指定一个媒体查询和一个CSS块，当且仅当媒体查询与正在使用内容的设备匹配时应用于文档。
语法：
/* 在代码的顶层 */
@media screen and (min-width: 900px) {
article {
padding: 1rem 3rem;
}
}
/* 嵌套在另一个条件规则中 */
@supports (display: flex) {
@media screen and (min-width: 900px) {
article {
display: flex;
}
}
}
媒体类型：媒体类型描述了设备的一般类别。除非使用not或only逻辑操作符，否则媒体类型是可选的，并暗示了all类型。
- all：适用于所有设备；
- print：用于在屏幕上以打印预览模式查看已分页的材料和文件；
- screen：主要用于屏幕。
媒体特性：媒体特性描述用户代理、输出设备或环境的特定特性。媒体特性表达式测试它们的存在或值，并且完全是可选的。每个媒体特性表达式必须用括号括起来。
- height：视口的高度；
- width：视口的宽度，包括滚动条的宽度；
- orientation：朝向：竖屏或横屏
- resolution：分辨率。
逻辑运算符
-
not： -
and：将多个媒体特性组合成单个媒体查询，要求每个链接特性返回true才能使查询为true。 -
only：仅在整个查询匹配时应用样式。 -
,：用于将多个媒体查询组合成一个规则。逗号分隔列表中的每个查询都与其他查询分开处理。因此，如果列表中的任何一个查询为真，整个媒体语句返回真。换句话说，列表的行为类似于逻辑或操作符。
示例：
@media print {
body { font-size: 10pt; }
}
@media screen {
body { font-size: 13px; }
}
@media screen, print {
body { line-height: 1.2; }
}
@media only screen
and (min-width: 320px)
and (max-width: 480px)
and (resolution: 150dpi) {
body { line-height: 1.4; }
}
参考
MDN At-rules