CSS基礎 | (四)CSS樣式的層疊與繼承
目錄
一、樣式衝突的解決之道
網頁上一個元素的樣式可能來自很多地方，有瀏覽器預設的樣式，也有使用者為這個標籤定義的樣式，還有標籤上應用的類樣式等。當有來自多個不同地方的樣式作用到同一個元素上時，必須有一套機制來解決這種樣式上的衝突。
- 對於同一個元素，將不同的樣式，層層疊加上去，這就是層疊樣式表CSS名稱的由來
- 網頁元素是通過標籤來包裝的，因此主要通過對標籤樣式的設定來達到控制元素顯示的目的
- 標籤樣式主要來自兩個地方：一是瀏覽器預設樣式(不同瀏覽器略有差別)；二是使用者自定義樣式，既可以直接設定在標籤上，也可以作為類樣式，共不同標籤呼叫
- 樣式層疊問題是通過樣式宣告的位置以及涉及的物件來設定樣式不同的優先順序來解決的。例如類樣式的優先順序明顯高於標籤樣式
二、標籤樣式：直接修改預設樣式
關於自定義標籤樣式，首先會想到，將包裝元素的標籤樣式重新定義。如果標籤樣式修改了，那麼標籤裡的元素樣式自然也被修改了。
通過以下這個簡單的例子進行演示：
html程式碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <h2>學習內容：</h2> <ol> <li>html</li> <li>css</li> <li>js</li> </ol> </body> </html>
利用上一節課的內容，開啟瀏覽器開發者工具，檢視h2標籤的樣式：
紅框內的即為瀏覽器為h2標籤設定的預設樣式。
現在我們在本地css檔案中手動設定h2標籤的樣式：
css程式碼：
h2 {
color:red;
font-size: 3em;
}
可以發現瀏覽器中出現了我們設定的樣式(紅框中),而且被覆蓋的預設樣式被劃掉了(籃框):
- 總結：自定義標籤樣式是最直觀的方法，但不推薦這樣做，推薦用類樣式替代標籤樣式。
三、類樣式定義
如果要將頁面上某些元素，設定成統一的外觀，就要用到類樣式了。
類樣式與標籤樣式的關聯：他們最終都要作用到具體的元素上來改變元素外觀。
類樣式與標籤樣式的區別：標籤樣式直接修改預設樣式；而類樣式僅僅作為標籤中class屬性的值存在，因此類樣式可以作用到更多的標籤上，甚至其他頁面都可以引用，所以更加通用，類樣式優先順序要大於標籤樣式。
所謂類樣式，就是根據元素用途來為它定製樣式，至於應用到什麼標籤上並不重要。
現有一段html程式碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h2>聯合（行業）區塊鏈</h2>
<p>行業區塊鏈（ConsortiumBlockChains)：由某個群體內部指定多個預選的節點為記賬人，每個塊的生成由所有的預選節點共同決定（預選節點參與共識過程），
其他接入節點可以參與交易，但不過問記賬過程(本質上還是託管記賬，只是變成分散式記賬，預選節點的多少，如何決定每個塊的記賬者成為該區塊鏈的主要風險點），
其他任何人可以通過該區塊鏈開放的API進行限定查詢。</p>
<p>私有區塊鏈</p>
<div>私有區塊鏈（privateBlockChains)：僅僅使用區塊鏈的總賬技術進行記賬，可以是一個公司，也可以是個人，獨享該區塊鏈的寫入許可權，
本鏈與其他的分散式儲存方案沒有太大區別。(Dec2015)保守的巨頭（傳統金融）都是想實驗嘗試私有區塊鏈，而公鏈的應用例如bitcoin已經工業化，
私鏈的應用產品還在摸索當中。</div>
</body>
</html>
網頁顯示效果：
我們現在想把所有標題設定為一個樣式，所有文字設定為一個樣式。但是觀察原始碼你會發現，標題一個被h2標籤包裝，另一個被p標籤包裝；而文字一個被p標籤包裝，另一個被div標籤包裝。所以直接用標籤樣式，會很不方便。
此時我們可以用類樣式，我們可以設定一個標題類，用於設定所有標題的樣式；再設定一個文字類，用於設定所有文字的樣式。
html程式碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h2 class="headline">聯合（行業）區塊鏈</h2>
<p class="content">行業區塊鏈（ConsortiumBlockChains)：由某個群體內部指定多個預選的節點為記賬人，每個塊的生成由所有的預選節點共同決定（預選節點參與共識過程），
其他接入節點可以參與交易，但不過問記賬過程(本質上還是託管記賬，只是變成分散式記賬，預選節點的多少，如何決定每個塊的記賬者成為該區塊鏈的主要風險點），
其他任何人可以通過該區塊鏈開放的API進行限定查詢。</p>
<p class="headline">私有區塊鏈</p>
<div class="content">私有區塊鏈（privateBlockChains)：僅僅使用區塊鏈的總賬技術進行記賬，可以是一個公司，也可以是個人，獨享該區塊鏈的寫入許可權，
本鏈與其他的分散式儲存方案沒有太大區別。(Dec2015)保守的巨頭（傳統金融）都是想實驗嘗試私有區塊鏈，而公鏈的應用例如bitcoin已經工業化，
私鏈的應用產品還在摸索當中。</div>
</body>
</html>
css程式碼：
.headline {
color:green;
font-size: 1.5em;
font-weight: bold;
}
.content {
color:inherit;
font-size: 1em;
font-weight: lighter;
}
頁面顯示效果：
如果你覺得第二個標題更重要，想將其設定為紅色，最簡單的方法在定義一個類，首先在第二個標籤的類屬性中再增加一個值如red，再在樣式檔案中追加一個類樣式，設定為紅色即可。
html修改程式碼：
<p class="headline red">私有區塊鏈</p>
/*兩個屬性值以空格分開*/css追加程式碼：
.red {
color: red;
}四、id樣式
具有id屬性的元素，在當前頁面中應該是唯一的。所以通過id屬性新增到元素的樣式，優先順序要大於類樣式。
id樣式用的並不多，但有的時候非他不可。
示例：
html程式碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h2 class="blue" id="red">聯合（行業）區塊鏈</h2>
<p>行業區塊鏈（ConsortiumBlockChains)：由某個群體內部指定多個預選的節點為記賬人，每個塊的生成由所有的預選節點共同決定（預選節點參與共識過程），
其他接入節點可以參與交易，但不過問記賬過程(本質上還是託管記賬，只是變成分散式記賬，預選節點的多少，如何決定每個塊的記賬者成為該區塊鏈的主要風險點），
其他任何人可以通過該區塊鏈開放的API進行限定查詢。</p>
</body>
</html>
css程式碼：
h2 {
color:green;
}
.blue {
color:blue;
}
#red {
color:red;
}
在css檔案中，我們分別設定了標籤樣式、類樣式和id樣式。我檢視一下網頁的顯示效果和瀏覽器開發者工具：
發現最後顯示的是id樣式的效果，說明優先順序：id樣式>類樣式>標籤樣式。
五、行內樣式
行內樣式是通過標籤屬性style進行設定，其樣式僅適用於當前元素。
類樣式和id樣式，也是通過標籤屬性來呼叫，但是他們的樣式程式碼是寫在標籤外面的，可以被多個標籤呼叫，所以行內樣式的作用範圍最小，優先順序最高。
以下以給圖片邊框設定顏色為例進行演示：
html程式碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<img src="kenan1.jpg" alt="柯南" class="blue" id="red" style="border:15px solid yellow;">
</body>
</html>
css程式碼：
img {
border: 15px solid green;
}
.blue {
border: 15px solid blue;
}
#red {
border: 15px solid red;
}
檢視網頁顯示效果和瀏覽器開發者工具：
總結：優先順序 行內樣式>id樣式>類樣式>標籤樣式