CSS @规则

精华

小牛编辑

176浏览

2023-03-14

在 CSS 中包含两种语法规则：

普通规则：由选择器、属性和值构成，在之前的学习中我们主要使用的就是这种规则；
@规则：以@开头后面跟随一个关键字的形式构成，也被称为“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>
}

其中 <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;
    }
}