首頁 > web前端 > css教學 > CSS命名及其書寫的規範化

CSS命名及其書寫的規範化

巴扎黑
發布: 2017-04-05 10:22:31
原創
1428 人瀏覽過

CSS命名規格

# 一.文件命名規範

全域樣式:global.css;
框架佈局:layout.css;
字體樣式:font.css;
連結樣式:link.css;
列印樣式:print.css;

# 二.常用類別/ID命名規範

頁 眉:header
內 容:content
容 器:container
頁 腳:footer
版 權:copyright 
# 導 航:menu
主導航:mainMenu
子導航:subMenu
標 志:logo
標 語:banner
標 題:title
側邊欄:sidebar
圖 標:Icon
註 釋:note
搜 索:search
按 鈕:btn
登 錄:login
鏈 接:link
訊息框:manage
……

常用類別的命名應盡量以常見英文單字為準,做到簡單易懂,並在適當的地方加以註釋。對於二級類別/ID命名,則採用組合書寫的模式,後一個單字的首字母應大寫:諸如「搜尋框」則應命名為「searchInput」、「搜尋圖示」命名這「searchIcon」、「搜尋按鈕」命名為「searchBtn」…

#  

# CSS書寫規格及方法

一. 常規書寫規範及方法

# 1. 選擇DOCTYPE:

XHTML 1.0 提供了三種DTD宣告可供選擇:

# 過渡的(Transitional):要求非常寬鬆的DTD,它允許你繼續使用HTML4.01的標識(但是要符合xhtml的寫法)。完整程式碼如下:

# 嚴格的(Strict):要求嚴格的DTD,你不能使用任何表現層的識別和屬性,例如
。完整程式碼如下:

# 框架的(Frameset):專門針對框架頁面設計使用的DTD,如果你的頁面中包含有框架,需要採用這種DTD。完整程式碼如下:

# 理想情況當然是嚴格的DTD,但對於我們大多數剛接觸web標準的設計師來說,過渡的DTD(XHTML 1.0 Transitional)是目前理想選擇(包括本站,使用的也是過渡型DTD)。因為這種DTD也允許我們使用表現層的識別、元素和屬性,也比較容易通過W3C的程式碼校驗。

2. 指定語言及字元集:

為文檔指定語言:

# 為了被瀏覽器正確解釋並通過W3C程式碼校驗,所有的XHTML文件都必須宣告它們所使用的編碼語言;如:
常用的語言定義:


標準的XML文檔語言定義:

針對舊版的瀏覽器的語言定義:

為提高字符集,建議採用「utf-8」。

3. 呼叫樣式表:

外部樣式表呼叫:

頁面內嵌法:就是將樣式表直接寫在頁面程式碼的head區。 如:


外部呼叫法:將樣式表寫在一個獨立的.css檔案中,然後在頁面head區用類似以下程式碼呼叫。

# 在符合web標準的設計中,建議使用外部呼叫法,可以不修改頁面只修改.css檔案而改變頁面的樣式。如果所有頁面都呼叫同一個樣式表文件,那麼改一個樣式表文件,可以改變所有文件的樣式。

4、選用適當的元素:

根據文件的結構來選擇HTML元素,而不是根據HTML元素的樣式來選擇。例如,使用P元素來包含文字段落,而不是為了換行。如果在建立文件時找不到適當的元素,則可以考慮使用通用的p 或是span;

避免過渡使用p和span。少量、適當的使用p和span元素可以使文件的結構更加清晰合理並且易於使用樣式;

盡可能少使用標籤和結構嵌套,這樣不但可以使文檔結構清晰,同時也可以保持文件的小巧,在提高用戶下載速度的同時,也易於瀏覽器對文檔的解釋及呈視;

5、衍生選擇器:

可以使用派生選擇器為一個元素裡的子元素定義樣式,在簡化命名的同時也使結構更加的清晰化,如:

.mainMenu ul li {background:url(images/bg.gif;)}

# 6、輔助圖片用背影圖處理:

# 這裡的」輔助圖片」是指那些不是作為頁面要表達的內容的一部分,而僅用於修飾、間隔、提醒的圖片。將其做背影圖處理,可以在不改動頁面的情況下透過CSS樣式來進行改動,如:

#logo {background:url(images/logo.jpg) #FEFEFE no-repeat right bottom;}

# 7、結構與樣式分離:

在頁面裡只寫入文檔的結構,而將樣式寫於css檔案中,透過外部呼叫CSS樣式表來實現結構與樣式的分離。

8、文檔的結構化書寫:

頁面CSS文件都應採用結構化的書寫方式,邏輯清晰易於閱讀。如:



# /*=====主導航=====*/
#mainMenu {
width:100%;
height:30px;
background:url(images/mainMenu_bg.jpg) repeat-x;
}
#mainMenu ul li {
float:left;
line-height:30px;
margin-right:1px;
cursor:pointer;
}
/*=====主導航結束=====*/

9、滑鼠手勢:

在XHTML標準中,hand只被IE識別,當需要將滑鼠手勢轉換為“手形”時,則將“hand”換為“pointer”,即“cursor:pointer;”

以上是CSS命名及其書寫的規範化的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板