CSS中@規則的用法

這篇文章主要介紹了CSS中一些@規則的用法小結,是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; }        }

以上就是本文的全部內容，希望對大家的學習有所協助，更多相關內容請關注topic.alibabacloud.com！