CSS @规则(详细)

 
在 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;
    }
}