## 語法
**層疊樣式表** ( Cascading Stylesheet，簡稱 CSS )， 其基本目標是讓瀏覽器以指定的 **特性** 去繪制頁面元素。
### 1. CSS 聲明
一個屬性與值的 **鍵值對** 被稱為“**聲明**”（declaration） 。
```css
/* A CSS declaration. */
background-color : red;
```
如果值對給定的屬性而言非法時，聲明就會被視為無效的，整個聲明就會被CSS引擎忽略。
### 2. CSS 聲明塊
```css
/* A CSS declarations block. */
{
background-color : red;
background-style : none;
}
```
### 3. CSS 規則(集)
```css
/* A CSS ruleset (rule) = selector + CSS declarations block */
div, #id, .class {
background-color : red;
background-style : none;
}
```
一個元素可能被多個選擇器選中，因此會有多個規則，有可能以不同的值去設置同一屬性。CSS標準會規定哪個優先級最高并生效, 稱之為 **層疊（cascade) 算法**。
> 如果用一組選擇器來定義的單個規則集，若其中的一個選擇器是無效的，例如使用了一個未知的偽元素或偽類，會導致整個選擇器都會無效，同時對應的規則都會被忽略。
### 4. CSS 語句
規則是樣式表的主體，通常樣式表會包括大量的規則列表。但有時候網頁的作者也希望在樣式表中包括其他的一些信息，比如字符集，導入其它的外部樣式表，字體等，這些需要專門的語句表示。
#### 4.1 @charset "utf-8";
指定該樣式表使用的字符集。在外部樣式表文件內使用。
參考: http://www.goodxyx.com/css/chm/z_charset.html
#### 4.2 @import url( *url* ) sMedia;
使用絕對或相對url地址指定 **導入外部樣式** 表文件。
```css
@import url("foo.css") screen, print;
@import "print.css";
@import url(print.css);
```
#### 4.3 @font-face { }
自定義字體嵌入到網頁中, 有 .eot, .woff, .ttf, .svg 等字體格式.
```css
@font-face {
font-family : name; /* 必需,定義字體名稱. */
src : URL; /* 必需, 定義字體下載地址. 'http://.../font.ttf' */
font-stretch : normal | ...; /* 可選, 定義字體如何被拉長. */
font-style : normal | italic | oblique; /* 可選,定義字體樣式. */
font-weight : normal | bold | 100 ~ 900; /* 可選, 定義字體粗細. */
unicode-range : unicode-range; /* 可選, 定義字體支持 Unicode 字符的范圍, 默認值是"ü+0-10 FFFF" */
}
```
```css
@charset "utf-8";
@import url("http://host/css.css");
/* http://www.w3cplus.com/content/css3-font-face */
@font-face {
font-family: 'SingleMaltaRegular';
src: url('../fonts/singlemalta-webfont.eot');
src: url('../fonts/singlemalta-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/singlemalta-webfont.woff') format('woff'),
url('../fonts/singlemalta-webfont.ttf') format('truetype'),
url('../fonts/singlemalta-webfont.svg#SingleMaltaRegular') format('svg');
font-weight: normal;
font-style: normal;
}
h2.singleMalta {
font-family: 'SingleMaltaRegular'
}
@media screen and (max-width > 400px) {
body {
// CSS here
}
}
@document {}
/* many CSS ruleset */
```
### 5. CSS reference
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
https://developer.mozilla.org/zh-CN/docs/Web/CSS/Syntax
http://www.w3cplus.com/sassguide/index.html
http://www.w3ctech.com/topic/1612
