HTML 中標籤元素的樣式可以有多種寫法
有鏈接外部樣式表， HTML 頁面內嵌樣式表與元素內聯樣式
這篇文章就講一下這三種方式引入 CSS 樣式之間相似處與區別，着重寫三者的優先級關係。
相似：
三者都是通過對 標籤、id、class 進行賦予樣式屬性值，常見用法如下所示
div {
color: #333;
}
.header {
background: #00DDDD;
}
#app {
font-size: 12px;
}
區別：
三者在頁面出現的位置不同
外部樣式表是先在項目或者 Web 上定義好一個樣式表，再通過 link 的方式導入進頁面中。這種編寫方式在實際開發中是備受推崇的，因爲這樣寫不僅可以規範化頁面代碼，HTML 頁面只負責 DOM，CSS 表負責樣式；而且可以把樣式抽象出來供整個項目其他頁面使用，避免了項目中相同元素樣式需要重複定義的問題。
<link rel="stylesheet" type="text/css" href="css/a.css"/>
內部樣式表是直接在 HTML 頁面中定義一個 style 表，出現位置可以是 head 中或者 body 中 DOM 節點後。優點是單頁面內 CSS 樣式方便修改，缺點是在 HTML 頁面中直接出現大量 CSS 代碼，導致代碼規範性較差。
<body>
<div class="app">
hello-DIV
<p class="p">
hello-P
<span class="sp">hello-SPAN</span>
</p>
</div>
<style type="text/css">
span{
color: #0f0;
}
</style>
</body>
內聯樣式表是通過標籤內 style 屬性直接將 CSS 定義在 DOM 節點上，由於樣式直接附着在特定 DOM 元素上，所以不會與其他樣式產生衝突。缺點也很明顯，將 CSS 代碼直接寫在 HTML 頁面中，導致頁面代碼規範性降低。
<span class="sp" style="color: #003333;">hello-SPAN</span>
三者的優先級
本文會以兩個外部樣式表，一個在 body 中定義的內部樣式表以及標籤上的內聯樣式爲樣式基礎進行分析
頁面上相同 DOM 節點的 CSS 優先級是按照 內聯 》 內部 》 外部
也就是同一頁面內定義的 CSS 優先級總大於外部定義的 CSS ，而直接定義在元素標籤上的 CSS 優先級又比內部樣式表優先級高。
可同一個 DOM 節點也有不同的表現形式，在繼續比較 CSS 優先級之前，我先介紹後續出場的幾種樣式寫法：
一是父子關係節點，如下圖的一、三，寫法是【parent child】父子節點間用空格隔開。二是使用別名寫法，使用 class 當做 DOM 節點的別名進行樣式定義。
優先級： 別名 》 高層級子節點 》 低層次子節點
以下的比較是把 內聯、內部、外部與 別名、子節點等結合起來進行比較。
div p span {
color: #aaa;
}
.hello {
color: #ccc;
}
div span {
color: #030;
}
上圖是 CSS 樣式表，下圖是 HTML 表
<div>
hello-DIV
<p>
hello-P
<span class="hello" style="color: #003333;">hello-SPAN</span>
</p>
</div>
而比較方式與結果如下表
| 比較方式 | 結果 |
| 外部表 class VS 內部樣式表子層級 VS 內聯 | 內聯 》 外部表 class 》 內部樣式表子層級【見圖1】 |
| 外部表 子層級 VS 內部表 class VS 內聯 | 內聯 》 內部表 class 》 外部表子層級【見圖二】 |
| 外部表 三層子層級 VS 內部表 二層子層級 VS內聯 | 內聯》 外部表 三層子層級 》 內部表 二層子層級。【見圖三】 |
圖一
圖三
可見在內聯無論在什麼情況下都是優先級最高的。
而往下排是 內聯 》 內部別名 》 外部別名 》 內部高層次節點 》 外部高層次節點 》 內部低層次節點 》 外部低層次節點 》 內部 DOM 節點 》 外部 DOM 節點。