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