CSS 中 @ 用法詳解

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教學》

以上是CSS 中 @ 用法詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！