## 语法
**层叠样式表** ( 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
