站長資訊網(wǎng)
在css中，“@”是一個聲明，為CSS提供執(zhí)行或怎么表現(xiàn)的指令。每個規(guī)則聲明以“@”開頭，后緊跟一個可用的關(guān)鍵字，這個關(guān)鍵字充當(dāng)一個標(biāo)識符，用于表示CSS該做什么；例如“@charset”規(guī)則就定義了瀏覽器使用的字符集，“@font-face”規(guī)則允許在web頁面上加載自定義字體。
前端（vue）入門到精通課程：進(jìn)入學(xué)習(xí)
本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
@ 在 CSS1 中的 @import 時代就已經(jīng)存在了，在 CSS 中稱為 at-rules。
at-rule是一個聲明，為CSS提供執(zhí)行或怎么表現(xiàn)的指令。每個規(guī)則聲明以@開頭，后緊跟一個可用的關(guān)鍵字，這個關(guān)鍵字充當(dāng)一個標(biāo)識符，用于表示CSS該做什么。這是一個通用的語法，盡管每個at-rule有其它語法變體。
常規(guī)規(guī)則
常規(guī)規(guī)則遵循下面的語法：
代碼如下:
@[KEYWORD] (RULE);
@charset
這個規(guī)則定義了瀏覽器使用的字符集，如果樣式表包含非ASCII characters (e.g:UTF-8)。注意，被放在HTTP頭部的字符集將會覆蓋@charset規(guī)則
代碼如下:
@charset "UTF-8";
@import
這個規(guī)則指示請求樣式表，在這一行，如果內(nèi)容是正確的，就會引入一個外部的CSS文件。
代碼如下:
@import 'global.css';
雖然流行的CSS預(yù)處理器都支持@import，但是應(yīng)該指出的是，它們的工作原理不同于原生的CSS：預(yù)處理器會抓取CSS文件并將它們處理成一個CSS文件，對原生CSS，每一個@import都是一個獨(dú)立的HTPP請求。
@namespace
對于將CSS應(yīng)用在XML HTML（XHTML），這個規(guī)則是非常有用的，因為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);
嵌套規(guī)則
嵌套規(guī)則包含了額外的子集聲明，其中一些聲明只能用于特定情況。
代碼如下:
@[KEYWORD] { /* Nested Statements */ }
@document
這個規(guī)則為樣式表指定了條件：只能應(yīng)用于特定頁面。舉個粟子，我們提供一個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
這個規(guī)則允許在web頁面上加載自定義字體，對自定義字體有不同程度的支持，但是這個規(guī)則接受語句創(chuàng)建和提供這些字體。
代碼如下:
@font-face { font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); }
@keyframes
在諸多CSS屬性中，這個規(guī)則是關(guān)鍵幀 動畫的基礎(chǔ),并允許我們標(biāo)記動畫開始和結(jié)束的標(biāo)志。
代碼如下:
@keyframes pulse { 0% { background-color: #001f3f; } 100% { background-color: #ff4136; } }
@media
這個規(guī)則包含條件聲明，可用于為特定屏幕指定樣式，這些聲明可以包含屏幕大小，在適屏樣式中會很有用.
代碼如下:
/* 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%; } }
或者只在文檔打印時運(yùn)用樣式
代碼如下:
@media print { }
@page
這個規(guī)則為將要打印的單獨(dú)頁面定義樣式。特別的是，它能為頁面?zhèn)卧卦O(shè)置外邊距：:first、:left和:right
代碼如下:
@page :first { margin: 1in; }
@supports
這個規(guī)則可測試瀏覽器知否支持某個特性/功能，如果滿足條件，將會為這些元素應(yīng)用特定樣式。有點像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; } }
總結(jié)
at-rule可以使CSS做一些瘋狂有趣的事情。盡管文章中的示例很基礎(chǔ)，但是可以看到，對于特定的條件，它們是如何使用樣式的，從而創(chuàng)建匹配特定場景的用戶體驗和交互。
（學(xué)習(xí)視頻分享：web前端）
