摘要：摘自設計指南樣式來源上文中提到，之所以有層疊的概念，是因為有多個樣式來源。優先級相同條件下例如都來自引用樣式，覆蓋的默認規則是后者覆蓋前者，但是有一個特殊情況，其實優先級最高。

這一節就開始實踐上一節的思路！

簡言之，層疊就是瀏覽器對多個樣式來源進行疊加，最終確定結果的過程。舉一個簡單的例子：

上圖中有兩個樣式來源，第一個是引用的css1.css，第二個是自己在style中編寫的樣式。“層疊”是個疊加的過程，可通過下圖表示：

層疊是CSS的核心機制，理解了它才能以最經濟的方式寫出最容易改動的CSS，讓文檔外觀在達到設計要求的同時，也給用戶留下一些空間，讓他們根據需要更改文檔的顯示效果，例如調整字號。——摘自《CSS設計指南》

上文中提到，css之所以有“層疊”的概念，是因為有多個樣式來源。其實css的樣式來源有下列5個（由上至下為優先級由高至低），開發人員只能接觸到上面3個。

第一，瀏覽器默認樣式表
當你不為html設置任何樣式時，b標簽會顯示粗體、p有縱向margin、h1字號比p大一倍……這是為什么呢？

因為瀏覽器自帶一個默認的樣式，如果html中沒有為標簽設置樣式，則瀏覽器會按照自己的樣式來顯示。但是瀏覽器默認樣式的級別是最低的，一旦有其他地方設置了標簽樣式，瀏覽器默認樣式就會被覆蓋掉。

注意，不同瀏覽器的默認樣式有些地方是不一樣的。例如，我們在寫css時，都會首先設置 * {margin:0; padding:0;}，這是為何？就是因為有瀏覽器兼容性問題。干脆，全部弄成0，這樣各個瀏覽器就都統一了。

我們下一節專門解說默認樣式，有很多值得玩味的地方。

第二，用戶樣式表
在一些新聞網站中，經常看到可以設置字體大小的快捷菜單，例如下圖就是搜狐新聞中的設置。

其實瀏覽器也有這樣的設置，例如chrome瀏覽器中，我們就可以設置字號和字體。

用戶在這里設置了字體和字號之后，它們會覆蓋掉瀏覽器默認的樣式。

第三，引入的css文件
引用css文件，大家應該都比較熟悉了。

第四，