摘要：摘自設(shè)計(jì)指南樣式來(lái)源上文中提到，之所以有層疊的概念，是因?yàn)橛卸鄠€(gè)樣式來(lái)源。優(yōu)先級(jí)相同條件下例如都來(lái)自引用樣式，覆蓋的默認(rèn)規(guī)則是后者覆蓋前者，但是有一個(gè)特殊情況，其實(shí)優(yōu)先級(jí)最高。

這一節(jié)就開(kāi)始實(shí)踐上一節(jié)的思路！

簡(jiǎn)言之，層疊就是瀏覽器對(duì)多個(gè)樣式來(lái)源進(jìn)行疊加，最終確定結(jié)果的過(guò)程。舉一個(gè)簡(jiǎn)單的例子：

上圖中有兩個(gè)樣式來(lái)源，第一個(gè)是引用的css1.css，第二個(gè)是自己在style中編寫(xiě)的樣式?！皩盈B”是個(gè)疊加的過(guò)程，可通過(guò)下圖表示：

層疊是CSS的核心機(jī)制，理解了它才能以最經(jīng)濟(jì)的方式寫(xiě)出最容易改動(dòng)的CSS，讓文檔外觀在達(dá)到設(shè)計(jì)要求的同時(shí)，也給用戶留下一些空間，讓他們根據(jù)需要更改文檔的顯示效果，例如調(diào)整字號(hào)?！浴禖SS設(shè)計(jì)指南》

上文中提到，css之所以有“層疊”的概念，是因?yàn)橛卸鄠€(gè)樣式來(lái)源。其實(shí)css的樣式來(lái)源有下列5個(gè)（由上至下為優(yōu)先級(jí)由高至低），開(kāi)發(fā)人員只能接觸到上面3個(gè)。

第一，瀏覽器默認(rèn)樣式表
當(dāng)你不為html設(shè)置任何樣式時(shí)，b標(biāo)簽會(huì)顯示粗體、p有縱向margin、h1字號(hào)比p大一倍……這是為什么呢？

因?yàn)闉g覽器自帶一個(gè)默認(rèn)的樣式，如果html中沒(méi)有為標(biāo)簽設(shè)置樣式，則瀏覽器會(huì)按照自己的樣式來(lái)顯示。但是瀏覽器默認(rèn)樣式的級(jí)別是最低的，一旦有其他地方設(shè)置了標(biāo)簽樣式，瀏覽器默認(rèn)樣式就會(huì)被覆蓋掉。

注意，不同瀏覽器的默認(rèn)樣式有些地方是不一樣的。例如，我們?cè)趯?xiě)css時(shí)，都會(huì)首先設(shè)置 * {margin:0; padding:0;}，這是為何？就是因?yàn)橛袨g覽器兼容性問(wèn)題。干脆，全部弄成0，這樣各個(gè)瀏覽器就都統(tǒng)一了。

我們下一節(jié)專門(mén)解說(shuō)默認(rèn)樣式，有很多值得玩味的地方。

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

其實(shí)瀏覽器也有這樣的設(shè)置，例如chrome瀏覽器中，我們就可以設(shè)置字號(hào)和字體。

用戶在這里設(shè)置了字體和字號(hào)之后，它們會(huì)覆蓋掉瀏覽器默認(rèn)的樣式。

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

第四，