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