上一節《[css知多少（2）——學習css的思路](http://www.cnblogs.com/wangfupeng1988/p/4276321.html)》有幾個人留言表示思路很好、繼續期待，而且收到了9個贊，我還是比較欣慰的。沒看過的朋友建議先去看看上一節。 　　這一節就開始實踐上一節的思路！ ## 1\. “層疊”的概念 　　CSS——層疊樣式表，其中的“層疊”是什么意思呢？層疊就是瀏覽器對多個樣式來源進行疊加，最終確定結果的過程。舉一個簡單的例子： ?　　 ?????? 上圖中有兩個樣式來源，第一個是引用的css1.css，第二個是自己在style中編寫的樣式。“層疊”是個疊加的過程，可通過下圖表示： ?　　 ?????? 上面用一個簡單的例子來說明了層疊的過程，形象的體驗一下。 ???????**層疊是CSS****的核心機制**，理解了它才能以最經濟的方式寫出最容易改動的CSS，讓文檔外觀在達到設計要求的同時，也給用戶留下一些空間，讓他們根據需要更改文檔的顯示效果，例如調整字號。——摘自《CSS設計指南》 ## 2．樣式來源 ?????? 上文中提到，css之所以有“層疊”的概念，是因為有多個樣式來源。其實css的樣式來源有5個，開發人員只能接觸到后面3個。 　　 **第一，瀏覽器默認樣式表** ?????? 當你不為html設置任何樣式時，顯示在瀏覽器上，b標簽會顯示粗體、p有縱向margin、h1字號比p大一倍……這是為什么呢？ ?????? 因為瀏覽器自帶一個默認的樣式，如果html中沒有為標簽設置樣式，則瀏覽器會按照自己的樣式來顯示。但是瀏覽器默認樣式的級別是最低的，一旦有其他地方設置了標簽樣式，瀏覽器默認樣式就會被沖掉。 ?????? 注意，不同瀏覽器的默認樣式有些地方是不一樣的。例如，我們在寫css時，都會首先設置 * {margin:0; padding:0;}，這是為何？就是因為有瀏覽器兼容性問題。干脆，全部弄成0，這樣各個瀏覽器就都統一了。 ?????? 此處先把默認樣式的代碼貼出來?，我們下一節專門解說默認樣式，有很多值得玩味的地方。 ?瀏覽器默認樣式 ?**第二，用戶樣式表** ?????? 在一些新聞網站中，經常看到可以設置字體大小的快捷菜單，例如下圖就是搜狐新聞中的設置。 ?　　 ?????? 這些是給一些有視覺障礙的人看的，反正我是沒用過，我也有視覺障礙，不過我是通過近視鏡來解決的。 ?????? 其實瀏覽器也有這樣的設置，例如chrome瀏覽器中，我們就可以設置字號和字體。 ?????? ?????? 用戶在這里設置了字體和字號之后，它們會覆蓋掉瀏覽器默認的樣式。 **第三，引用的css文件** ?????? 引用css文件，大家應該都比較熟悉了。 **第四，中編寫的樣式代碼** ?????? 中編寫樣式也都比較熟悉。 **第五，中編寫的樣式代碼** ?????? 標簽style屬性中編寫樣式，也都用過吧。 ?????? 后面這三種是咱們程序開發中比較常用的，這里就不多說了，不了解的朋友需要去補一補基礎知識了。 ## 3．層疊的規則 　　由于樣式的來源不同，瀏覽器在加載樣式時，需要計算出最終的樣式值，這樣才能顯示出正確的界面效果——瀏覽器會通過疊加和覆蓋這兩種方式來生成最終的樣式值。 ?????? 下面是舉例說明： ?　　 ?????? 如上圖，不同來源的兩個樣式，第一個樣式設置了font-weight，第二個沒有，瀏覽器會把它疊加在一起，即瀏覽器會把各個零散的整合成一個整體。第一個樣式color:red，第二個樣式color:blue，瀏覽器會讓后者覆蓋前者，最終結果還是color:blue。 ?????? 覆蓋的默認規則是后者覆蓋前者，但是又一個特殊情況——!important。 ?　　 ?????? 如上圖。雖然color:blue是后來者，但是它沒有居上，因為前者color:red跟著!important。這就像得到一個尚方寶劍，有最高執行權，其他人統統讓路，否則佛擋殺佛。 ## 4．總結 　　本文主要講解了css的5個來源，以及瀏覽器疊加樣式的過程和方法，這是學習css最基礎的知識。下一節將帶領大家一起看看瀏覽器默認樣式到底是什么樣子的，我們又能從其中學到些什么東西？其中有很多好玩的東東，敬請期待！