1、ID和類 我們首先簡(jiǎn)單的說明一下什么是ID和類。ID是一個(gè)標(biāo)識(shí)碼，因此在一個(gè)HTML頁面中，ID只能出現(xiàn)一次；而類相當(dāng)于一種類別，屬于一種類的可以是一個(gè)也可以是多個(gè)，因此類可以在頁面中無限次地使用。知道了兩者的區(qū)別，我們就使用事例來說明。
<!--應(yīng)用ID-->
<!--HTML頁面-->
<p id="highlight">This paragraph has red text.</p>
<p id="default">This paragraph has dark gray text.</p>
/*css頁面*/
/*Define highlighted text*/
#highlight{color:#F00;}
/*Define default text*/
#default{color:#333;}
/*Adjust the color of p when used as a title*/
p#title{color:#F00;}
上面的事例第一段文字是紅色的，第二段將是灰色的，就因?yàn)樗麄兊膇d不同，因此引用了不同選擇器�？荚嚢商崾緋#title{color:#F00;}只有在p這個(gè)選擇器下?lián)碛衪itle這個(gè)id的文字將是紅色的，其他的選擇器將不會(huì)使用這個(gè)樣式。
使用ID的場(chǎng)合：ID應(yīng)該為每個(gè)頁面唯一存在并僅使用一次的元素保留，如頁眉、邊欄、主導(dǎo)航欄或者頁腳等。
<!--應(yīng)用類-->
<!--HTML頁面-->
<p class="highlight">This paragraph has red text.</p>
<p class="default">This paragraph has dark gray text.</p>
<p class="default">This paragraph also has dark gray text.</p>
/*css頁面*/
/*Define highlighted text*/
.highlight{color:#F00;}
/*Define default text*/
.default{color:#333;}
這次的顯示和前面是一樣的，ID通過‘#‘來定義，而類通過‘.‘來定義；很簡(jiǎn)單吧，當(dāng)你可以熟練的使用上面這些內(nèi)容就可以基本的完成html上一半的任務(wù)了，當(dāng)然需要靈活應(yīng)用拉。
使用類的場(chǎng)合：類很靈活的使用在各個(gè)場(chǎng)所，在頁面中只會(huì)出現(xiàn)一次的如頁眉、邊欄、主導(dǎo)航欄或者頁腳最好不要使用類；另外千萬注意：類主要用來定義正常樣式的例外情況，而不是用來定義標(biāo)準(zhǔn)樣式的。
2、使用層疊
css（層疊樣式表），里面的層疊是什么意思呢？命名上存在的東西應(yīng)該很重要把，我想使用通俗的方式來解釋可能更加容易理解。層疊就是當(dāng)我對(duì)同一個(gè)選擇器多次定義了它的樣式，應(yīng)該以怎么樣的規(guī)則來確定最后選擇器的樣式。
比如我在外部樣式內(nèi)定義了p的文本都是紅色的，我又在其中一個(gè)頁面的頭部定義p是黑色的，這個(gè)頁面里面兩個(gè)p，一個(gè)加上了灰色，一個(gè)我們沒有進(jìn)行定義。那我們選擇哪個(gè)顏色應(yīng)用在兩個(gè)p上面呢？加上灰色的p應(yīng)該是灰色沒有問題。另外一個(gè)沒有定義樣式的是紅色還是黑色？這個(gè)就是層疊的原則，你學(xué)會(huì)了層疊的原則就會(huì)知道沒有定義樣式的p是黑色的。那下面我們就來學(xué)習(xí)層疊的一些原則把。
利用不同的應(yīng)用方法實(shí)現(xiàn)層疊：
瀏覽器首先執(zhí)行內(nèi)聯(lián)規(guī)則，然后執(zhí)行所有在<head>中的其他內(nèi)嵌規(guī)則，最后再查找外部文件來完全理解你所創(chuàng)建的css。
通過多個(gè)外部樣式表層疊：
當(dāng)一個(gè)頁面中引用了多個(gè)外部樣式表，則瀏覽器認(rèn)為最后一個(gè)樣式表最重要。也就是說如果幾個(gè)外部樣式同時(shí)定義了同一選擇器的不同屬性，則以最后面那個(gè)樣式表為準(zhǔn)。
通過導(dǎo)入樣式表實(shí)施層疊：
導(dǎo)入樣式表的層次性也和外部樣式相同，最后導(dǎo)入的最重要。
總結(jié)上面幾點(diǎn)：我們只需要牢記，越晚給定的規(guī)則越重要這條原則基本就夠用了。
層次的最底層：
處于層疊層次最底層的樣式是瀏覽器自己的默認(rèn)樣式表。如果你沒有定義的樣式最終就會(huì)以默認(rèn)的樣式來表現(xiàn)，如果你定義了樣式，那就會(huì)覆蓋掉（層疊）默認(rèn)樣式。
建議：你需要時(shí)刻小心使用層疊�？缍鄠�(gè)樣式表跟蹤層疊通常是一件非常困難的事情，你增加的樣式，往往會(huì)在你不知情的情況下把別的頁面的正確樣式覆蓋掉導(dǎo)致錯(cuò)誤，而且無法測(cè)試，只能通過眼睛看才知道。（希望那位高人可以做一些軟件提供提示功能就好了，懶人妄想中）
3、分組 /*Heading styles */
h1,h2,h3{
font-family:Helvetica,Arial,sans-serif;
line-height:140%;
color:#333;
}
/*Additionally,render all h1 headings in italics */
h1{font-style:italic;}
上面這段樣式通過h1,h2,h3對(duì)這三個(gè)選擇器進(jìn)行了分組，使他們一樣的樣式集合在了一起，而需要額外增加h1的樣式在后面加上就可以了。這樣做的好處就是縮小了定義樣式文件的容量。
4、繼承 這里的繼承不同于面向?qū)ο蟮睦^承原理。還是距離說明把：
<p style="color:#F00">This <span>paragraph</span> has red text.</p>
如果樣式中沒有對(duì)span進(jìn)行定義的話，整句話還是顯示紅色！這就是繼承，span繼承了p的樣式。
建議：在一個(gè)結(jié)構(gòu)良好的HTML文件中，body是所有可視結(jié)點(diǎn)的父元素，因此每個(gè)元素都可以從它繼承相關(guān)信息。繼承的強(qiáng)大也需要時(shí)刻的小心，你必須清楚地知道哪些地方需要使用繼承，哪些地方不需要，不要被繼承搞得糊里糊涂。
