CSS：是Cascading Style Sheet的縮寫，譯為【層疊樣式表單】，是一組格式設定規則。是用於（增強）控制網頁樣式並允許將樣式資訊與網頁內容分開的一種標記性語言。
CSS的組成： CSS的定義是由三個部分組構成：選擇符（Selector），屬性（properties）和屬性的值（value）。語法：selector{proprety:value}（選擇符{屬性：屬性值}）
注意事項：
1. CSS宣告區塊由：選擇符+“{”+1個或多個CSS屬性+“}”組成。
2. CSS是大小寫不敏感的，在CSS文法中推薦使用小寫。
一、CSS選擇符
是CSS樣式的名字，當在HTML文件中表現一個CSS樣式的時候，就要用到一個CSS。怎麼用呢？這時就透過CSS選擇符（CSS的名字）來指定此HTML標籤使用此CSS樣式。
二、選擇符語法
一個CSS選擇符就定義了一個樣式。
選擇符名稱{聲明;}
比如：
p{font-size:12px;}.dreamdublue{color:blue;}.dreamdu18px{font-size:18px;}#dreamdured{color:red;}P、dreamdublue、dreamdured都是選擇符。
三、選擇符命名規則
CSS選擇符可以使用英文字母的大寫與小寫，數字，連字號，底線，冒號，句號。
（1）英文字母大寫與小寫AZ az
（2）數字0-9
（3）連字號-
（4）底線_
（5）冒號:
（6）句號.
注意： CSS選擇符只能以字母開頭。
四、選擇符分類
CSS選擇符可以分成很多類，例如：類型選擇符，id選擇符，class選擇符，通用選擇符，分組選擇符，包含選擇符，元素指定選擇符，子物件選擇符，屬性選擇符，相鄰選擇符等，以下將一一介紹分析。
1. 類型選擇符：類型選擇符就是網頁元素本身，定義時直接使用元素名稱。
Body{/*定義頁面屬性*/}Div{Width:774px;/*把所有的div元素定義為寬度為774像素*/}2. id選擇符：它是唯一的，不同元素的id值是不能重複的，id選擇符為每個元素的具體物件定義不同的樣式，方便使用者更精細的控制頁面。使用id選擇符時要先為每個元素定義一個id屬性。
<divid=”top”></div>使用id選擇符時，需要使用到#進行標識：#top{Width:774px;/*把所有的div元素定義為寬度為774像素*/}3. class選擇符：在一個文件中可以為不同類型的元素定義相同的類名，class可以實作把相同樣式的元素統一為一類，使用class選擇符時要先為每個元素定義一個class屬性：
<divclass=”red”></div><spanclass=”red”></span><pclass=”red”></p>使用class選擇符時，需要使用英文.（點）進行識別：. red{Color:red;}4. 一般選擇符：是一種特殊的選擇符，它用*表示，是使用但又容易忽略的選擇符。
*{font-size:12pt;/*定義文件中所有字體大小為12pt*/}5. 分組選擇符：分組選擇符不是一種選擇符類型，而是一種選擇符方法。當多個物件定義了相同的樣式時，我們可以把他們分成一組。這樣能夠簡化程式碼讀寫，例如：
.class1{font-size:13px;color:red;text-decraotian:underline;}.class2{font-size:13px;color:blue;text-decroation:underline;}可以分組為：
.class1,class2{font-size:13px;text-decroation:underline;}.class1{color:red;}.class2{color:blue;}使用分組有2原則：1.方面原則；2.就近原則（如果幾個元素相鄰，在一個模組內可以考慮使用分組選擇符）
6. 包含選擇符：最有用的一類選擇符，它能夠簡化程式碼，實現大範圍的樣式控制。比如：
.div1h2{/*定義類別div1層中所有h2的標題樣式*/font-size:18px;}.div1p{/*定義類別div1層中所有p的標題樣式*/font-size:12px;}7. 元素指定選擇符：有時候我們希望控制某種元素在一定範圍內物件的樣式，這時可以把class或id選擇符組合起來使用。比如：
span.red{/*定義span元素中class為red的元素顏色為紅色*/color:red;}div#top{/*定義div元素中id為top的元素寬度為100%*/width:100% ;}eg:<div><h2><h2><p></p><span></span></div>在上面程式碼要使用news選擇符很顯然不行，直接使用P，h2型別選擇符也不太好這時便可以使用元素指定選擇符
p.news{} h2.news{} span.news{}
8. 子物件選擇符：與元素選擇符一樣都是限制選擇符，即在一定元素範圍內定義符合限制條件的元素樣式，元素制定選擇符是用class和id屬性作為限制條件的，而子對象選擇符是用id和子物件作為限制條件的。
#main>table{/*定義id為main的主體模組中子物件table的樣式*/width:788px;font-size:12px;}#main>.title{/*定義id為main的主體模組中子物件的class為title的樣式*/color:red;font-style:italic;}9. 屬性選擇符：屬性選擇符是在元素後面加一個中括號，中括號中列出各種屬性，或是表達式。屬性選擇符存在7種具體形式：
（1）存在屬性比對：透過符合存在的屬性來控制元素的樣式，一般要把符合的屬性包含在中括號中，只列舉姓名不賦值：
h1[class]{color:red;/*作用任何帶有class屬性的h1元素不管class的值是什麼*/}img[alt]{border:none;/*作用任何帶有alt屬性的img元素不管alt的值是什麼*/}a[href][title]{font-weight:bold;/*作用同時帶href和title屬性的a元素*/}（2）精準屬性比對：只有當屬性值完全符合指定的屬性值時才會套用樣式，id和class選擇子其實就是精準屬性選擇。
a[href=www.163.com][title=網易]{font-size:12px;/*作用位址指向www.163.com且title提示字樣為網易的a元素*/}（3）空白分個匹配：透過為屬性定義字串列表，然後只要匹配其中任何一個字串即可控制元素樣式。
<spanclass=abc>誰來控制我的樣式</span>可以使用下面樣式來控制：[class^=a]{color:red;}或：[class^=b]{color:red;}或： [class^=c]{color:red;}或：span[class^=c]{color:red;}（4）連字符匹配：與空白匹配的功能和用法相同，但是連字符匹配中的字符串列表中用連字符進行分割.
<span>誰來控制我的樣式</span>
可以使用下面樣式來控制：
[class|=a]{color:red;}或：[class|=a]{color:red;}或：[class|=b]{color:red;}或：[class|=c]{color :red;}或：span[class|=c]{color:red;}（5）前綴選擇符：只要屬性值的開始字元符合指定字串，即可對元素套用樣式。前綴匹配使用[^=]形式來實現：
<div>前綴匹配</div>
可使用以下樣式控制
[class^=my]{color:red;}（6）後綴匹配：與前綴相反，只要屬性的結尾字符匹配指定字符，使用[$=]形式控制。
<div>後綴匹配</div>
可使用以下樣式控制
[class$=Test]{color:red;}（7）子字串匹配：只要屬性中存在指定字串即應用樣式，使用[*=]形式控制。
<div>子字串匹配</div>
可使用以下樣式控制
[class*=est]{color:red;}10. 相鄰選擇符：就是指元素相鄰的下一個元素。
div+p{font-size:24px;/*作用所有緊貼div元素之後的p元素，定義p元素的字體大小為14px*/}eg:<divid=wrap><divid=sub_wrap><h1>< /h1><p></p></div><p></p></div>要單獨控制最下的p元素除非為他定義一個class和id屬性如果使用使用相鄰選擇符就可以做到
#sub_wrap+p{font-size:14px;}