一.CSS 概述
把樣式添加到 HTML 4.0 中，是爲了解決內容與表現分離的問題
外部樣式表可以極大提高工作效率
外部樣式表通常存儲在 CSS 文件中
多個樣式定義可層疊爲一
所有的主流瀏覽器均支持層疊樣式表。
樣式表極大地提高了工作效率。允許同時控制多重頁面的樣式和佈局。
多重樣式將層疊爲一個。 即可同名的樣式表，最後會按照優先順序，只有最優先的起作用。
樣式的優先規則從大到小排列按下面進行排列，數字越大，優先度越高。
- 瀏覽器缺省設置
- 外部樣式表
- 內部樣式表（位於 <head> 標籤內部）
- 內聯樣式（在 HTML 元素內部）
css對大小寫不敏感。
二.CSS 語法
selector {declaration1; declaration2; ... declarationN }
選擇器通常是您需要改變樣式的 HTML 元素。
每條聲明由一個屬性和一個值組成。
屬性（property）是您希望設置的樣式屬性（style attribute）。每個屬性有一個值。屬性和值被冒號分開。
declaration1: property: value
顏色屬性值的3種寫法：
1. 除了英文單詞 red，我們還可以使用十六進制的顏色值 #ff0000：
p { color: #ff0000; }
2. 爲了節約字節，我們可以使用 CSS 的縮寫形式：
p { color: #f00; }
3. 我們還可以通過兩種方法使用 RGB 值：
p { color: rgb(255,0,0); }
p { color: rgb(100%,0%,0%); }
選擇器的分組
被分組的選擇器就可以分享相同的聲明
h1,h2,h3,h4,h5,h6 {
color: green;
}
通常來說，CSS是支持繼承的，即子元素會直接繼承父元素的屬性。
例如：
body {
font-family: Verdana, sans-serif;
}
body所擁有的屬性（這些子元素諸如 p, td, ul, ol, ul, li, dl, dt,和 dd）。不需要另外的規則，所有 body 的子元素都應該顯示 Verdana 字體，子元素的子元素也一樣。
但Netscape 4 和IE6都對繼承屬性支持的不好。
當不想子元素繼承父元素時，只需爲子元素聲明一個式樣即可。
派生選擇器(上下文選擇器，後代選擇器)
li strong {
font-style: italic;
font-weight: normal;
}
請注意標記爲 <strong> 的藍色代碼的上下文關係：
<p><strong>我是粗體字，不是斜體字，因爲我不在列表當中，所以這個規則對我不起作用</strong></p> <ol><li><strong>我是斜體字。這是因爲 strong 元素位於 li 元素內。</strong></li><li>我是正常的字體。</li> </ol>
在上面的例子中，只有 li 元素中的 strong 元素的樣式爲斜體字，無需爲 strong 元素定義特別的 class 或 id，代碼更加簡潔。同時，兩個元素之間的層次間隔可以是無限的。
ul em {color:red;}
<ul>
<li>List item 1
<ol>
<li>List item 1-1</li>
<li>List item 1-2</li>
<li>List item 1-3
<ol>
<li>List item 1-3-1</li>
<li>List item <em>1-3-2</em></li>
<li>List item 1-3-3</li>
</ol>
</li>
<li>List item 1-4</li>
</ol>
</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
子元素選擇器
h1 > strong {color:red;}
這個規則會把第一個 h1 下面的 strong 元素變爲紅色，但是第二個 strong 不受影響：
<h1>This is <strong>very</strong> important.</h1> <h1>This is <em>really <strong>very</strong></em> important.</h1>
相鄰兄弟選擇器
如果需要選擇緊接在另一個元素後的元素，而且二者有相同的父元素，可以使用相鄰兄弟選擇器
id 選擇器
id 選擇器以 "#" 來定義
在現代佈局中，id 選擇器常常用於建立派生選擇器。
#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}
id選擇器經常與派生選擇器一塊使用
#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}
類選擇器
在 CSS 中，類選擇器以一個點號顯示：
.center {text-align: center}
我們假設 class 爲 important 的所有元素都是粗體，而 class 爲 warning 的所有元素爲斜體，class 中同時包含 important 和 warning 的所有元素還有一個銀色的背景 。就可以寫作：
.important {font-weight:bold;}
.warning {font-weight:italic;}
.important.warning {background:silver;}
通過把兩個類選擇器鏈接在一起，僅可以選擇同時包含這些類名的元素（類名的順序不限）。
屬性選擇器
[title]
{
color:red;
}
IE6還不支持屬性選擇器
如何插入樣式表
1.外部樣式表
當樣式需要應用於很多頁面時，外部樣式表將是理想的選擇。在使用外部樣式表的情況下，你可以通過改變一個文件來改變整個站點的外觀。每個頁面使用 <link> 標籤鏈接到樣式表。<link> 標籤在（文檔的）頭部：
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
2.內部樣式表
當單個文檔需要特殊的樣式時，就應該使用內部樣式表。你可以使用 <style> 標籤在文檔頭部定義內部樣式表，就像這樣:
<head>
<style type="text/css">
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
</style>
</head>
#red{color:red;}#green{color:green;}
下面的 HTML 代碼中，id 屬性爲 red 的 p 元素顯示爲紅色，而 id 屬性爲 green 的 p 元素顯示爲綠色。
<pid="red">這個段落是紅色。</p> <pid="green">這個段落是綠色。</p>
3.內聯樣式
由於要將表現和內容混雜在一起，內聯樣式會損失掉樣式表的許多優勢。請慎用這種方法，例如當樣式僅需要在一個元素上應用一次時。
要使用內聯樣式，你需要在相關的標籤內使用樣式（style）屬性。Style 屬性可以包含任何 CSS 屬性。本例展示如何改變段落的顏色和左外邊距：
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>