html 中標籤元素的樣式可以有多種寫法
有鏈結外部樣式表， html 頁面內嵌樣式表與元素內聯樣式
這篇文章就講一下這三種方式引入 css 樣式之間相似處與區別，著重寫三者的優先順序關係。
三者都是通過對 標籤、id、class 進行賦予樣式屬性值，常見用法如下所示
div
.header
font-size: 12px;
}
外部樣式表是先在專案或者 web 上定義好乙個樣式表，再通過 link 的方式匯入進頁面中。這種編寫方式在實際開發中是備受推崇的，因為這樣寫不僅可以規範化頁面**，html 頁面只負責 dom，css 表負責樣式；而且可以把樣式抽象出來供整個專案其他頁面使用，避免了專案中相同元素樣式需要重複定義的問題。
hello-p
hello-span
內聯樣式表是通過標籤內 style 屬性直接將 css 定義在 dom 節點上，由於樣式直接附著在特定 dom 元素上，所以不會與其他樣式產生衝突。缺點也很明顯，將 css **直接寫在 html 頁面中，導致頁面**規範性降低。
hello-span頁面上相同 dom 節點的 css 優先順序是按照內聯 》 內部 》 外部
也就是同一頁面內定義的 css 優先順序總大於外部定義的 css ，而直接定義在元素標籤上的 css 優先順序又比內部樣式表優先順序高。
可同乙個 dom 節點也有不同的表現形式，在繼續比較 css 優先順序之前，我先介紹後續出場的幾種樣式寫法：
一是父子關係節點，如下圖的
一、三，寫法是【parent child】父子節點間用空格隔開。二是使用別名寫法，使用 class 當做 dom 節點的別名進行樣式定義。
優先順序： 別名 》 高層級子節點 》 低層次子節點
div p span
.hello
div span
hello-div
hello-p
hello-span
比較方式
結果外部表 class vs 內部樣式表子層級 vs 內聯
內聯 》 外部表 class 》 內部樣式表子層級【見圖1】
外部表 子層級 vs 內部表 class vs 內聯
內聯 》 內部表 class 》 外部錶子層級【見圖二】
外部表 三層子層級 vs 內部表 二層子層級 vs內聯
內聯》 外部表 三層子層級 》 內部表 二層子層級。【見圖三】
圖一
圖三
可見在內聯無論在什麼情況下都是優先順序最高的。
而往下排是 內聯 》 內部別名 》 外部別名 》 內部高層次節點 》 外部高層次節點 》 內部低層次節點 》 外部低層次節點 》 內部 dom 節點 》 外部 dom 節點。
CSS層疊樣式表（一） 使用CSS樣式的方式
1 html宣告標籤 1 宣告必須是html文件的第一行，位於標籤之前 2 宣告不是html標籤 它是web瀏覽器關於頁面使用哪個html版本進行編寫的指令。3 html5中的宣告格式為 其中，字符集的宣告為 2 內鏈樣式表 如 background color green margin 0 格式 ...
CSS基礎 4 CSS樣式的層疊與繼承
目錄 一 樣式衝突的解決之道 二 標籤樣式 直接修改預設樣式 三 類樣式定義 四 id樣式 五 行內樣式 網頁上乙個元素的樣式可能來自很多地方，有瀏覽器預設的樣式，也有使用者為這個標籤定義的樣式，還有標籤上應用的類樣式等。當有來自多個不同地方的樣式作用到同乙個元素上時，必須有一套機制來解決這種樣式上...
CSS層疊樣式表的理解（一）
使用css時，很多的問題都出現在盒子模型，所以要深刻理解盒子模型，才能夠做好css。盒子模型 margin 外邊距 與父親標籤的content邊界之間的距離 可以認為content邊界位置存在，但不佔任何畫素 border 邊框 標籤自身的邊框的粗細 padding 內邊距 標籤與自己的子元素 孩子...