這篇文章主要講解了“CSS選擇符的使用”,文中的講解內(nèi)容簡單清晰,易于學習與理解,下面請大家跟著小編的思路慢慢深入,一起來研究和學習“CSS選擇符的使用”吧!
成都創(chuàng)新互聯(lián)從2013年成立,先為東洲等服務(wù)建站,東洲等地企業(yè),進行企業(yè)商務(wù)咨詢服務(wù)。為東洲企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。
CSS選擇符詳解
一、類型選擇符
什么是CSS選擇符中類型選擇符?指以網(wǎng)頁中已有的標簽類型作為名稱的行徑符。body是網(wǎng)頁中的一個標簽類型,div,p,span都是。
如下:
ExampleSourceCode
body{} div{} p{} span{}
二、群組選擇符
對于XHMTL對象,可以對一組同時進行了相同的樣式指派。使用逗號對選擇符進行了分隔,這樣書寫的優(yōu)點在于同樣的樣式只需要書寫一次即可,減少代碼量,改善CSS代碼結(jié)構(gòu)。
使用時應該注意“逗號”是在半角模式下,并非中文全角模式。
如下:
ExampleSourceCode
h2,h3,h7,p,span { font-size:12px; color:#FF0000; font-family:arial; }
三、包含選擇符
CSS選擇符中的包含選擇符對某對象中的子對象進行樣式指點定,這樣選擇方式就發(fā)揮了作用。需要注意的是,僅對此對象的子對象標簽有效,對于其它單獨存在或位于此對象以外的子對象,不應用此樣式設(shè)置。
這樣做的優(yōu)點在于,幫我們避免過多的id、class設(shè)置,直接對所需的元素進行定義。
如下:
ExampleSourceCode
h3span { color:red; } 如下: bodyh2spanstrong { font-weight:bold; }
四、id選擇符
根據(jù)DOM文檔對象模型原理所出現(xiàn)的選擇符,對于一個XHTML文件,其中的每一個標簽都可以使用一個id=""的形式進行一個名稱指派,但需要注意,在一個XHTML文件中id是具有***性而不可以重復的。
在DIV CSS布局的網(wǎng)頁中,可以針對不同的用途進行命名,如頭部為header、底部為footer。
XHTML如下:
ExampleSourceCode
CSS如下:
ExampleSourceCode
#content { font-size:14px; line-height:120%; }
五、class選擇符
其實id是對于XHTML標簽的擴展,而CSS選擇符中class選擇符是對SHTML多個標簽的一種組合,class直譯的意思是類或類別。對于XHTML標簽使用class=""進行名稱指派。與id不同,class可以重復使用,對于多個樣式相同的元素,可以直接定義為一個class。
使用class的優(yōu)點已不言自明,它對CSS代碼重用性有良好的體現(xiàn),眾多的標簽均可以使用一個樣式來定義而不需要每一個編寫一個樣式代碼。
XHTML如下:
ExampleSourceCode
CSS如下:
ExampleSourceCode
.he { margin:10px; background-color:red; }
六、標簽指定式的選擇符
如果想同時使用id和class,也想同時使用CSS選擇符中的標簽選擇符,可以使用如下的方式:
ExampleSourceCode
h2#content{} /*表示所有id為content的h2標簽*/ h2.p1{} /*表示所有class為p1的h2標簽* /標簽指定式選擇符的精度介于標簽選擇符及id/class選擇符之間, 是常用的選擇符之一。
七、組合選擇符
對于上面的所有選擇符而言,進行組合使用。如下:
ExampleSourceCode
h2.p1{} /*表示h2下的所有class為p1的標簽*/ #contenth2{} 表示id為content的標簽下的所有h2標簽 h2.p1,#contenth2{} /*表示h2下的所有class為p1的標簽以及id為content的標簽下的所有h2標簽*/ h2#contenth3{} /*id為content的h2標簽下的h3標簽*/
CSS選擇符是非常自由與靈活的,可以根據(jù)頁面的需要,使用各種選擇符,盡量結(jié)構(gòu)化與優(yōu)化CSS文件。
感謝各位的閱讀,以上就是“CSS選擇符的使用”的內(nèi)容了,經(jīng)過本文的學習后,相信大家對CSS選擇符的使用這一問題有了更深刻的體會,具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián),小編將為大家推送更多相關(guān)知識點的文章,歡迎關(guān)注!