原創聲明:本文為作者原創，未經允許不得轉載，經授權轉載需注明作者和出處
插入樣式表的方法有三種:
外部樣式表（推薦使用）
當樣式需要應用于很多頁面時，外部樣式表將是理想的選擇。在使用外部樣式表的情況下，你可以通過改變一個文件來改變整個站點的外觀。<link> 標簽在（文檔的）頭部。
<head>
<link rel="stylesheet" type="text/css" href="maomao.css">
</head>
內部樣式表
當單個文檔需要特殊的樣式時，就應該使用內部樣式表。你可以使用 <style> 標簽在文檔頭部定義內部樣式表。
<head>
<style>
hr {color:#000;}
p {margin-left:20px;}
body {background-image:url("images/maomao.gif");}
</style>
</head>
內聯樣式
由于要將表現和內容混雜在一起，內聯樣式會損失掉樣式表的許多優勢。請慎用這種方法，例如當樣式僅需要在一個元素上應用一次時。
要使用內聯樣式，你需要在相關的標簽內使用樣式（style）屬性。Style 屬性可以包含任何 CSS 屬性。
<p style="color:#000;margin-left:20px">跟茂茂研究CSS</p>
層疊次序
當同一個 HTML 元素被不止一個樣式定義時，會使用哪個樣式呢？
一般來說，所有的樣式會根據下面的規則層疊于一個新的虛擬樣式表中
- 瀏覽器缺省設置
- 外部樣式表
- 內部樣式表（位于 <head> 標簽內部）
- 內聯樣式（在 HTML 元素內部）
因此，內聯樣式（在 HTML 元素內部）擁有最高的優先權，這意味著它將優先于以下的樣式聲明：
標簽中的樣式聲明>內部樣式表中的樣式聲明>外部樣式表中的樣式聲明>瀏覽器中的樣式聲明（缺省值）。
但是用!important可以改變優先級順序，例：
h1的樣式表中瀏覽器會把h1的字體顏色設置為白色，因為CSS執行順序是h1{ color: #000!important; color: #fff; } h2{ color: #000!important; color: #fff; }（同級）后來者居上
h2的樣式表中瀏覽器會把h2的字體顏色設置為黑色，因為!important把該樣式的優先級設置為最大優先級，所以不管后面寫多少都會優先讀取該樣式
當!important聲明沖突時，會按照CSS執行順序執行：
標簽中的樣式聲明>內部樣式表中的樣式聲明>外部樣式表中的樣式聲明>瀏覽器中的樣式聲明（缺省值）
CSS權重計算規則
CSS2.1規范中定義了樣式規則的計算方式，使用一個4位數字串來表示權重，每個選擇器的權重決定了使用哪種樣式，使用的規則有如下幾種：
- 元素的內聯樣式屬性，加1,0,0,0
- 每個id選擇器，加0,1,0,0
- 每個class選擇器、屬性選擇器及偽類，加0,0,1,0
- 每個元素及偽元素（如：
first-child）,加0,0,0,1 - 全局選擇器（
*）,加0,0,0,0h1 {color: #000;} /* 只有一個普通元素加成，結果是 0,0,0,1 */ body h1 {color: #222;} /* 兩個普通元素加成，結果是 0,0,0,2 */ /*后者勝出*/ h2.grape {color: #444;} /* 一個普通元素、一個class選擇符加成，結果是 0,0,1,1*/ h2 {color: #666;} /*一個普通元素，結果是 0,0,0,1 */ /*前者勝出*/ html > body table tr[id=”totals”] td ul > li {color: #888;} /* 7個普通元素、一個屬性選擇符、兩個其他選擇符，結果是0,0,1,7 */ li#answer {color: #123456;} /* 一個ID選擇符，一個普通選擇符，結果是0,1,0,1 */ /*后者勝出*/
喜歡的小伙伴們就打賞下（嘿嘿）
上期回顧：CSS新手學習一（語法、注釋、選擇器）
下期內容：更新中
共18條評論
Ctrl+Enter
