## 什么是CSS
CSS 是 Cascading Style Sheet（層疊樣式表）的縮寫。是用于（增強）控制網頁樣式并允許將樣式信息與網頁內容分離的一種標記性語言。CSS 不需要編譯,可以直接由瀏覽器執行(屬于瀏覽器解釋型語言)。
## 歷史
- CSS 最早被提議是在1994年；
- 最早被瀏覽器支持是1996年；
- 1996年 W3C 正式推出了CSS1；
- 1998年 W3C 正式推出了CSS2；
- CSS2.1 是 W3C 現在正在推薦使用的；
- CSS3 現在還處于開發中；
- CSS 3 在包含了所有 CSS 2 所支持的基礎上更有所改進，所以不必擔心兼容問題。
CSS 支持多種設備，例如手機、電視、打印機、幻燈片等。但是 CSS 在瀏覽器上得到了更好的推廣。
## 語法
selector {property: value;}
## 引入方式
三種方式將樣式表加入您的網頁：
## 內聯方式 Inline Styles
內聯定義即是在對象的標記內使用對象的 style 屬性定義適用其的樣式表屬性。示例代碼：
~~~
<p style="color:#f00">這一行的字體顏色將顯示為紅色</p>
~~~
## 內部樣式塊對象 Embedding a Style Block
你可以在你的 HTML 文檔的`<head>`標記里插入一個`<style>`塊對象。示例代碼：
~~~
<style>
.test2 {
color: #000;
}
</style>
~~~
## 外部樣式表 Linking to a Style Sheet
你可以先建立外部樣式表文件`*.css`，然后使用 HTML 的 link 對象。或者使用 `@import` 來引入。示例代碼：
~~~
<!-- Use link elements -->
<link rel="stylesheet" href="core.css">
<!-- Use @imports -->
<style>
@import url("more.css");
</style>
~~~
**注意**：在實際開發中，推薦使用 HTML 的 link 對象來引入。詳細內容可以參見[http://www.waylau.com/css-code-guide/#css-miscellaneous](http://www.waylau.com/css-code-guide/#css-miscellaneous)
## 選擇器權重
權重主要分為 4 個等級：
- 第一等：代表內聯樣式，如: `style=""`，權值為1000
- 第二等：代表ID選擇器，如：`#content`，權值為100
- 第三等：代表類，偽類和屬性選擇器，如`.content`，權值為10
- 第四等：代表類型選擇器和偽元素選擇器，如`div p`，權值為1
例子如下
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>選擇器權重 | www.waylau.com</title>
<meta name="description" content="選擇器權重">
<meta name="author" content="Way Lau, www.waylau.com"/>
<meta name="viewport" content="width=device-width">
<link rel="shortcut icon" href="/favicon.ico">
<style type="text/css">
#redP p {
/* 權值 = 100+1=101 */
color: #F00; /* 紅色 */
}
#redP .red em {
/* 權值 = 100+10+1=111 */
color: #00F; /* 藍色 */
}
#redP p span em {
/* 權值 = 100+1+1+1=103 */
color: #FF0; /*黃色*/
}
</style>
</head>
<body>
<div id="redP">
<p class="red">red
<span><em>em red</em></span>
</p>
<p>red</p>
</div>
</body>
</html>
~~~
最終頁面效果如下：
## 優先級
遵循如下法則：
- 選擇器都有一個權值，權值越大越優先；
- 當權值相等時，后出現的樣式表設置要優于先出現的樣式表設置；
- 創作者的規則高于瀏覽者：即網頁編寫者設置的 CSS 樣式的優先權高于瀏覽器所設置的樣式；
- 繼承的 CSS 樣式不如后來指定的 CSS 樣式；
- 在同一組屬性設置中標有`!important`規則的優先級最大
例子如下：
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>!important 用法 | www.waylau.com</title>
<meta name="description" content="!important 用法">
<meta name="author" content="Way Lau, www.waylau.com"/>
<meta name="viewport" content="width=device-width">
<link rel="shortcut icon" href="/favicon.ico">
<style>
.test {
color: #f00 !important;
color: #000;
}
.test2 {
color: #f00 !important;
}
.test2 {
color: #000;
}
.test3 {
color: #000;
}
.test3 {
color: #f00;
}
</style>
</head>
<body>
<div class="test">同一條樣式內，!important 優先級高</div>
<div class="test2">在分散的樣式條目內，!important 優先級高</div>
<div class="test3">沒有被覆蓋</div>
</body>
</html>
~~~
## 源碼
本文中所用例子源碼參見[https://github.com/waylau/css3-tutorial](https://github.com/waylau/css3-tutorial) 中 `samples` 目錄下的 important.html、priority_rules.html
## 參考
- [http://www.nowamagic.net/csszone/css_SeletorPriorityRules.php](http://www.nowamagic.net/csszone/css_SeletorPriorityRules.php)
- [http://www.cnblogs.com/xugang/archive/2010/09/24/1833760.html](http://www.cnblogs.com/xugang/archive/2010/09/24/1833760.html)
