CSS：是Cascading Style Sheet的縮寫，譯作【層疊樣式表單】，是一組格式設(shè)置規(guī)則。是用于（增強(qiáng)）控制網(wǎng)頁(yè)樣式并允許將樣式信息與網(wǎng)頁(yè)內(nèi)容分離的一種標(biāo)記性語(yǔ)言。

CSS的組成：CSS的定義是由三個(gè)部分組構(gòu)成：選擇符（Selector），屬性（properties）和屬性的取值（value）。語(yǔ)法：selector{proprety:value}（選擇符{屬性：屬性值}）

注意事項(xiàng)：

1. CSS聲明塊由：選擇符+“{”+1個(gè)或者多個(gè)CSS屬性+“}”組成。

2. CSS是大小寫不敏感的，在CSS語(yǔ)法中推薦使用小寫。

一、CSS選擇符

是CSS樣式的名字，當(dāng)在HTML文檔中表現(xiàn)一個(gè)CSS樣式的時(shí)候，就要用到一個(gè)CSS。怎么用呢？這時(shí)就通過(guò)CSS選擇符（CSS的名字）來(lái)指定此HTML標(biāo)簽使用此CSS樣式。

二、選擇符語(yǔ)法

一個(gè)CSS選擇符就定義了一個(gè)樣式。

選擇符名稱{聲明;}

比如：

p
{font-size:12px;}
.dreamdublue
{color:blue;}
.dreamdu18px
{font-size:18px;}
#dreamdured
{color:red;}

P、dreamdublue、dreamdured都是選擇符。

三、選擇符命名規(guī)則

CSS選擇符可以使用英文字母的大寫與小寫，數(shù)字，連字號(hào)，下劃線，冒號(hào)，句號(hào)。

（1）英文字母大寫與小寫 A-Z a-z

（2）數(shù)字 0-9

（3）連字號(hào) -

（4）下劃線 _

（5）冒號(hào) :

（6）句號(hào) .

注意事項(xiàng)：CSS選擇符只能以字母開頭。

四、選擇符分類

CSS選擇符可以分為很多類，比如：類型選擇符，id選擇符，class選擇符，通用選擇符，分組選擇符，包含選擇符，元素指定選擇符，子對(duì)象選擇符，屬性選擇符，相鄰選擇符等，以下將一一介紹分析。

1. 類型選擇符：類型選擇符就是網(wǎng)頁(yè)元素本身，定義時(shí)直接使用元素名稱。

Body{
/*定義頁(yè)面屬性*/
}
Div{
Width:774px ; /*把所有的div元素定義為寬度為774像素*/
}

2. id選擇符：它是唯一的，不同元素的id值是不能重復(fù)的，id選擇符為每個(gè)元素的具體對(duì)象定義不同的樣式，方便用戶更加精細(xì)的控制頁(yè)面。使用id選擇符時(shí)要先為每個(gè)元素定義一個(gè)id屬性。

<div id=”top”></div>
使用id選擇符時(shí)，需要使用到#進(jìn)行標(biāo)識(shí)：
#top{
Width:774px ; /*把所有的div元素定義為寬度為774像素*/
}

3. class選擇符：在一個(gè)文檔中可以為不同類型的元素定義相同的類名，class可以實(shí)現(xiàn)把相同樣式的元素統(tǒng)一為一類，使用class選擇符時(shí)要先為每個(gè)元素定義一個(gè)class屬性：

<div class=”red”></div>
<span class=”red”></span>
<p class=”red”></p>
使用class選擇符時(shí)，需要使用英文.（點(diǎn)）進(jìn)行標(biāo)識(shí)：
.red{
Color:red ;
}

4. 通用選擇符：是一種特殊的選擇符，它用*表示，是一個(gè)使用但又容易忽略的選擇符。

*{
font-size:12pt;/*定義文檔中所有字體大小為12pt*/
}

5. 分組選擇符：分組選擇符不是一種選擇符類型，而是一種選擇符方法。當(dāng)多個(gè)對(duì)象定義了相同的樣式時(shí)，我們可以把他們分為一組。這樣能夠簡(jiǎn)化代碼讀寫，比如：

.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.就近原則（如果幾個(gè)元素相鄰，在一個(gè)模塊內(nèi)可以考慮使用分組選擇符）

6. 包含選擇符：最有用的一類選擇符，它能夠簡(jiǎn)化代碼，實(shí)現(xiàn)大范圍的樣式控制。比如：

