DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> DIV十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; }

  }

  總結

  at-rule可以使CSS做一些瘋狂有趣的事情。盡管文章中的示例很基礎,但是可以看到,對於特定的條件,它們是如何使用樣式的,從而創建匹配特定場景的用戶體驗和交互。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved