css語法結構
2024-07-11 08:47:50
供稿：網友
CSS屬性和選擇符
css的語法結構僅僅有三部分組成：選擇符（Selector）、屬性（property）、和值（value）。
使用方法：
selector {Property:value;}
選擇符（Selector）指這組樣式編碼所要針對的對象，可以是一個XHTML標簽，如body,h1；也可以是定義了特定的ID或CLASS的標簽，如#main選擇符表示選擇<div id="main">，即一個被指定了main為id的對象。瀏覽器將對css選擇符進行嚴格的解析，每一組樣式均會被瀏覽器應用到對應的對象上。
屬性（Property）是CSS樣式控制的核心，對于每一個XHTML中的標簽，CSS都提供了豐富的樣式屬性，如顏色、大小、定位、浮動方式等。
值（value）是指屬性的值，形式有兩種，一種是指定范圍的值，如float屬性，只可能應用left，right，none三種值，如width能夠使用0-9999它，或其它數學單位來指定。
在實際應用中，我們往往使用以下類似的應用形式：
body {background-color:blue;}
類型選擇符
在上邊的body{}便是一種類型選擇符。所謂類型選擇符，是指以網頁中已有的標簽類型作為名稱的選擇符，body是網頁中的一個標簽類型，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都將具有相同的樣式定義。這樣做的好處是對于頁面中需要使用同樣式的地方只需要書寫一次樣式表即可實現，減少代碼量，改善css代碼的結構。
包含選擇符
h1 span{font-weight:bold;}
當我們僅僅想對某一個對象中的子對象進行樣式指定時，包含選擇符就派上用場。包含選擇符指選擇符組合中前一個對象包含后一個對象，對象之間使用空格作為個分隔符。如本例子所示。我們對h1下面的span進行樣式指派，最后應用到XHTML是如下的格式：
<h1>這是我們的一段文本<span>這是span內的文本</span></h1>
<h1>單獨的h1</h1>
<span>單獨的span</span>
<h2>被h2標簽套用的文本<span>這是h2下的span</span></h2>
h1標簽之下的span標簽將被應用font-weight:bold的樣式設置。注意，僅僅對有此結構的標簽有效，對于單獨存在的h1或單獨存在的span及其他非h1標簽下屬的span均不會應用此樣式。
這樣做能夠幫助我們避免過多的ID及CLASS的設置，直接對所需設置的過猶不及進行設置。
包含選擇符除了可以二者包含，也可以多級包含，如以下選擇符樣式同樣能夠作用：
body h1 span stront{ font-weight=bold;}
標簽指定式選擇符
如果既想使用id或class，也想同時使用標簽選擇符，可以使用如下格式：
h1#content {}
表示針對所有id為content的h1標簽。
h1.p1 {}
表示針對所有class為p1的h1標簽。
標簽指定式選擇符在對標簽選擇的精確度上介于標簽選擇符及id/class選擇符之間，也是一種經常使用到的選擇符形式。
組合選擇符
對于上述所有CSS選擇符而言，無論是什么樣的選擇符，均可以進行組合使用。
h1 .p1 {}
表示h1標簽下的所有class為p1的標簽。
#content h1{}
表示id為content的標簽下的所有h1標簽。
h1.p1,#content h1{}
以上兩種進行群組選擇。
h1#content h2{}
id為content的h1標簽下的h2標簽。
