CSS @规则（详细）

2023-08-26 05:35| 来源: 网络整理| 查看: 265

首页 > CSS CSS @规则（详细）在 CSS 中包含两种语法规则：普通规则：由选择器、属性和值构成，在之前的学习中我们主要使用的就是这种规则； @规则：以@开头后面跟随一个关键字的形式构成，也被称为“AT规则”，根据使用方法的不同又可以分为“常规规则”与“嵌套规则”两种。本节我们主要来介绍一下 CSS 中的 @ 规则。 1、常规规则所谓“常规规则”指的是语法类似下面的规则：

@[KEYWORD] (RULE);

1) @charset @charset 用来设置 CSS 文件使用的字符编码，语法格式如下：

@charset "";

其中为具体的字符编码，默认值为“utf-8”。在使用时需要注意以下几点：如果设置 @charset 的话，那么它必须出现在 CSS 文件的最前面，@charset 之前不能出现任何字符；字符编码需要使用双引号 "" 包裹起来； @规则名称（@charset）与具体的字符编码之间需要使用一个空格分隔；规则后面的分号不能省略；如果设置多个 @charset，那么只有第一个声明有效；不能在 HTML 元素或者标签中使用 @charset；如果以不同的方式定义了多种字符编码规则，它们的优先级顺序如下： HTML 文件开头的字符编码声明； HTTP 请求头中的字符编码声明； CSS 文件中使用 @charset 定义的字符编码声明；标签中 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() 函数来指定文件路径；为可选参数，用来指定媒体查询的条件，多个条件之间使用逗号, 分隔。在实际项目中不建议过多的使用 @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: ; src: [format()] [, [format()]]*; ; }

参数说明如下：：字体名称；：使用 url()（远程字体）或者 local()（本地字体）来指定字体的存放路径，可以是相对路径也可以是绝对路径；：用来指定自定义字体的格式，例如以下几种类型 truetype、opentype、embedded-opentype、svg 等；：定义字体相关样式。

提示：@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 { }

其中用来定义动画名称；用来定义动画在每个阶段的样式，即帧动画。下面示例中演示了 @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; } }

关注公众号「站长严长生」，在手机上阅读所有教程，随时随地都能学习。内含一款搜索神器，免费下载全网书籍和视频。

微信扫码关注公众号

推荐阅读一套完整的嵌入式开发学习路线（高薪就业版）一套课程卖1万，TMD太贵了！跑了3000公里，见了一位大佬 C语言标准库以及标准头文件 C++虚继承下的内存模型 C++转换构造函数：将其它类型转换为当前类的类型 Python字符串对齐方法（ljust()、rjust()和center()）详解深度剖析Linux硬链接和软链接，直击它们的本质！ Maven插件（plugin） C++11 tuple元组详解

【本文地址】

CSS @规则（详细）

CSS @规则（详细）

今日新闻

推荐新闻