重拾css(4)——樣式來源與層疊規則

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

1.「層疊」的概念

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

上圖中有兩個樣式來源，第一個是引用的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瀏覽器中，咱們就能夠設置字號和字體。

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

第三，<link>引入的css文件
引用css文件，你們應該都比較熟悉了。

第四，<style>中編寫的樣式代碼
<style>中編寫樣式也都比較熟悉。

第五，<xx style=’ ’>中編寫的行內樣式代碼
標籤style屬性中編寫樣式，也都用過吧。

後面這三種是我們程序開發中比較經常使用的，這裏就很少說了，不瞭解的朋友須要去補一補基礎知識了。

3.層疊的規則

因爲樣式的來源不一樣，瀏覽器在加載樣式時，須要根據優先級計算出最終的樣式值，這樣才能顯示出正確的界面效果——瀏覽器會經過疊加和覆蓋這兩種方式來生成最終的樣式值。

下面是舉例說明：

如上圖，不一樣來源的兩個樣式，第一個樣式設置了font-weight，第二個沒有，瀏覽器會把它疊加在一塊兒，即瀏覽器會把各個零散的整合成一個總體。第一個樣式color:red，第二個樣式color:blue，瀏覽器會讓優先級高者覆蓋低者，最終結果仍是color:blue。

優先級相同條件下（例如都來自引用樣式），覆蓋的默認規則是後者覆蓋前者，可是有一個特殊狀況——!important，其實!important優先級最高。

如上圖。雖然color:blue是後來者，可是它沒有居上，由於前者color:red跟着!important。這就像獲得一個尚方寶劍，有最高執行權，其餘人通通讓路，不然佛擋殺佛。