優勢
實現內容和樣式的分離。
實現樣式複用，提高開發效率。
實現頁面的精確控制。
更利於搜索引擎的搜索。
CSS三種樣式表
行內樣式
寫在標籤內部的style
示例：
<div
style="border:solid 1px red"></div>
內部樣式
在head標籤內編寫樣式
示例：
<style type = "text/css">
/*選擇器*/
</style>
外部樣式
寫在.css文件內部的樣式
示例：
<link href =
"*.css" type = "text/css" rel="Stylesheet" />
優先級：行內樣式表>內部樣式表>外部樣式表（實際採用就近原則，W3C提倡外部樣式表）
CSS常用三種選擇器
標籤選擇器
標籤名
｛
屬性名：屬性值；
。。。
｝
同類標籤具有相同樣式。
類選擇器
.類名
｛
屬性名：屬性值；
。。。
｝
應用樣式：<標籤名 class ="類名">標籤內容</標籤名>
優先級：ID選擇器>類選擇器>標籤選擇器ID選擇器#ID標識名｛屬性名：屬性值；。。。｝應用樣式：<標籤名 id ="ID標識名">標籤內容</標籤名>一般於div標籤連用。不能出現重複ID
說明：
屬性之間用分號（“；”）分隔
屬性和值之間用冒號（“：”）分隔
爲增加代碼的可讀性，同時也爲了限制樣式修飾的範圍和優先級考慮，專業的做法是：“父元素+空格+子元素”限定範圍；
多選擇器的常用符號及組合
基本符號：
名稱 示例
含義
作用
空格
div ul{...;} <div>內的<ul>元素樣式 區分上下級元素
，逗號 div,ul{...;} <div>和<ul>採用相同樣式
區隔多個選擇器共用一套樣式
：冒號
a:hover{...;} <a>標籤的hover僞類樣式 僞類符號
# ID標識符
ID選擇器
. 類標識符 類選擇器
組合符號
名稱 示例 含義
li.標籤+類 li.pic{...;}
類名爲pic的<li>標籤樣式
div#標籤+id div#nav{...;} id爲“nav”的<div>標籤樣式# . id+空格+類 #nav .pic{...;} id爲“nav”的元素內的pic類樣式# . ,id+空格+類+逗號 #nav .pic,#nav .text{...;} id爲“nav”元素內的pic和text類都採用相同樣式