CSS 概述
CSS 指層疊樣式表 (Cascading Style Sheets)，用於定義如何顯示 HTML 標籤，進行美化頁面，css通常存儲在樣式表中。
css有三種存在方式
標籤內聯、頁面嵌入和外部引入，比較三種方式的優缺點。
在標籤中使用 style='xx:xxx;'
在頁面中嵌入 < style type="text/css"> </style > 塊
引入外部css文件
注意：
當有多個css對同一個標籤的的樣式進行定義的時候，會按如下的順序進行加載，越靠後，優先級越高。
1.瀏覽器缺省設置
2.外部樣式表
3. 內部樣式表（位於 <head> 標籤內部）
4. 內聯樣式（在 HTML 標籤內部）
因此，內聯樣式（在 HTML 標籤內部）擁有最高的優先權，這意味着它將優先於以下的樣式聲明：<head> 標籤中的樣式聲明，外部樣式表中的樣式聲明，或者瀏覽器中的樣式聲明（缺省值）。
基礎語法：
CSS 規則由兩個主要的部分構成：選擇器，以及一條或多條聲明。
selector {declaration1; declaration2; ... declarationN }
選擇器通常是您需要改變樣式的 HTML 標籤。
每條聲明由一個屬性和一個值組成。
屬性（property）是您希望設置的樣式屬性（style attribute）。每個屬性有一個值。屬性和值被冒號分開。
selector {property: value}
下面這行代碼的作用是將 h1 標籤內的文字顏色定義爲紅色，同時將字體大小設置爲 14 像素。
在這個例子中，h1 是選擇器，color 和 font-size 是屬性，red 和 14px 是值。
h1 {color:red; font-size:14px;}
下面的示意圖爲您展示了上面這段代碼的結構：
值的不同寫法和單位
除了英文單詞 red，我們還可以使用十六進制的顏色值 #ff0000：
p { color: #ff0000; }
爲了節約字節，我們可以使用 CSS 的縮寫形式：
p { color: #f00; }
我們還可以通過兩種方法使用 RGB 值：
p { color: rgb(255,0,0); }
p { color: rgb(100%,0%,0%); }
請注意，當使用 RGB 百分比時，即使當值爲 0 時也要寫百分比符號。但是在其他的情況下就不需要這麼做了。比如說，當尺寸爲 0 像素時，0 之後不需要使用 px 單位，因爲 0 就是 0，無論單位是什麼。
注意寫引號
提示：如果值爲若干單詞，則要給值加引號：
p {font-family: "sans serif";}
多重聲明：
提示：如果要定義不止一個聲明，則需要用分號將每個聲明分開。下面的例子展示出如何定義一個紅 色文字的居中段落。最後一條規則是不需要加分號的，因爲分號在英語中是一個分隔符號，不是結束符號。然而，大多數有經驗的設計師會在每條聲明的末尾都加上 分號，這麼做的好處是，當你從現有的規則中增減聲明時，會儘可能地減少出錯的可能性。就像這樣：
p {text-align:center; color:red;}
你應該在每行只描述一個屬性，這樣可以增強樣式定義的可讀性，就像這樣：
p {
text-align: center;
color: black;
font-family: arial;
}
空格和大小寫：
大多數樣式表包含不止一條規則，而大多數規則包含不止一個聲明。多重聲明和空格的使用使得樣式表更容易被編輯：
body {
color: #000;
background: #fff;
margin: 0;
padding: 0;
font-family: Georgia, Palatino, serif;
}
是否包含空格不會影響 CSS 在瀏覽器的工作效果，同樣，與 XHTML 不同，CSS 對大小寫不敏感。不過存在一個例外：如果涉及到與 HTML 文檔一起工作的話，class 和 id 名稱對大小寫是敏感的。
選擇器的分組
你可以對選擇器進行分組，這樣，被分組的選擇器就可以分享相同的聲明。用逗號將需要分組的選擇器分開。在下面的例子中，我們對所有的標題標籤進行了分組。所有的標題標籤都是綠色的。
h1,h2,h3,h4,h5,h6 {
color: green;
}
繼承及其問題
根據 CSS，子標籤從父標籤繼承屬性。但是它並不總是按此方式工作。看看下面這條規則：
body {
font-family: Verdana, sans-serif;
}
根據上面這條規則，站點的 body 標籤將使用 Verdana 字體（假如訪問者的系統中存在該字體的話）。
通過 CSS 繼承，子標籤將繼承最高級標籤（在本例中是 body）所擁有的屬性（這些子標籤諸如 p, td, ul, ol, ul, li, dl, dt,和 dd）。不需要另外的規則，所有 body 的子標籤都應該顯示 Verdana 字體，子標籤的子標籤也一樣。並且在大部分的現代瀏覽器中，也確實是這樣的。
但是在那個瀏覽器大戰的血腥年代裏，這種情況就未必會發生，那時候對標準的支持並不是企業的優先選擇。比方說，Netscape 4 就不支持繼承，它不僅忽略繼承，而且也忽略應用於 body 標籤的規則。IE/Windows 直到 IE6 還存在相關的問題，在表格內的字體樣式會被忽略。我們又該如何是好呢？
如果你不希望 "Verdana, sans-serif" 字體被所有的子標籤繼承，又該怎麼做呢？比方說，你希望段落的字體是 Times。沒問題。創建一個針對 p 的特殊規則，這樣它就會擺脫父標籤的規則：
body {
font-family: Verdana, sans-serif;
}
td, ul, ol, ul, li, dl, dt, dd {
font-family: Verdana, sans-serif;
}p {
font-family: Times, "Times New Roman", serif;
}
CSS 標籤選擇器
最常見的 CSS 選擇器是標籤選擇器。換句話說，文檔的標籤就是最基本的選擇器。
如果設置 HTML 的樣式，選擇器通常將是某個 HTML 標籤，比如 p、h1、em、a，甚至可以是 html 本身：
html {color:black;}
h1 {color:blue;}
h2 {color:silver;}
可以將某個樣式從一個標籤切換到另一個標籤。
假設您決定將上面的段落文本（而不是 h1 標籤）設置爲灰色。只需要把 h1 選擇器改爲 p：
html {color:black;}p {color:gray;}h2 {color:silver;}
類型選擇器
在 W3C 標準中，標籤選擇器又稱爲類型選擇器（type selector）。
“類型選擇器匹配文檔語言標籤類型的名稱。類型選擇器匹配文檔樹中該標籤類型的每一個實例。”
下面的規則匹配文檔樹中所有 h1 標籤：
h1 {font-family: sans-serif;}
因此，我們也可以爲 XML 文檔中的標籤設置樣式：
XML 文檔：
<?xml version="1.0" encoding="ISO-8859-1"?><?xml-stylesheet type="text/css" href="note.css"?><note>
<to>George</to>
<from>John</from>
<heading>Reminder</heading>
<body>Don't forget the meeting!</body>
</note>
CSS 文檔：
note
{
font-family:Verdana, Arial;
margin-left:30px;
}
to
{
font-size:28px;
display: block;
}
from
{
font-size:28px;
display: block;
}
heading
{
color: red;
font-size:60px;
display: block;
}
body
{
color: blue;
font-size:35px;
display: block;
}
CSS類選擇器
類選擇器允許以一種獨立於文檔標籤的方式來指定樣式。
該選擇器可以單獨使用，也可以與其他標籤結合使用。
提示：只有適當地標記文檔後，才能使用這些選擇器，所以使用這兩種選擇器通常需要先做一些構想和計劃。
要應用樣式而不考慮具體設計的標籤，最常用的方法就是使用類選擇器。
修改HTML代碼
在使用類選擇器之前，需要修改具體的文檔標記，以便類選擇器正常工作。
爲了將類選擇器的樣式與標籤關聯，必須將 class指定爲一個適當的值。請看下面的HTML代碼：
<h1
class="important">
This
heading is very important.
</h1>
<p
class="important">
This
paragraph is very important.
</p>
在上面的代碼中，兩個標籤的 class都指定爲 important：第一個標題（h1標籤），第二個段落（p標籤）。
語法
然後我們使用以下語法向這些歸類的標籤應用樣式，即類名前有一個點號（.），然後結合通配選擇器：
*.important
{color:red;}
如果您只想選擇所有類名相同的標籤，可以在類選擇器中忽略通配選擇器，這沒有任何不好的影響：
.important
{color:red;}
結合標籤選擇器
類選擇器可以結合標籤選擇器來使用。
例如，您可能希望只有段落顯示爲紅色文本：
p.important
{color:red;}
選擇器現在會匹配 class屬性包含 important的所有 p標籤，但是其他任何類型的標籤都不匹配，不論是否有此class屬性。選擇器 p.important解釋爲：“其 class屬性值爲 important的所有段落”。 因爲 h1標籤不是段落，這個規則的選擇器與之不匹配，因此h1標籤不會變成紅色文本。
如果你確實希望爲 h1標籤指定不同的樣式，可以使用選擇器h1.important：
p.important
{color:red;}
h1.important
{color:blue;}
CSS多類選擇器
在上一節中，我們處理了 class值中包含一個詞的情況。在 HTML中，一個 class值中可能包含一個詞列表，各個詞之間用空格分隔。例如，如果希望將一個特定的標籤同時標記爲重要（important）和警告（warning），就可以寫作：
<p
class="important warning">
This
paragraph is a very important warning.
</p>
這兩個詞的順序無關緊要，寫成 warning important 也可以。
我們假設 class爲 important的所有標籤都是粗體，而 class爲 warning的所有標籤爲斜體，class中同時包含 important和 warning的所有標籤還有一個銀色的背景 。就可以寫作：
.important
{font-weight:bold;}
.warning
{font-style:italic;}
.important.warning
{background:silver;}
通過把兩個類選擇器鏈接在一起，僅可以選擇同時包含這些類名的標籤（類名的順序不限）。
如果一個多類選擇器包含類名列表中沒有的一個類名，匹配就會失敗。請看下面的規則：
.important.urgent
{background:silver;}
不出所料，這個選擇器將只匹配 class屬性中包含詞 important和 urgent的 p標籤。因此，如果一個 p標籤的 class屬性中只有詞 important和 warning，將不能匹配。不過，它能匹配以下標籤：
<p
class="important urgent warning">
This
paragraph is a very important and urgent warning.
</p>
注意：在 IE7之前的版本中，不同平臺的 Internet Explorer 都不能正確地處理多類選擇器。
CSS ID 選擇器
在某些方面，ID選擇器類似於類選擇器，不過也有一些重要差別。
語法
首先，ID選擇器前面有一個 #號 -也稱爲棋盤號或井號。
請看下面的規則：
*#intro
{font-weight:bold;}
與類選擇器一樣，ID選擇器中可以忽略通配選擇器。前面的例子也可以寫作：
#intro
{font-weight:bold;}
這個選擇器的效果將是一樣的。
第二個區別是 ID選擇器不引用 class屬性的值，毫無疑問，它要引用 id屬性中的值。
以下是一個實際 ID選擇器的例子：
<p
id="intro">This is a paragraph of introduction.</p>
類選擇器和ID選擇器的異同
在類選擇器這一章中我們曾講解過，可以爲任意多個元素指定類。前一章中類名important被應用到 p和 h1元素，而且它還可以應用到更多元素。
區別1：只能在文檔中使用一次
與類不同，在一個 HTML文檔中，ID選擇器會使用一次，而且僅一次。
區別2：不能使用ID詞列表
不同於類選擇器，ID選擇器不能結合使用，因爲 ID屬性不允許有以空格分隔的詞列表。
區別3：ID能包含更多含義
類似於類，可以獨立於元素來選擇ID。有些情況下，您知道文檔中會出現某個特定ID值，但是並不知道它會出現在哪個元素上，所以您想聲明獨立的ID選擇器。例如，您可能知道在一個給定的文檔中會有一個ID值爲 mostImportant的元素。您不知道這個最重要的東西是一個段落、一個短語、一個列表項還是一個小節標題。您只知道每個文檔都會有這麼一個最重要的內容，它可能在任何元素 中，而且只能出現一個。在這種情況下，可以編寫如下規則：
#mostImportant
{color:red; background:yellow;}
這個規則會與以下各個元素匹配（這些元素不能在同一個文檔中同時出現，因爲它們都有相同的ID值）：
<h1
id="mostImportant">This is important!</h1>
<em
id="mostImportant">This is important!</em>
<ul
id="mostImportant">This is important!</ul>
區分大小寫
請注意，類選擇器和 ID選擇器可能是區分大小寫的。這取決於文檔的語言。HTML和 XHTML將類和 ID值定義爲區分大小寫，所以類和 ID值的大小寫必須與文檔中的相應值匹配。
因此，對於以下的 CSS和 HTML，元素不會變成粗體：
#intro
{font-weight:bold;}
<p
id="Intro">This is a paragraph of introduction.</p>
由於字母 i的大小寫不同，所以選擇器不會匹配上面的元素。
參考：
http://www.w3school.com.cn
http://www.cnblogs.com/wupeiqi/