CSS @规则（详细）
在 CSS 中包含两种语法规则：
本节我们主要来介绍一下 CSS 中的 @ 规则。
在使用时需要注意以下几点：
下面示例中演示了 @charset 的使用，以及几个错误的示例：
在实际项目中不建议过多的使用 @import，因为它会造成很多额外的请求，阻塞其它文件的加载。
在使用 @import 时，还需要注意以下几点：
下面示例中演示了 @import 的使用：
@namespace 必须定义在所有 @charset 和 @import 的之后，并且在样式表中要位于其他任何样式声明之前。@namespace 可以用来定义默认命名空间，当指定默认命名空间后，所有的通用选择器和类选择器（但不包括属性选择器）都只会应用在这个命名空间的元素中。@namespace 也可以用于定义命名空间前缀，当一个通用、类、属性选择器前面有命名空间前缀修饰时，这个选择器将只匹配那些命名空间与元素名或属性匹配的元素。
下面示例中演示了 @namespace 的使用：
@supports 既可以在样式文件的顶部定义，也可以在其它嵌套规则内部定义。但是 @supports 目前还在实验阶段，在使用时要先确定浏览器是否支持。
下面示例中演示了 @supports 的使用：
@keyframes 的语法格式如下：
下面示例中演示了 @keyframes 的使用：
@document 中的可用函数如下所示：
- 普通规则：由选择器、属性和值构成，在之前的学习中我们主要使用的就是这种规则；
-
@规则：以
@开头后面跟随一个关键字的形式构成，也被称为“AT规则”，根据使用方法的不同又可以分为“常规规则”与“嵌套规则”两种。
本节我们主要来介绍一下 CSS 中的 @ 规则。
1、常规规则
所谓“常规规则”指的是语法类似下面的规则：@[KEYWORD] (RULE);
1) @charset
@charset 用来设置 CSS 文件使用的字符编码，语法格式如下：@charset "<charset>";
其中 <charset> 为具体的字符编码，默认值为“utf-8”。在使用时需要注意以下几点：
- 如果设置 @charset 的话，那么它必须出现在 CSS 文件的最前面，@charset 之前不能出现任何字符；
-
字符编码需要使用双引号
""包裹起来； - @规则名称（@charset）与具体的字符编码之间需要使用一个空格分隔；
- 规则后面的分号不能省略；
- 如果设置多个 @charset，那么只有第一个声明有效；
- 不能在 HTML 元素或者 <style> 标签中使用 @charset；
-
如果以不同的方式定义了多种字符编码规则，它们的优先级顺序如下：
- HTML 文件开头的字符编码声明；
- HTTP 请求头中的字符编码声明；
- CSS 文件中使用 @charset 定义的字符编码声明；
- <link> 标签中 charset 属性设置的字符编码声明（HTML5 中已废弃）。
下面示例中演示了 @charset 的使用，以及几个错误的示例：
/* 设置 CSS 的编码格式为 Unicode UTF-8 */ @charset "UTF-8"; @charset "utf-8"; /*大小写不敏感*/ /*错误演示*/ @charset 'iso-8859-15'; /* 无效的, 使用了错误的引号 */ @charset 'UTF-8'; /* 无效的, 使用了错误的引号 */ @charset "UTF-8"; /* 无效的, @charset 与字符编码之间多用了一个空格 */ @charset "UTF-8"; /* 无效的, @规则之前多了一个空格 */ @charset UTF-8; /* 无效的, 字符编码需要使用双引号包裹 */
2) @import
@import 用来向当前 CSS 样式文件中导入其它样式文件。通过 @import 可以引入其他样式表文件中除 @charset 以外的所有内容，另外 @import 也必须放在样式文件的最前面。@import 的语法格式如下：@import <url> <media_query_list>
其中，<url> 为使用绝对或相对路径指定的要导入的外部样式表文件路径，也可以使用 url() 函数来指定文件路径；<media_query_list> 为可选参数，用来指定媒体查询的条件，多个条件之间使用逗号, 分隔。在实际项目中不建议过多的使用 @import，因为它会造成很多额外的请求，阻塞其它文件的加载。
在使用 @import 时，还需要注意以下几点：
- @import 必须在样式表文件的开头最先声明，并且声明的末尾必须使用分号结尾，如果省略了结尾的分号，可能会导致外部样式表无法正确导入；
- 在 IE 浏览器使用 @import 最多只能引入 35 条样式表。
下面示例中演示了 @import 的使用：
@import url("global.css");
@import url(global.css);
@import "global.css";
@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import 'custom.css';
@import url("chrome://communicator/skin/");
@import "common.css" screen, projection;
@import url('landscape.css') screen and (orientation:landscape);
以上几种定义方式都是有效的，当使用 url() 来设置样式表文件的路径时，包裹路径的引号可有可无；当直接使用具体路径来设置样式表文件的路径时，包裹路径的引号则必须保留。3) @namespace
@namespace 用来定义 CSS 样式表中 XML 命名空间的 @规则，可以为当前样式文件内的所有选择器都设置指定的命名空间。@namespace 通常用来处理包含多个命名空间的文档，比如 HTML5 里内联的 SVG、MathML 或者混合多个词汇表的 XML。@namespace 必须定义在所有 @charset 和 @import 的之后，并且在样式表中要位于其他任何样式声明之前。@namespace 可以用来定义默认命名空间，当指定默认命名空间后，所有的通用选择器和类选择器（但不包括属性选择器）都只会应用在这个命名空间的元素中。@namespace 也可以用于定义命名空间前缀，当一个通用、类、属性选择器前面有命名空间前缀修饰时，这个选择器将只匹配那些命名空间与元素名或属性匹配的元素。
下面示例中演示了 @namespace 的使用：
/* 默认命名空间 */ @namespace url(XML-namespace-URL); @namespace "XML-namespace-URL"; /* 命名空间前缀 */ @namespace prefix url(XML-namespace-URL); @namespace prefix "XML-namespace-URL";
2、嵌套规则
所谓“嵌套规则”指的就是在 @规则后面需要跟随一个花括号{ }，其中包含了一些其它的规则声明，类似于下面这样：
@[KEYWORD] {
/* 嵌套语句 */
}
1) @media
@media 用来根据一个或多个媒体查询的结果来应用样式表的某一部分（花括号中的样式信息），使用 @media 您可以指定一组媒体查询和一个 CSS 样式块，当且仅当媒体查询与正在使用的设备匹配时，指定的 CSS 样式才会应用于文档。媒体查询是用于判断设备信息的一组条件，如设备的宽高值，宽高比，颜色，分辨率等，当条件匹配时，才会执行其内嵌套的样式信息。
@media 可以放置在样式表中的任意位置，也可以放置于其它 @规则中，示例代码如下：
@media all and (min-width: 1280px) {
/* 宽度大于1280 */
}
@media
(-webkit-min-device-pixel-ratio: 1.5),
(min-resolution: 2dppx) {
/* Retina屏幕 */
}
@media print {
/* 打印 */
}
@media \0screen\,screen\9 {
/* IE7,IE8 */
}
@media screen\9 {
/* IE7*/
}
2) @page
@page 用于在打印文档时修改某些 CSS 属性，需要注意的是，使用 @page 您只能修改部分 CSS 属性，例如外间距属性 margin，打印相关的 orphans、widows 属性，以及 page-break-* 等属性，其他的 CSS 属性会被忽略。
/* 表示打印时 第一页的上、左外边距均为 50% */
@page :first {
margin-left: 50%;
margin-top: 50%;
}
3) @supports
@supports 用于检查浏览器是否支持某个 CSS 特性，也被称为“特性查询”，该规则的语法结构如下：@supports (rule)[operator (rule)]* { sRules };
其中，rule 为某个具体的 CSS 样式，必须使用括号包裹；operator 的可选值为 or、and、not，通过 operator 参数可以指定多条 CSS 样式。@supports 既可以在样式文件的顶部定义，也可以在其它嵌套规则内部定义。但是 @supports 目前还在实验阶段，在使用时要先确定浏览器是否支持。
下面示例中演示了 @supports 的使用：
/* 当浏览器支持 display: grid 属性时要使用的 CSS 样式 */
@supports (display: grid) {
div {
display: grid;
}
}
/* 当浏览器不支持 display: grid 属性时要使用的 CSS 样式 */
@supports not (display: grid) {
div {
float: right;
}
}
/* 同时检查多个条件 */
@supports (display: flex) and (-webkit-appearance: checkbox) {
.module { display: flex; }
}
4) @font-face
@font-face 用于从远程服务器或者用户本地加载指定的字体，语法格式如下：
@font-face {
font-family: <identifier>;
src: <url> [format(<string>)] [, <url> [format(<string>)]]*;
<font>;
}
- <identifier>：字体名称；
- <url>：使用 url()（远程字体）或者 local()（本地字体）来指定字体的存放路径，可以是相对路径也可以是绝对路径；
- <string>：用来指定自定义字体的格式，例如以下几种类型 truetype、opentype、embedded-opentype、svg 等；
- <font>：定义字体相关样式。
提示：@font-face 可以放在 css 样式表的顶部，也可以放在其它嵌套规则中。如果同时使用 local() 函数和 url() 函数加载字体，则会优先加载 local() 函数中定义的本地字体，如果没有找到则会加载 url() 函数中定义的远程字体。
下面示例中演示了 @font-face 的使用：
/* 定义 @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");
}
/* 字体的应用 */
p {
font-family: "Open Sans";
}
5) @keyframes
@keyframes 用来定义 CSS3 中 animation 动画关键帧（或 waypoints）的样式，以此来控制动画序列中的中间步骤。定义该规则后，需要通过 animation-name 属性来使用。关键帧序列是由百分比来标识命名的，起始状态和结束状态分别为 from 和 to 代表 0% 和 100% 。@keyframes 的语法格式如下：
@keyframes <identifier> {
<keyframes-blocks>
}
下面示例中演示了 @keyframes 的使用：
/* 声明 */
@keyframes slidein {
from {
margin-left: 100%;
width: 300%;
}
to {
margin-left: 0%;
width: 100%;
}
}
@keyframes slideout {
0% {
top: 0;
}
50% {
top: 30px;
}
100% {
top: 60px;
}
}
/* 应用 */
p {
animation-name: slidein;
animation-duration: 4s;
}
div {
animation-name: slideout;
animation-duration: 4s;
}
6) @document
@document 用来根据文档的 URL 限制文档中样式的作用范围，通过该属性可以为指定用户定义专属的样式。目前 @document 还在实验阶段，具体标准会在 CSS4 中确定。@document 中的可用函数如下所示：
- url()：匹配整个 URL；
- url-prefix()：匹配文档的 URL 是否以参数指定的值开头；
- domain()：匹配文档的域名是否为参数中指定的域名或者为它的子域名；
- regexp()：匹配文档的 URL 是否和参数中指定的正则表达式匹配，该表达式必须匹配整个 URL。
提示：提供给 url()、url-prefix() 和 domain() 函数的参数可以不使用引号包裹，但提供给 regexp() 函数的参数必须使用引号包裹起来。
下面示例中演示了 @document 的使用：
@document url(http://www.weixueyuan.net/),
url-prefix(http://www.weixueyuan.net/Style/),
domain(weixueyuan.net),
regexp("https:.*")
{
/* 该条 CSS 规则会应用在下面的网页:
+ URL 为"http://www.weixueyuan.net/"的页面.
+ 任何 URL 以"http://www.weixueyuan.net/Style/"开头的网页
+ 域名"weixueyuan.net"下的所有网页
+ 任何 URL 以"https:"开头的网页 */
/* 定义样式 */
body {
color: purple;
background: yellow;
}
}
