前序介紹
CSS三大特性—— 繼承、 優先級和層疊。繼承：即子類元素繼承父類的樣式;
優先級：是指不同類別樣式的權重比較;
層疊：是說當數量相同時，通過層疊(後者覆蓋前者)的樣式。
a字體
斜體（Italic） 等寬字體（Constant width） 等寬粗體（constant width bold） 等寬斜體（constant width italic）
1.css中塊元素與行內元素
行內元素有：a b span img input select strong（強調的語氣）?
塊級元素有：div ul ol li dl dt dd h1 h2 h3 h4…p?
空元素：即系沒有內容的HTML元素，例如：br、meta、hr、link、input、img
塊元素繼承父元素的屬性，block的默認屬性值是inline
塊級元素生成一個元素框，默認的填充其父元素的內容區，旁邊不能有其他元素。（他在元素框之前和之後生產了“分隔符”）
層疊：即css中的規定的衝突規則。
3.替換元素和非替換元素，還有塊級元素和非塊級元素。替換元素有:img input,等
非替換元素有：span
4.css樣式的講解
<link rel="stylesheet"type="text/css" href="head.css"title="Default layout" >
其中title的屬性值有：方便確定首選樣式
<style type=text/css>@import (head.css) </style>
<style type=text/css>@import (http://example.org/library/head.css) </style>//絕對路徑
相對路徑和絕對路徑（相對路徑是相對引用路徑/絕對路徑是指硬盤或者網絡上的爲位置）
5.選擇器類型
1.標籤選擇器(如：body,div,p,ul,li)
2.類選擇器(如：class="head",class="head_logo")
3.ID選擇器(如：id="name",id="name_txt")
4.全局選擇器(如：*號)
5.組合選擇器(如：.head .head_logo,注意兩選擇器用空格鍵分開)
6.後代選擇器 (如：#head .nav ul li 從父集到子孫集的選擇器)h1 strong{color：gred}）
7.羣組選擇器 div,span,img {color:Red} 即具有相同樣式的標籤分組顯示
8.繼承選擇器(如：div p,注意兩選擇器用空格鍵分開)
9.僞類選擇器(如：就是鏈接樣式,a元素的僞類，4種不同的狀態：link、visited、active、hover。)
10.字符串匹配的屬性選擇符(^ $ *三種，分別對應開始、結尾、包含)
11.子選擇器 (如：div>p ,帶大於號>)子選擇器（只匹配樹中直接相連的元素。用法： h1>strong <h1>This is <strong> very <strong> imporant <h1> 正確 <h1> this is
<em>reallly <strong>very</strong></em> important</h1> 不正確 ）
12.CSS 相鄰兄弟選擇器器 (如：h1+p,帶加號+)
6.選擇器的優先級
a.不同級別
1.在屬性後面使用 !important 會覆蓋頁面內任何位置定義的元素樣式。
2.作爲style屬性寫在元素內的樣式
3.id選擇器
4.類選擇器
5.標籤選擇器
6.通配符選擇器
7.瀏覽器自定義或繼承
總結排序：!important > 行內樣式>ID選擇器 > 類選擇器 > 標籤 > 通配符 > 繼承 > 瀏覽器默認屬性
同一級別
同一級別中後寫的會覆蓋先寫的樣式
上面的級別還是很容易看懂的，但是有時候有些規則是多個級別的組合，像這樣
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div.test{
background-COLOR:#a00;
width:100px;
height: 100px;
}
.test.test2{
background-COLOR:#0e0;
width:100px;
height: 100px;
}
</style>
</head>
<body>
<div class="test test2"></div>
</body>
</html>
到底div是應用那條規則呢，有個簡單的計算方法（經園友提示，權值實際並不是按十進制，用數字表示只是說明思想，一萬個class也不如一個id權值高）
•內聯樣式表的權值爲 1000
•ID 選擇器的權值爲 100
•Class 類選擇器的權值爲 10
•HTML 標籤選擇器的權值爲 1
我們可以把選擇器中規則對應做加法，比較權值，如果權值相同那就後面的覆蓋前面的了，div.class的權值是1+10=11，而.test1 .test2的權值是10+10=20，所以div會應用.test1 .test2變成綠色
另外一種理解方式：
CSS優先級：是由四個級別和各級別的出現次數決定的。
四個級別分別爲：行內選擇符、ID選擇符、類別選擇符、元素選擇符。
優先級的算法：
每個規則對應一個初始"四位數"：0、0、0、0
若是 行內選擇符，則加1、0、0、0
若是 ID選擇符，則加0、1、0、0
若是 類選擇符/屬性選擇符/僞類選擇符，則分別加0、0、1、0
若是 元素選擇符/僞元素選擇符，則分別加0、0、0、1
算法：將每條規則中，選擇符對應的數相加後得到的”四位數“，從左到右進行比較，大的優先級越高。
需注意的：
①、!important的優先級是最高的，但出現衝突時則需比較”四位數“;
②、優先級相同時，則採用就近原則，選擇最後出現的樣式;
③、繼承得來的屬性，其優先級最低;
!important > 行內樣式>ID選擇器 > 類選擇器 > 標籤 > 通配符 > 繼承 > 瀏覽器默認屬性
*css選擇器使用強烈建議採用低權重原則，利於充分發揮css的繼承性，複用性，模塊化、組件化。
7.已訪問的和未訪問的類型成爲僞類
a.visited{color:red}
<a href="http://www.w3.org/" class="visited">w3c wed site</a>
a:link 超鏈接並指向一個未訪問地址的
a:visited已訪問的連接
動態僞類
：focus 聚焦的時候
：hover 鼠標指針停留在這個元素上
：active 指示被用戶激活的時候
8.簡潔、高效的css
所謂高效就是讓瀏覽器查找更少的元素標籤來確定匹配的style元素。
1.不要再ID選擇器前使用標籤名
解釋：ID選擇是唯一的，加上標籤名相當於畫蛇添足了，沒必要。
2.不要在類選擇器前使用標籤名
解釋：如果沒有相同的名字出現就是沒必要，但是如果存在多個相同名字的類選擇器則有必要添加標籤名防止混淆如（p.colclass{color：red;} 和 span.colclass{color:red;}
3.儘量少使用層級關係；
#divclass p.colclass{color:red;}改爲 .colclass{color:red;}
4.使用類選擇器代替層級關係（如上）