在 CSS 中包含兩種語法規(guī)則：
普通規(guī)則：由選擇器、屬性和值構(gòu)成，在之前的學(xué)習(xí)中我們主要使用的就是這種規(guī)則；
@規(guī)則：以@開頭后面跟隨一個關(guān)鍵字的形式構(gòu)成，也被稱為“AT規(guī)則”，根據(jù)使用方法的不同又可以分為“常規(guī)規(guī)則”與“嵌套規(guī)則”兩種。
我們主要來介紹一下 CSS 中的 @ 規(guī)則。
1. 常規(guī)規(guī)則
所謂“常規(guī)規(guī)則”指的是語法類似下面的規(guī)則：
@[KEYWORD] (RULE);
（1）@charset
@charset 用來設(shè)置 CSS 文件使用的字符編碼，語法格式如下：
@charset "<charset>";
其中 <charset> 為具體的字符編碼，默認(rèn)值為“utf-8”。
在使用時需要注意以下幾點：
①如果設(shè)置 @charset 的話，那么它必須出現(xiàn)在 CSS 文件的最前面，@charset 之前不能出現(xiàn)任何字符；
②字符編碼需要使用雙引號""包裹起來；
③@規(guī)則名稱（@charset）與具體的字符編碼之間需要使用一個空格分隔；
④規(guī)則后面的分號不能省略；
⑤如果設(shè)置多個 @charset，那么只有第一個聲明有效；
⑥不能在 HTML 元素或者 <style> 標(biāo)簽中使用 @charset；
⑦如果以不同的方式定義了多種字符編碼規(guī)則，它們的優(yōu)先級順序如下：
● HTML 文件開頭的字符編碼聲明；
● HTTP 請求頭中的字符編碼聲明；
● CSS 文件中使用 @charset 定義的字符編碼聲明；
● <link> 標(biāo)簽中 charset 屬性設(shè)置的字符編碼聲明（HTML5 中已廢棄）。
下面示例中演示了 @charset 的使用，以及幾個錯誤的示例：
/* 設(shè)置 CSS 的編碼格式為 Unicode UTF-8 */ @charset "UTF-8"; @charset "utf-8"; /*大小寫不敏感*/ /*錯誤演示*/ @charset 'iso-8859-15'; /* 無效的, 使用了錯誤的引號 */ @charset 'UTF-8'; /* 無效的, 使用了錯誤的引號 */ @charset "UTF-8"; /* 無效的, @charset 與字符編碼之間多用了一個空格 */ @charset "UTF-8"; /* 無效的, @規(guī)則之前多了一個空格 */ @charset UTF-8; /* 無效的, 字符編碼需要使用雙引號包裹 */
（2）@import
@import 用來向當(dāng)前 CSS 樣式文件中導(dǎo)入其它樣式文件。通過 @import 可以引入其他樣式表文件中除 @charset 以外的所有內(nèi)容，另外 @import 也必須放在樣式文件的最前面。@import 的語法格式如下：
@import <url> <media_query_list>
其中，<url> 為使用絕對或相對路徑指定的要導(dǎo)入的外部樣式表文件路徑，也可以使用 url() 函數(shù)來指定文件路徑；<media_query_list> 為可選參數(shù)，用來指定媒體查詢的條件，多個條件之間使用逗號,分隔。
在實際項目中不建議過多的使用 @import，因為它會造成很多額外的請求，阻塞其它文件的加載。
在使用 @import 時，還需要注意以下幾點：
● @import 必須在樣式表文件的開頭最先聲明，并且聲明的末尾必須使用分號結(jié)尾，如果省略了結(jié)尾的分號，可能會導(dǎo)致外部樣式表無法正確導(dǎo)入；
● 在 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);以上幾種定義方式都是有效的，當(dāng)使用 url() 來設(shè)置樣式表文件的路徑時，包裹路徑的引號可有可無；當(dāng)直接使用具體路徑來設(shè)置樣式表文件的路徑時，包裹路徑的引號則必須保留。
（3）@namespace
@namespace 用來定義 CSS 樣式表中 XML 命名空間的 @規(guī)則，可以為當(dāng)前樣式文件內(nèi)的所有選擇器都設(shè)置指定的命名空間。@namespace 通常用來處理包含多個命名空間的文檔，比如 HTML5 里內(nèi)聯(lián)的 SVG、MathML 或者混合多個詞匯表的 XML。
@namespace 必須定義在所有 @charset 和 @import 的之后，并且在樣式表中要位于其他任何樣式聲明之前。@namespace 可以用來定義默認(rèn)命名空間，當(dāng)指定默認(rèn)命名空間后，所有的通用選擇器和類選擇器（但不包括屬性選擇器）都只會應(yīng)用在這個命名空間的元素中。@namespace 也可以用于定義命名空間前綴，當(dāng)一個通用、類、屬性選擇器前面有命名空間前綴修飾時，這個選擇器將只匹配那些命名空間與元素名或?qū)傩云ヅ涞脑亍?/p>
下面示例中演示了 @namespace 的使用：
/* 默認(rèn)命名空間 */ @namespace url(XML-namespace-URL); @namespace "XML-namespace-URL"; /* 命名空間前綴 */ @namespace prefix url(XML-namespace-URL); @namespace prefix "XML-namespace-URL";
2. 嵌套規(guī)則
所謂“嵌套規(guī)則”指的就是在 @規(guī)則后面需要跟隨一個花括號{ }，其中包含了一些其它的規(guī)則聲明，類似于下面這樣：
@[KEYWORD] {
/* 嵌套語句 */
}（1）@media
@media 用來根據(jù)一個或多個媒體查詢的結(jié)果來應(yīng)用樣式表的某一部分（花括號中的樣式信息），使用 @media 您可以指定一組媒體查詢和一個 CSS 樣式塊，當(dāng)且僅當(dāng)媒體查詢與正在使用的設(shè)備匹配時，指定的 CSS 樣式才會應(yīng)用于文檔。
媒體查詢是用于判斷設(shè)備信息的一組條件，如設(shè)備的寬高值，寬高比，顏色，分辨率等，當(dāng)條件匹配時，才會執(zhí)行其內(nèi)嵌套的樣式信息。
@media 可以放置在樣式表中的任意位置，也可以放置于其它 @規(guī)則中，示例代碼如下：
@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，打印相關(guān)的 orphans、widows 屬性，以及 page-break-* 等屬性，其他的 CSS 屬性會被忽略。
/* 表示打印時 第一頁的上、左外邊距均為 50% */
@page :first {
margin-left: 50%;
margin-top: 50%;
}（3）@supports
@supports 用于檢查瀏覽器是否支持某個 CSS 特性，也被稱為“特性查詢”，該規(guī)則的語法結(jié)構(gòu)如下：
@supports (rule)[operator (rule)]* { sRules };其中，rule 為某個具體的 CSS 樣式，必須使用括號包裹；operator 的可選值為 or、and、not，通過 operator 參數(shù)可以指定多條 CSS 樣式。
@supports 既可以在樣式文件的頂部定義，也可以在其它嵌套規(guī)則內(nèi)部定義。但是 @supports 目前還在實驗階段，在使用時要先確定瀏覽器是否支持。
下面示例中演示了 @supports 的使用：
/* 當(dāng)瀏覽器支持 display: grid 屬性時要使用的 CSS 樣式 */
@supports (display: grid) {
div {
display: grid;
}
}
/* 當(dāng)瀏覽器不支持 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 用于從遠(yuǎn)程服務(wù)器或者用戶本地加載指定的字體，語法格式如下：
@font-face {
font-family: <identifier>;
src: <url> [format(<string>)] [, <url> [format(<string>)]]*;
<font>;
}參數(shù)說明如下：
● <identifier>：字體名稱；
● <url>：使用 url()（遠(yuǎn)程字體）或者 local()（本地字體）來指定字體的存放路徑，可以是相對路徑也可以是絕對路徑；
● <string>：用來指定自定義字體的格式，例如以下幾種類型 truetype、opentype、embedded-opentype、svg 等；
● <font>：定義字體相關(guān)樣式。
提示：@font-face 可以放在 css 樣式表的頂部，也可以放在其它嵌套規(guī)則中。如果同時使用 local() 函數(shù)和 url() 函數(shù)加載字體，則會優(yōu)先加載 local() 函數(shù)中定義的本地字體，如果沒有找到則會加載 url() 函數(shù)中定義的遠(yuǎn)程字體。
下面示例中演示了 @font-face 的使用：
/* 定義 @font-face 規(guī)則 */
@font-face {
/* 指定字體名稱 */
font-family: "Open Sans";
/* 指定字體文件的路徑 */
src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
}
/* 字體的應(yīng)用 */
p {
font-family: "Open Sans";
}（5）@keyframes
@keyframes 用來定義 CSS3 中 animation 動畫關(guān)鍵幀（或 waypoints）的樣式，以此來控制動畫序列中的中間步驟。定義該規(guī)則后，需要通過 animation-name 屬性來使用。關(guān)鍵幀序列是由百分比來標(biāo)識命名的，起始狀態(tài)和結(jié)束狀態(tài)分別為 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;
}
}
/* 應(yīng)用 */
p {
animation-name: slidein;
animation-duration: 4s;
}
div {
animation-name: slideout;
animation-duration: 4s;
}（6）@document
@document 用來根據(jù)文檔的 URL 限制文檔中樣式的作用范圍，通過該屬性可以為指定用戶定義專屬的樣式。目前 @document 還在實驗階段，具體標(biāo)準(zhǔn)會在 CSS4 中確定。
@document 中的可用函數(shù)如下所示：
● url()：匹配整個 URL；
● url-prefix()：匹配文檔的 URL 是否以參數(shù)指定的值開頭；
● domain()：匹配文檔的域名是否為參數(shù)中指定的域名或者為它的子域名；
● regexp()：匹配文檔的 URL 是否和參數(shù)中指定的正則表達(dá)式匹配，該表達(dá)式必須匹配整個 URL。
提示：提供給 url()、url-prefix() 和 domain() 函數(shù)的參數(shù)可以不使用引號包裹，但提供給 regexp() 函數(shù)的參數(shù)必須使用引號包裹起來。
下面示例中演示了 @document 的使用：
@document url(http://www.weixueyuan.net/),
url-prefix(http://www.weixueyuan.net/Style/),
domain(weixueyuan.net),
regexp("https:.*")
{
/* 該條 CSS 規(guī)則會應(yīng)用在下面的網(wǎng)頁:
+ URL 為"http://www.weixueyuan.net/"的頁面.
+ 任何 URL 以"http://www.weixueyuan.net/Style/"開頭的網(wǎng)頁
+ 域名"weixueyuan.net"下的所有網(wǎng)頁
+ 任何 URL 以"https:"開頭的網(wǎng)頁 */
/* 定義樣式 */
body {
color: purple;
background: yellow;
}
C語言網(wǎng)提供由在職研發(fā)工程師或ACM藍(lán)橋杯競賽優(yōu)秀選手錄制的視頻教程，并配有習(xí)題和答疑，點擊了解：
一點編程也不會寫的：零基礎(chǔ)C語言學(xué)練課程
解決困擾你多年的C語言疑難雜癥特性的C語言進(jìn)階課程
從零到寫出一個爬蟲的Python編程課程
只會語法寫不出代碼？手把手帶你寫100個編程真題的編程百練課程
信息學(xué)奧賽或C++選手的 必學(xué)C++課程
藍(lán)橋杯ACM、信息學(xué)奧賽的必學(xué)課程：算法競賽課入門課程
手把手講解近五年真題的藍(lán)橋杯輔導(dǎo)課程