【推薦教學: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中如何使用@規則?用法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!