本文和大家重點(diǎn)討論一下常規(guī)CSS書寫規(guī)范及方法，主要包括指定語(yǔ)言及字符集，調(diào)用CSS樣式表，結(jié)構(gòu)與樣式分離等內(nèi)容，相信本文介紹一定會(huì)讓你有所收獲。

常規(guī)CSS書寫規(guī)范及方法

1.選擇DOCTYPE：

XHTML1.0提供了三種DTD聲明可供選擇：

過(guò)渡的(Transitional):要求非常寬松的DTD，它允許你繼續(xù)使用HTML4.01的標(biāo)識(shí)(但是要符合xhtml的寫法)。完整代碼如下：

 
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“> 
 

嚴(yán)格的(Strict):要求嚴(yán)格的DTD，你不能使用任何表現(xiàn)層的標(biāo)識(shí)和屬性，例如
。完整代碼如下：

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“> 

框架的(Frameset):專門針對(duì)框架頁(yè)面設(shè)計(jì)使用的DTD，如果你的頁(yè)面中包含有框架，需要采用這種DTD。完整代碼如下：

 
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd“> 
 

理想情況當(dāng)然是嚴(yán)格的DTD，但對(duì)于我們大多數(shù)剛接觸web標(biāo)準(zhǔn)的設(shè)計(jì)師來(lái)說(shuō)，過(guò)渡的DTD(XHTML1.0Transitional)是目前理想選擇(包括本站，使用的也是過(guò)渡型DTD)。因?yàn)檫@種DTD還允許我們使用表現(xiàn)層的標(biāo)識(shí)、元素和屬性，也比較容易通過(guò)W3C的代碼校驗(yàn)。

2.指定語(yǔ)言及字符集：

為文檔指定語(yǔ)言：

<htmlxmlnshtmlxmlns=”http://www.w3.org/1999/xhtml”lang=”en”> 
 

為了被瀏覽器正確解釋和通過(guò)W3C代碼校驗(yàn)，所有的XHTML文檔都必須聲明它們所使用的編碼語(yǔ)言；如：

常用的語(yǔ)言定義：

<metahttp-equivmetahttp-equiv=”Content-Type”content=”text/html;charset=utf-8″/> 
 

標(biāo)準(zhǔn)的XML文檔語(yǔ)言定義：

xmlversionxmlversion=”1.0″encoding=”utf-8″?> 
 

針對(duì)老版本的瀏覽器的語(yǔ)言定義：

<metahttp-equivmetahttp-equiv=”Content-Language”content=”utf-8″/> 
 

為提高字符集，建議采用“utf-8”。#p#

3.調(diào)用CSS樣式表：

外部樣式表調(diào)用：

頁(yè)面內(nèi)嵌法：就是將樣式表直接寫在頁(yè)面代碼的head區(qū)。如：

<styletypestyletype=”text/css”>
>style> 
 

外部調(diào)用法：將樣式表寫在一個(gè)獨(dú)立的.css文件中，然后在頁(yè)面head區(qū)用類似以下代碼調(diào)用。

<linkrellinkrel=”stylesheet”rev=”stylesheet  
 
"href=”css/style.css”type=”text/css”media=”all”/> 
 

在符合web標(biāo)準(zhǔn)的設(shè)計(jì)中，推薦使用外部調(diào)用法，可以不修改頁(yè)面只修改.css文件而改變頁(yè)面的樣式。如果所有頁(yè)面都調(diào)用同一個(gè)樣式表文件，那么改一個(gè)樣式表文件，可以改變所有文件的樣式。

4、選用恰當(dāng)?shù)脑兀?/strong>

.mainMenuulli{background:url(images/bg.gif;)}  
 

#logo{background:url(images/logo.jpg)  
 
#FEFEFEno-repeatrightbottom;}  
 

<dividdivid=”mainMenu”> 
<ul> 
<li><ahrefahref=”#”>首頁(yè)a>li> 
<li><ahrefahref=”#”>介紹a>li> 
<li><ahrefahref=”#”>服務(wù)a>li> 
ul> 
div> 
 
/*=====主導(dǎo)航=====*/  
#mainMenu{  
width:100%;  
height:30px;  
background:url(images/mainMenu_bg.jpg)repeat-x;  
}  
#mainMenuulli{  
float:left;  
line-height:30px;  
margin-right:1px;  
cursor:pointer;  
}  
/*=====主導(dǎo)航結(jié)束=====*/