at-rule是一個聲明，為css提供執行或怎么表現的指令。每個聲明以@開頭,后緊跟一個可用的關鍵字，這個關鍵字充當一個標識符，用于表示css該做什么。這是一個通用的語法，盡管每個at-rule有其它語法變體。
常規規則
常規規則遵循下面的語法：
代碼如下:
@[keyword] (rule);@charset
這個規則定義了瀏覽器使用的字符集，如果樣式表包含非ascii characters (e.g:utf-8)。注意，被放在http頭部的字符集將會覆蓋@charset規則
代碼如下:
@charset "utf-8";@import
這個規則指示請求樣式表，在這一行，如果內容是正確的，就會引入一個外部的css文件。
代碼如下:
@import 'global.css';雖然流行的css預處理器都支持@import，但是應該指出的是，它們的工作原理不同于原生的css：預處理器會抓取css文件并將它們處理成一個css文件，對原生css，每一個@import都是一個獨立的htpp請求。
@namespace
對于將css應用在xml html（xhtml），這個規則是非常有用的，因為xhtml元素能在css中被作為一個選擇器使用。
代碼如下:
/* namespace for xhtml */@namespace url(http://www.w3.org/1999/xhtml);/* namespace for svg embedded in xhtml */@namespace svg url(http://www.w3.org/2000/svg);嵌套規則
嵌套規則包含了額外的子集聲明，其中一些聲明只能用于特定情況。
代碼如下:
@[keyword] {/* nested statements */}@document
這個規則為樣式表指定了條件：只能應用于特定頁面。舉個粟子，我們提供一個url，然后為這個特定的頁面自定義樣式，在其他頁面中，這些樣式會被忽略。
代碼如下:
@document/* rules for a specific page */url(http://css-tricks.com/),/* rules for pages with a url that begin with... */url-prefix(http://css-tricks.com/snippets/),/* rules for any page hosted on a domain */domain(css-tricks.com),/* rules for all secure pages */regexp("https:.*"){/* start styling */body { font-family: comic sans; }}@font-face
這個規則允許在web頁面上加載自定義字體，對自定義字體有不同程度的支持，但是這個規則接受語句創建和提供這些字體。
代碼如下:
@font-face {font-family: 'mywebfont';src: url('myfont.woff2') format('woff2'),url('myfont.woff') format('woff');}@keyframes
在諸多css屬性中，這個規則是關鍵幀 動畫的基礎,并允許我們標記動畫開始和結束的標志。
代碼如下:
@keyframes pulse {0% {background-color: #001f3f;}100% {background-color: #ff4136;}}@media
這個規則包含條件聲明，可用于為特定屏幕指定樣式，這些聲明可以包含屏幕大小，在適屏樣式中會很有用.
代碼如下:
/* iphone in portrait and landscape */@media only screen and (min-device-width: 320px) and (max-device-width: 480px)and (-webkit-min-device-pixel-ratio: 2) {.module { width: 100%; }}或者只在文檔打印時運用樣式
代碼如下:
@media print {}@page
這個規則為將要打印的單獨頁面定義樣式。特別的是，它能為頁面偽元素設置外邊距：:first、:left和:right
代碼如下:
@page :first {margin: 1in;}@supports
這個規則可測試瀏覽器知否支持某個特性/功能，如果滿足條件，將會為這些元素應用特定樣式。有點像modernizr,但確實是css屬性。
代碼如下:
/* check one supported condition */@supports (display: flex) {.module { display: flex; }}/* check multiple conditions */@supports (display: flex) and (-webkit-appearance: checkbox) {.module { display: flex; }}總結
at-rule可以使css做一些瘋狂有趣的事情。盡管文章中的示例很基礎，但是可以看到，對于特定的條件，它們是如何使用樣式的，從而創建匹配特定場景的用戶體驗和交互。
推薦教程：《css教程》

域名辦理ICP許可證需要什么 域名申請ICP許可證條件
如何正確配置主機-其他問題
云服務器怎么做cdn緩存的
信陽市彈性云服務器租賃
怎么查看域名被注冊沒有
小程序怎么開發的
css怎么去掉字體粗體樣式
網址網站非法內容已經清除