摘要：本文重點(diǎn)闡述如何編寫(xiě)不同方式的CSS樣式及它們的使用規(guī)則。

關(guān)鍵詞：HTML；CSS；樣式；規(guī)則

中圖分類號(hào)：G237 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1671-864X（2016）03-0274-01

CSS名為層疊樣式表，在頁(yè)面設(shè)計(jì)中廣泛運(yùn)用，目前最新的版本已經(jīng)到了CSS3，它的主要作用是用來(lái)修飾和美化HTML網(wǎng)頁(yè)標(biāo)簽；它也是Web前端工程師必備的一項(xiàng)基本技能。頁(yè)面設(shè)計(jì)時(shí)，一般是通過(guò)HTML中各種標(biāo)簽進(jìn)行頁(yè)面基本的布局構(gòu)建，通過(guò)CSS樣式對(duì)頁(yè)面布局的內(nèi)容進(jìn)行靜態(tài)的美化。CSS不同于計(jì)算機(jī)程序設(shè)計(jì)語(yǔ)言，它幾乎不存在邏輯的編碼規(guī)范，只需要記住各種樣式屬性名稱及其作用，通過(guò)利用HTML標(biāo)簽支持的這些屬性的設(shè)置實(shí)現(xiàn)頁(yè)面的美化與布局效果。

一、CSS樣式在頁(yè)面中的編寫(xiě)方式

1.以HTML標(biāo)簽的ID屬性值作為樣式名。

以HTML標(biāo)簽的ID屬性值作為樣式名稱，這種樣式只能修飾HTML標(biāo)簽的ID屬性值與樣式名稱一致的標(biāo)簽。在樣式名稱命名時(shí)，除了要與指定的HTML標(biāo)簽的ID屬性值相同之外，還必須在樣式名稱前加上符號(hào)“#”。例如：

#myDiv{

color：red；background-color：white；

}

樣式myDiv只能修飾指定頁(yè)面中的HTML標(biāo)簽的ID屬性值為myDiv的標(biāo)簽，將其前景色設(shè)置為紅色，背景顏色設(shè)置為白色。通常由于HTML的ID屬性值是唯一的，所以一般應(yīng)用于單個(gè)標(biāo)簽。

2.以HTML中class 屬性值作為樣式名。

在HTML標(biāo)簽中，一般都含有屬性class，該屬性是用來(lái)引用樣式進(jìn)行標(biāo)簽的修飾。在style節(jié)點(diǎn)中，定義的樣式名稱前含有“.”圓點(diǎn)的樣式都可以在標(biāo)簽class屬性值進(jìn)行設(shè)置。例如：

.myDiv{

color：red；background-color：white；

}

在HTML標(biāo)簽中，凡是其class屬性值設(shè)置為myDiv的，其前景色都設(shè)置為紅色，背景顏色設(shè)置為白色；這里所影響的標(biāo)簽可能就會(huì)涉及多個(gè)，與ID名稱作為樣式名作用范圍就不一樣。

3.以HTML標(biāo)簽名稱作為樣式名稱。

在樣式編寫(xiě)中，還可以用標(biāo)簽本身的標(biāo)簽名稱作為樣式名稱，例如：a，div，p等標(biāo)簽用作樣式名稱，這樣編寫(xiě)的樣式會(huì)自動(dòng)應(yīng)用在對(duì)應(yīng)的標(biāo)簽a，div，p上面。如：

a，div，p{

color：red；background-color：white；

}

在上面的案例中，頁(yè)面中所有的a，div，p標(biāo)簽都會(huì)將前景色設(shè)置為紅色，背景顏色設(shè)置為白色。

4.在HTML的標(biāo)簽style屬性值直接編寫(xiě)樣式。

HTML標(biāo)簽中，一般都含有屬性style，該屬性是用來(lái)專門(mén)美化裝飾當(dāng)前標(biāo)簽，不會(huì)對(duì)其他標(biāo)簽的修飾起作用。在style中按照樣式編寫(xiě)規(guī)范編寫(xiě)樣式即可。如：

案例

案例中，style屬性值內(nèi)容是將當(dāng)前a標(biāo)簽的文字顏色設(shè)置為藍(lán)色，字體大小設(shè)置為14像素，只對(duì)當(dāng)前a標(biāo)簽起作用。

樣式可以獨(dú)立成樣式文件進(jìn)行統(tǒng)一管理，在需要的頁(yè)面進(jìn)行樣式文件引入；樣式也可以獨(dú)立寫(xiě)在需要頁(yè)面的head標(biāo)簽中的style節(jié)點(diǎn)中，當(dāng)然還可以直接寫(xiě)在HTML標(biāo)簽屬性style中。

二、CSS樣式在頁(yè)面中的應(yīng)用規(guī)則

樣式按照不同的規(guī)范進(jìn)行編寫(xiě)后，有的樣式會(huì)自動(dòng)應(yīng)用在當(dāng)前頁(yè)面中，如以HTML標(biāo)簽名稱為樣式名稱的和以“#”加ID屬性值作為樣式名稱的；而有的樣式則需要開(kāi)發(fā)人員進(jìn)行調(diào)用設(shè)置，如：以“.”加樣式名稱的，必須要在需要使用標(biāo)簽的class屬性中進(jìn)行設(shè)置，屬性值必須是樣式名稱。

樣式在編寫(xiě)有以id屬性、標(biāo)簽名、class屬性值作為樣式名稱的，也有直接寫(xiě)在標(biāo)簽style屬性中的屬性值的，如果當(dāng)以上四種樣式同時(shí)修飾一個(gè)標(biāo)簽時(shí)，樣式的運(yùn)用規(guī)則是采用就近原則，style中的樣式先使用，如果取消style的樣式，這是id屬性值作為樣式名稱的樣式使用，如果id屬性取消，則應(yīng)用class樣式，最后起作用的是HTML標(biāo)簽作為樣式名稱，例如：

在上面的HTML編碼中，body標(biāo)簽中的div背景顏色是藍(lán)色；如果刪除該標(biāo)簽的style屬性，則標(biāo)簽div的背景顏色使用“.myDiv”樣式，此時(shí)背景顏色為黃色；如果div的class屬性刪除，此時(shí)標(biāo)簽則使用樣式名稱與標(biāo)簽名一致的div樣式，背景色為綠色。

樣式已經(jīng)成為頁(yè)面不可分割的組成部分，如何使樣式為我們服務(wù)，這里不僅要懂得樣式的編寫(xiě)方式及應(yīng)用規(guī)則，還需要有很好地審美標(biāo)準(zhǔn)及設(shè)計(jì)理念。

參考文獻(xiàn)：

百度百科CSS樣式[OL].http：//baike.baidu.com

作者簡(jiǎn)介：

王平華，江西波陽(yáng) 1979年10出生 研究生學(xué)歷 江西現(xiàn)代職業(yè)技術(shù)學(xué)院 軟件工程方向。