.div1 h2{
/*定義類div1層中所有h2的標(biāo)題樣式*/
font-size:18px;
}
.div1 p{
/*定義類div1層中所有p的標(biāo)題樣式*/
font-size:12px;
}

7. 元素指定選擇符：有時(shí)候我們希望控制某種元素在一定范圍內(nèi)對(duì)象的樣式，這時(shí)可以把class或id選擇符組合起來(lái)使用。比如：

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類型選擇符也不太好這時(shí)便可以使用元素指定選擇符

p.news{}  h2.news{}  span.news{}

8. 子對(duì)象選擇符：與元素選擇符一樣都是限制選擇符，即在一定元素范圍內(nèi)定義符合限制條件的元素樣式，元素制定選擇符是用class和id屬性作為限制條件的，而子對(duì)象選擇符是用id和子對(duì)象作為限制條件的。

#main > table{/*定義id為main的主體模塊中子對(duì)象table的樣式*/
width:788px;
font-size:12px;
}
#main > .title{/*定義id為main的主體模塊中子對(duì)象的class為title的樣式*/
color:red;
font-style:italic;
}

9. 屬性選擇符：屬性選擇符是在元素后面加一個(gè)中括號(hào)，中括號(hào)中列出各種屬性，或者表達(dá)式。屬性選擇符存在7種具體形式：

（1）存在屬性匹配：通過(guò)匹配存在的屬性來(lái)控制元素的樣式，一般要把匹配的屬性包含在中括號(hào)中，只列舉姓名并不賦值：

h1[class]{
color:red;/*作用任何帶class屬性的h1元素 不管class的值是什么*/
}
img[alt]{
border:none;/*作用任何帶alt屬性的img元素 不管alt的值是什么*/
}
a[href][title]{
font-weight:bold;/*作用同時(shí)帶href和title屬性的a元素*/
}

（2）精準(zhǔn)屬性匹配：只有當(dāng)屬性值完全匹配指定的屬性值時(shí)才會(huì)應(yīng)用樣式，id和class選擇符實(shí)際上就是精準(zhǔn)屬性選擇。

a[href = "www.163.com"][title="網(wǎng)易"]{
font-size:12px;/*作用地址指向www.163.com并且title提示字樣為"網(wǎng)易"的a元素*/
}

（3）空白分個(gè)匹配：通過(guò)為屬性定義字符串列表，然后只要匹配其中任意一個(gè)字符串即可控制元素樣式。

<span class = "a b c">誰(shuí)來(lái)控制我的樣式</span>
可以使用下面樣式來(lái)控制：
[class^="a"]{
color:red;
}或：
[class^="b"]{
color:red;
}或：
[class^="c"]{
color:red;
}或：
span[class^="c"]{
color:red;
}

（4）連字符匹配：與空白匹配的功能和用法相同，但是連字符匹配中的字符串列表中用連字符進(jìn)行分割.

<span>誰(shuí)來(lái)控制我的樣式</span>

可以使用下面樣式來(lái)控制：

[class|="a"]{
color:red;
}或：
[class|="a"]{
color:red;
}或：
[class|="b"]{
color:red;
}或：
[class|="c"]{
color:red;
}或：
span[class|="c"]{
color:red;
}

（5）前綴選擇符：只要屬性值的開始字符匹配指定字符串，即可對(duì)元素應(yīng)用樣式。前綴匹配使用[^=]形式來(lái)實(shí)現(xiàn)：

<div>前綴匹配</div>

可使用如下樣式控制

[class ^="my"]{
color:red;
}

（6）后綴匹配：與前綴相反，只要屬性的結(jié)尾字符匹配指定字符，使用[$=]形式控制。

<div>后綴匹配</div>

可使用如下樣式控制

[class $="Test"]{
color:red;
}

（7）子字符串匹配：只要屬性中存在指定字符串即應(yīng)用樣式，使用[*=]形式控制。

<div>子字符串匹配</div>

可使用如下樣式控制

[class *="est"]{
color:red;
}

10. 相鄰選擇符：就是指元素相鄰的下一個(gè)元素。

div+p{
font-size:24px;/*作用所有緊貼div元素之后的p元素，定義p元素的字體大小為14px*/
}
eg:
<div id = "wrap">
<div id = "sub_wrap">
<h1></h1>
<p></p>
</div>
<p></p>
</div>

要單獨(dú)控制最下的p元素除非為他定義一個(gè)class和id屬性如果使用使用相鄰選擇符就可以做到

#sub_wrap+p{
font-size:14px;
}