CSS/Syntax

CSS最常是鏈接到網頁，因此可用於整個網站。由於是單獨文件，有它自己的結構。

樣式表的開頭是個聲明。

 @charset "UTF-8";

上述聲明之後，每條CSS規則是獨立的，包括3部分：選取項、屬性、實參（即值）：

Example:

 @charset "UTF-8";

 body {
 background-color : #000000;
 font-family : Georgia, "Times New Roman", Times, serif;
 font-size : 100%;
 color : #ffffff;
 margin : 0;
 padding : 0;
 text-align : center;
 }

 h1 {
 font-family : Georgia, "Times New Roman", Times, serif;
 font-size : 16px;
 color : #ffffff;
 font-style : normal;
 font-weight : normal;
 letter-spacing : 0.1em;
 }

 h2 {
 font-family : Georgia, "Times New Roman", Times, serif;
 font-size : 12px;
 font-style : italic;
 font-weight : bold;
 color : #ffffff;
 text-decoration : underline;
 }

 p {
 font-family : Georgia, "Times New Roman", Times, serif;
 font-size : 12px;
 font-style : normal;
 color : #ffffff;
 }

 etc

規則可分解如下：

@rule argument(s) {
	selector {
		property: argument(s);
		another-property: argument(s);
		property-the-third: argument(s);
		fourth-property: argument(s);
	}
}

每個選取項可以有任意多的屬性-值對。

At規則

CSS 的頂層樣式表由兩種規則組成的規則列表構成，一種被稱為 at-rule，也就是 at規則，另一種是 qualified rule，也就是普通規則。

at 規則由一個@關鍵字和後續的一對花括號的區塊組成；如果沒有區塊，則以分號結束。

@charset

用於提示 CSS 文件使用的字符編碼方式，它如果被使用，必須出現在最前面。這個規則只在給出語法解析階段前使用，並不影響頁面上的展示效果。

@charset "utf-8";

@import

@import "index.css";
@import url("index.css");

import 還支持 supports 和 media query 形式。

@import [ <url> | <string> ]
        [ supports( [ <supports-condition> | <declaration> ] ) ]?
        <media-query-list>? ;

@media

media 是 media query 使用的規則，能夠對設備的類型進行一些判斷

@media print {
    body { font-size: 10px }
}

@page

page 用於分頁媒體訪問網頁時的表現設置

@page {
  margin: 10%;

  @top-left {
    content: "Hamlet";
  }

  @top-right {
    content: "Page " counter(page);
  }
}

counter-style

counter-style 產生一種數據，用於定義列表項的表現。

@counter-style triangle {
  system: cyclic;
  symbols: ‣;
  suffix: " ";
}

@key-frames

keyframes 產生一種數據，用於定義動畫關鍵幀。

@keyframes diagonal-slide {
  from {
    left: 0;
    top: 0;
  }
  to {
    left: 100px;
    top: 100px;
  }
}

@fontface

fontface 用於定義一種字體，icon font 技術就是利用這個特性來實現的。

@font-face {
  font-family: Gentium;
  src: url(http://example.com/fonts/Gentium.woff);
}

@support

support 檢查環境的特性，它與 media 比較類似。

@namespace

用於跟 XML 命名空間配合的一個規則，表示內部的 CSS 選擇器全都帶上特定命名空間。

@viewport

用於設置視口的一些特性，不過兼容性目前不是很好，多數時候被 html 的 meta 代替。

其他不太推薦的at規則

@color-profile、@document、@font-feature-values

塊

CSS中的塊（block）包括一條或多條語句（或者叫做聲明）。塊以{開始，以}結束.

屬性

屬性（property)是CSS的真正內容所在。語法相當簡單： property: argument(s);. 屬性必須出現在一個選擇器後面的{}中，必須以分號;結束.