探討CSS樣式在頁面中編寫方式及應用規則

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

關鍵詞：HTML；CSS；樣式；規則

中圖分類號：G237 文獻標識碼：A 文章編號：1671-864X（2016）03-0274-01

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

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

1.以HTML標簽的ID屬性值作為樣式名。

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

#myDiv{

color：red；background-color：white；

}

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

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

在HTML標簽中，一般都含有屬性class，該屬性是用來引用樣式進行標簽的修飾。在style節點中，定義的樣式名稱前含有“.”圓點的樣式都可以在標簽class屬性值進行設置。例如：

.myDiv{

color：red；background-color：white；

}

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

3.以HTML標簽名稱作為樣式名稱。

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

a，div，p{

color：red；background-color：white；

}

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

4.在HTML的標簽style屬性值直接編寫樣式。

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

案例

案例中，style屬性值內容是將當前a標簽的文字顏色設置為藍色，字體大小設置為14像素，只對當前a標簽起作用。

樣式可以獨立成樣式文件進行統一管理，在需要的頁面進行樣式文件引入；樣式也可以獨立寫在需要頁面的head標簽中的style節點中，當然還可以直接寫在HTML標簽屬性style中。

二、CSS樣式在頁面中的應用規則

樣式按照不同的規范進行編寫后，有的樣式會自動應用在當前頁面中，如以HTML標簽名稱為樣式名稱的和以“#”加ID屬性值作為樣式名稱的；而有的樣式則需要開發人員進行調用設置，如：以“.”加樣式名稱的，必須要在需要使用標簽的class屬性中進行設置，屬性值必須是樣式名稱。

樣式在編寫有以id屬性、標簽名、class屬性值作為樣式名稱的，也有直接寫在標簽style屬性中的屬性值的，如果當以上四種樣式同時修飾一個標簽時，樣式的運用規則是采用就近原則，style中的樣式先使用，如果取消style的樣式，這是id屬性值作為樣式名稱的樣式使用，如果id屬性取消，則應用class樣式，最后起作用的是HTML標簽作為樣式名稱，例如：

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

樣式已經成為頁面不可分割的組成部分，如何使樣式為我們服務，這里不僅要懂得樣式的編寫方式及應用規則，還需要有很好地審美標準及設計理念。

參考文獻：

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

作者簡介：

王平華，江西波陽 1979年10出生 研究生學歷 江西現代職業技術學院 軟件工程方向。