CSS基礎 4 CSS樣式的層疊與繼承

一、樣式衝突的解決之道

二、標籤樣式：直接修改預設樣式

三、類樣式定義

四、id樣式

五、行內樣式

網頁上乙個元素的樣式可能來自很多地方，有瀏覽器預設的樣式，也有使用者為這個標籤定義的樣式，還有標籤上應用的類樣式等。當有來自多個不同地方的樣式作用到同乙個元素上時，必須有一套機制來解決這種樣式上的衝突。

關於自定義標籤樣式，首先會想到，將包裝元素的標籤樣式重新定義。如果標籤樣式修改了，那麼標籤裡的元素樣式自然也被修改了。

通過以下這個簡單的例子進行演示：

紅框內的即為瀏覽器為h2標籤設定的預設樣式。

現在我們在本地css檔案中手動設定h2標籤的樣式：

css**：

h2

可以發現瀏覽器中出現了我們設定的樣式(紅框中),而且被覆蓋的預設樣式被劃掉了(籃框):

如果要將頁面上某些元素，設定成統一的外觀，就要用到類樣式了。

類樣式與標籤樣式的關聯：他們最終都要作用到具體的元素上來改變元素外觀。

類樣式與標籤樣式的區別：標籤樣式直接修改預設樣式；而類樣式僅僅作為標籤中class屬性的值存在，因此類樣式可以作用到更多的標籤上，甚至其他頁面都可以引用，所以更加通用，類樣式優先順序要大於標籤樣式。

所謂類樣式，就是根據元素用途來為它定製樣式，至於應用到什麼標籤上並不重要。

現有一段html**：

行業區塊鏈（consortiumblockchains)：由某個群體內部指定多個預選的節點為記賬人，每個塊的生成由所有的預選節點共同決定（預選節點參與共識過程），其他接入節點可以參與交易，但不過問記賬過程(本質上還是託管記賬，只是變成分布式記賬，預選節點的多少，如何決定每個塊的記賬者成為該區塊鏈的主要風險點），其他任何人可以通過該區塊鏈開放的api進行限定查詢。私有區塊鏈私有區塊鏈（privateblockchains)：僅僅使用區塊鏈的總賬技術進行記賬，可以是乙個公司，也可以是個人，獨享該區塊鏈的寫入許可權，本鏈與其他的分布式儲存方案沒有太大區別。(dec2015)保守的巨頭（傳統金融）都是想實驗嘗試私有區塊鏈，而公鏈的應用例如bitcoin已經工業化，私鏈的應用產品還在摸索當中。

網頁顯示效果：

我們現在想把所有標題設定為乙個樣式，所有文字設定為乙個樣式。但是觀察原始碼你會發現，標題乙個被h2標籤包裝，另乙個被p標籤包裝；而文字乙個被p標籤包裝，另乙個被div標籤包裝。所以直接用標籤樣式，會很不方便。

此時我們可以用類樣式，我們可以設定乙個標題類，用於設定所有標題的樣式；再設定乙個文字類，用於設定所有文字的樣式。

html**：

css**：

.headline .content

頁面顯示效果：

如果你覺得第二個標題更重要，想將其設定為紅色，最簡單的方法在定義乙個類，首先在第二個標籤的類屬性中再增加乙個值如red，再在樣式檔案中追加乙個類樣式，設定為紅色即可。

html修改**：

私有區塊鏈 /*兩個屬性值以空格分開*/

css追加**：

.red

具有id屬性的元素，在當前頁面中應該是唯一的。所以通過id屬性新增到元素的樣式，優先順序要大於類樣式。

id樣式用的並不多，但有的時候非他不可。

示例：html**：

行業區塊鏈（consortiumblockchains)：由某個群體內部指定多個預選的節點為記賬人，每個塊的生成由所有的預選節點共同決定（預選節點參與共識過程），其他接入節點可以參與交易，但不過問記賬過程(本質上還是託管記賬，只是變成分布式記賬，預選節點的多少，如何決定每個塊的記賬者成為該區塊鏈的主要風險點），其他任何人可以通過該區塊鏈開放的api進行限定查詢。

css**：

h2 .blue #red

在css檔案中，我們分別設定了標籤樣式、類樣式和id樣式。我檢視一下網頁的顯示效果和瀏覽器開發者工具：

發現最後顯示的是id樣式的效果，說明優先順序：id樣式》類樣式》標籤樣式。

行內樣式是通過標籤屬性style進行設定，其樣式僅適用於當前元素。

類樣式和id樣式，也是通過標籤屬性來呼叫，但是他們的樣式**是寫在標籤外面的，可以被多個標籤呼叫，所以行內樣式的作用範圍最小，優先順序最高。

html**：

css**：

img .blue #red

檢視網頁顯示效果和瀏覽器開發者工具：

總結：優先順序行內樣式》id樣式》類樣式》標籤樣式

CSS基礎 4 CSS樣式的層疊與繼承

css樣式教程 4 CSS的Text 文字

css層疊樣式

css層疊樣式

CSS基礎 4 CSS樣式的層疊與繼承

css樣式教程 4 CSS的Text 文字

css層疊樣式

css層疊樣式

相關推薦