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選擇符表示選擇<div id="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)。
包含選擇符
h1 span{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í)包含,如以下選擇符樣式同樣能夠作用:
body h1 span stront{ 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)簽。
#content h1{}
表示id為content的標(biāo)簽下的所有h1標(biāo)簽。
h1.p1,#content h1{}
以上兩種進(jìn)行群組選擇。
h1#content h2{}
id為content的h1標(biāo)簽下的h2標(biāo)簽。
【 微信掃一掃 】