學(xué)習(xí)筆記 CSS語(yǔ)法結(jié)構(gòu)淺析
你對(duì)CSS語(yǔ)法結(jié)構(gòu)是否比較熟悉，這里和大家分享一下，CSS語(yǔ)法結(jié)構(gòu)僅僅有三部分組成：選擇符（Selector）、屬性（property）、和值（value）。
CSS語(yǔ)法結(jié)構(gòu)
CSS屬性和選擇符
CSS語(yǔ)法結(jié)構(gòu)僅僅有三部分組成：選擇符（Selector）、屬性（property）、和值（value）。
使用方法：
- selector{Property:value;}
◆選擇符（Selector）指這組樣式編碼所要針對(duì)的對(duì)象，可以是一個(gè)XHTML標(biāo)簽，如body,h1；也可以是定義了特定的ID或CLASS的標(biāo)簽，如#main選擇符表示選擇<divid="main">，即一個(gè)被指定了main為id的對(duì)象。瀏覽器將對(duì)css選擇符進(jìn)行嚴(yán)格的解析，每一組樣式均會(huì)被瀏覽器應(yīng)用到對(duì)應(yīng)的對(duì)象上。
◆屬性（Property）是CSS樣式控制的核心，對(duì)于每一個(gè)XHTML中的標(biāo)簽，CSS都提供了豐富的樣式屬性，如顏色、大小、定位、浮動(dòng)方式等。
◆值（value）是指屬性的值，形式有兩種，一種是指定范圍的值，如float屬性，只可能應(yīng)用left，right，none三種值，如width能夠使用0-9999它，或其它數(shù)學(xué)單位來(lái)指定。
在實(shí)際應(yīng)用中，我們往往使用以下類(lèi)似的應(yīng)用形式：
- body{background-color:blue;}
類(lèi)型選擇符
在上邊的body{}便是一種類(lèi)型選擇符。所謂類(lèi)型選擇符，是指以網(wǎng)頁(yè)中已有的標(biāo)簽類(lèi)型作為名稱(chēng)的選擇符，body是網(wǎng)頁(yè)中的一個(gè)標(biāo)簽類(lèi)型，div也是，span也是。因此以下選擇符都是類(lèi)型選擇符，而它們將控制頁(yè)面中所有的body或div或span：
body{}
div{}
span{}
群組選擇符
除了對(duì)單個(gè)XHTML進(jìn)行樣式指定，同樣可以對(duì)一組對(duì)象進(jìn)行相同的樣式指派
h1,h2,h3,p,span{font-size:12px;font-family:arial;}
使用逗號(hào)對(duì)選擇符進(jìn)行分隔，使得頁(yè)面中所有的h1,h2,h3,p,span都將具有相同的樣式定義。這樣做的好處是對(duì)于頁(yè)面中需要使用同樣式的地方只需要書(shū)寫(xiě)一次樣式表即可實(shí)現(xiàn)，減少代碼量，改善css代碼的結(jié)構(gòu)。
包含選擇符
- h1span{font-weight:bold;}
當(dāng)我們僅僅想對(duì)某一個(gè)對(duì)象中的子對(duì)象進(jìn)行樣式指定時(shí)，包含選擇符就派上用場(chǎng)。包含選擇符指選擇符組合中前一個(gè)對(duì)象包含后一個(gè)對(duì)象，對(duì)象之間使用空格作為個(gè)分隔符。如本例子所示。我們對(duì)h1下面的span進(jìn)行樣式指派，最后應(yīng)用到XHTML是如下的格式：
- <h1>這是我們的一段文本<span>這是span內(nèi)的文本</span></h1>
- <h1>單獨(dú)的h1</h1>
- <span>單獨(dú)的span</span>
- <h2>被h2標(biāo)簽套用的文本<span>這是h2下的span</span></h2>
h1標(biāo)簽之下的span標(biāo)簽將被應(yīng)用font-weight:bold的樣式設(shè)置。注意，僅僅對(duì)有此結(jié)構(gòu)的標(biāo)簽有效，對(duì)于單獨(dú)存在的h1或單獨(dú)存在的span及其他非h1標(biāo)簽下屬的span均不會(huì)應(yīng)用此樣式。
這樣做能夠幫助我們避免過(guò)多的ID及CLASS的設(shè)置，直接對(duì)所需設(shè)置的過(guò)猶不及進(jìn)行設(shè)置。包含選擇符除了可以二者包含，也可以多級(jí)包含，如以下選擇符樣式同樣能夠作用：
- bodyh1spanstront{font-weight=bold;}
標(biāo)簽指定式選擇符
如果既想使用id或class，也想同時(shí)使用標(biāo)簽選擇符，可以使用如下格式：
h1#content{}
表示針對(duì)所有id為content的h1標(biāo)簽。
h1.p1{}
表示針對(duì)所有class為p1的h1標(biāo)簽。
標(biāo)簽指定式選擇符在對(duì)標(biāo)簽選擇的精確度上介于標(biāo)簽選擇符及id/class選擇符之間，也是一種經(jīng)常使用到的選擇符形式。
組合選擇符
對(duì)于上述所有CSS選擇符而言，無(wú)論是什么樣的選擇符，均可以進(jìn)行組合使用。
h1.p1{}
表示h1標(biāo)簽下的所有class為p1的標(biāo)簽。
#contenth1{}
表示id為content的標(biāo)簽下的所有h1標(biāo)簽。
h1.p1,#contenth1{}
以上兩種進(jìn)行群組選擇。
h1#contenth2{}
id為content的h1標(biāo)簽下的h2標(biāo)簽。
文章出處：標(biāo)準(zhǔn)之路(http://www.aa25.cn/web_w3c/250.shtml)
【編輯推薦】
