探討CSS樣式在頁面中編寫方式及應(yīng)用規(guī)則

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

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

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

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

一、CSS樣式在頁面中的編寫方式

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

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

#myDiv{

color：red；background-color：white；

}

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

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

在HTML標(biāo)簽中，一般都含有屬性class，該屬性是用來引用樣式進(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)簽可能就會涉及多個，與ID名稱作為樣式名作用范圍就不一樣。

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

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

a，div，p{

color：red；background-color：white；

}

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

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

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

案例

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

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

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

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

樣式在編寫有以id屬性、標(biāo)簽名、class屬性值作為樣式名稱的，也有直接寫在標(biāo)簽style屬性中的屬性值的，如果當(dāng)以上四種樣式同時修飾一個標(biāo)簽時，樣式的運(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”樣式，此時背景顏色為黃色；如果div的class屬性刪除，此時標(biāo)簽則使用樣式名稱與標(biāo)簽名一致的div樣式，背景色為綠色。

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

參考文獻(xiàn)：

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

作者簡介：

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