在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的編碼格式為UnicodeUTF-8*/@charsetUTF-8;@charsetutf-8;/*大小寫不敏感*//*錯誤示範*/@charset'iso-8859-15';/*無效的,使用了錯誤的引號*/@charset'UTF-8'; /*無效的,使用了錯誤的引號*/@charsetUTF-8;/*無效的,@charset與字元編碼之間多用了一個空格*/@charsetUTF-8;/*無效的,@規則之前多了一個空格*/@charsetUTF-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 的使用：
@importurl(global.css);@importurl(global.css);@importglobal.css;@importurl(fineprint.css)print;@importurl(bluish.css)projection,tv;@import'cust om.css';@importurl(chrome://communicator/skin/);@importcommon.cssscreen,projection;@importurl('landscape.css')screenand(orientation:landscape);以上幾種定義方式都是有效的，當使用url() 來設定樣式表檔案的路徑時，包裹路徑的引號可有可無；當直接使用具體路徑來設定樣式表檔案的路徑時，包裹路徑的引號則必須保留。
（3）@namespace
@namespace 用來定義CSS 樣式表中XML 命名空間的@規則，可以設定目前樣式檔案內的所有選擇器指定的命名空間。 @namespace 通常用來處理包含多個命名空間的文檔，例如HTML5 裡內聯的SVG、MathML 或混合多個詞彙表的XML。
@namespace 必須定義在所有@charset 和@import 的之後，並且在樣式表中要位於其他任何樣式宣告之前。 @namespace 可以用來定義預設命名空間，當指定預設命名空間後，所有的通用選擇器和類別選擇器（但不包括屬性選擇器）都只會套用在這個命名空間的元素中。 @namespace 也可以用來定義命名空間前綴，當一個通用、類別、屬性選擇器前面有命名空間前綴修飾時，這個選擇器只會匹配那些命名空間與元素名稱或屬性相符的元素。
下面範例中示範了@namespace 的使用：
/*預設命名空間*/@namespaceurl(XML-namespace-URL);@namespaceXML-namespace-URL;/*命名空間前綴*/@namespaceprefixurl(XML-namespace-URL);@namespaceprefixXML-namespace-URL;
2. 嵌套規則
所謂「嵌套規則」指的就是在@規則後面需要跟隨一個花括號{ }，其中包含了一些其它的規則聲明，類似於下面這樣：
@[KEYWORD]{/*嵌套語句*/}（1）@media
@media 用來根據一個或多個媒體查詢的結果來套用樣式表的某一部分（花括號中的樣式資訊），使用@media 您可以指定一組媒體查詢和一個CSS 樣式區塊，當且僅當媒體查詢與正在使用的裝置相符時，指定的CSS 樣式才會套用至文件。
媒體查詢是用來判斷裝置資訊的一組條件，如裝置的寬高值，寬高比，顏色，解析度等，當條件符合時，才會執行其內嵌套的樣式資訊。
@media 可以放置在樣式表中的任意位置，也可以放置於其它@規則中，範例程式碼如下：
@mediaalland(min-width:1280px){/*寬度大於1280*/}@media(-webkit-min-device-pixel-ratio:1.5),(min-resolutio n:2dppx){/*Retina螢幕*/}@mediaprint{/*列印*/}@media screen,screen9{/*IE7,IE8*/}@mediascreen9{/*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樣式*/@supportsnot (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:OpenSans;/*指定字型檔的路徑*/src:url(/fonts/OpenSans-Regular-webfo nt.woff2)format(woff2),url(/fonts/OpenSans-Regular-webfont.woff)format(woff);}/*字體的應用*/p{font-family:OpenSans;}（5）@keyframes
@keyframes 用來定義CSS3 中animation 動畫關鍵影格（或waypoints）的樣式，以此來控制動畫序列中的中間步驟。定義該規則後，需要透過animation-name 屬性來使用。關鍵影格序列是由百分比來識別命名的，起始狀態和結束狀態分別為from 和to 代表0% 和100% 。
@keyframes 的語法格式如下：
@keyframes<identifier>{<keyframes-blocks>}其中<identi fier> 用來定義動畫名稱；<keyframes-blocks> 用來定義動畫在每個階段的樣式，即幀動畫。
下面範例中示範了@keyframes 的使用：
/*聲明*/@keyframesslidein{from{margin-left:100%;width:300%;}to{margin-left:0%;width:100%;}}@keyframesslideout{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 的使用：
@documenturl(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;}