XHTML的逐漸推廣流行，HTML 在許多場(chǎng)合已經(jīng)顯得過(guò)時(shí)。World Wide Web Consortium (W3C) 于 2000 年 6 月 26 日發(fā)布了 XHTML 的第一個(gè)版本作為推薦javascript:window.open("http://pagead2./pagead/iclk?sa=l&ai=BEjepJdwuR_bVMpmU7AOD8aD2Co_c6CTv_rbdA8CNtwGQvwUQExgTIIS04gcoFDgAUKW_xrUGYJ2B1YG0BaAB1bHs-gOqAQoyMDAwMDI1NDY1sgEPd3d3Lmtub3dza3kuY29tyAEB2gEiaHR0cDovL3d3dy5rbm93c2t5LmNvbS8zNDc4ODYuaHRtbKkCueNFjWIBgj7IAqfA7wKoAwHoAx_oA9cC&num=19&adurl=http://blog./css&client=ca-pub-0892797939732602");GgKwClickStat("標(biāo)準(zhǔn)","blog./css","afc","2000025465");‘ onmouseout=‘isShowGg = false;InTextAds_GgLayer="_u6807_u51C6"‘>標(biāo)準(zhǔn)。XHTML 標(biāo)準(zhǔn)的目標(biāo)是取代 html。按照 W3C 的說(shuō)法，“XHTML 是 html 的繼承者”(http://www./MarkUp/)。CSS過(guò)去經(jīng)常被用來(lái)定義字體的屬性，而現(xiàn)在新標(biāo)準(zhǔn)中我們將用它來(lái)控制整個(gè)頁(yè)面的顯示。然而，我們必須需要做一些不同于以往的處理來(lái)適應(yīng)這種新的變化，如：使用div來(lái)布局而不是表格，使用結(jié)構(gòu)化、語(yǔ)義化的標(biāo)記等等。由于采用新的處理方式，我們現(xiàn)在可以輕松地javascript:window.open("http://pagead2./pagead/iclk?sa=l&ai=BlfZAJdwuR_bVMpmU7AOD8aD2CqHVqxuB7IndAsCNtwGQvwUQBxgHIIS04gcoFDgAUJSc2Kf______wFgnYHVgbQFqgEKMjAwMDAyNTQ2NbIBD3d3dy5rbm93c2t5LmNvbcgBAdoBImh0dHA6Ly93d3cua25vd3NreS5jb20vMzQ3ODg2Lmh0bWypArnjRY1iAYI-yAKR9muoAwHoAx_oA9cC&num=7&adurl=http://www.&client=ca-pub-0892797939732602");GgKwClickStat("設(shè)計(jì)","www.","afc","2000025465");‘ onmouseout=‘isShowGg = false;InTextAds_GgLayer="_u8BBE_u8BA1"‘>設(shè)計(jì)出可重用的CSS（同一個(gè)樣式文件多個(gè)WEB站點(diǎn)中使用）以及可換膚的WEB站點(diǎn)（一個(gè)站點(diǎn)使用多種不同風(fēng)格的樣式）。

      XHTML具有兩大目標(biāo)：

      在文檔結(jié)構(gòu)和表示形式之間創(chuàng)建更明顯的分離。

      將 html 重新表示為 XML 的應(yīng)用程序。

      使用XHTML標(biāo)準(zhǔn)的好處是：只需設(shè)計(jì)頁(yè)面一次，即可讓該頁(yè)以完全相同的方式在任何現(xiàn)代的瀏覽器中顯示和工作。例如，在按照標(biāo)準(zhǔn)生成以后，頁(yè)面在Internet Explorer、Mozilla Firefox、Netscape Navigator、Opera、Camino 和 Safari）中以相同的方式顯示，而無(wú)需完成任何額外的工作。并且XHTML標(biāo)準(zhǔn)可以使 Web 站點(diǎn)更易于為智能手機(jī)、殘疾人電腦等設(shè)備訪問(wèn)。

      由于XHTML標(biāo)準(zhǔn)要求在在文檔結(jié)構(gòu)和表示形式之間創(chuàng)建更明顯的分離。因此使用CSS樣式表是必不可少的。CSS在網(wǎng)頁(yè)中占著極重要的地位，它的使用一直是熱門討論的話題。CSS是Cascading Style Sheet的簡(jiǎn)寫，譯為“層疊樣式表單”。 在1997年W3C頒布HTML4標(biāo)準(zhǔn)的同時(shí)也公布了有關(guān)樣式表的第一個(gè)標(biāo)準(zhǔn)CSS1, 自CSS1的版本之后，又在1998年5月發(fā)布了CSS2版本。

      CSS 的發(fā)明者的目的是除去表示性元素，即應(yīng)該根據(jù)內(nèi)容所表示的東西來(lái)標(biāo)記內(nèi)容，而樣式表應(yīng)該用于美化內(nèi)容。而這一點(diǎn)與XHTML分離文檔結(jié)構(gòu)和表示形式的目標(biāo)是一致，（在XHTML 2.0將除去b 、 i 和 img 標(biāo)記（以及 big 、 small 和 tt ），甚至不贊成使用 br ，準(zhǔn)備從將來(lái)的發(fā)行版中除去它。原因在于大多數(shù)標(biāo)記都是表示性的。它們的唯一目的就是給予瀏覽器指令，規(guī)定有關(guān)其內(nèi)容應(yīng)該如何顯示，但卻完全未提供有關(guān)其內(nèi)容是什么的信息。） 因此它們成了最好的合作伙伴。

      示例請(qǐng)見(jiàn)四川省建設(shè)廳信息門戶網(wǎng)

      1、重新設(shè)計(jì)站點(diǎn)的HTML

      首先我們要去掉網(wǎng)頁(yè)中有關(guān)外觀的javascript:window.open("http://pagead2./pagead/iclk?sa=l&ai=BW_dKJdwuR_bVMpmU7AOD8aD2CvfQ7CyT1OTVA8CNtwHAqQcQBRgFIIS04gcoFDgAUJTA7L76_____wFgnYHVgbQFqgEKMjAwMDAyNTQ2NbIBD3d3dy5rbm93c2t5LmNvbcgBAdoBImh0dHA6Ly93d3cua25vd3NreS5jb20vMzQ3ODg2Lmh0bWypArnjRY1iAYI-yAKzkH2oAwHoAx_oA9cC&num=5&adurl=http://www.&client=ca-pub-0892797939732602");GgKwClickStat("標(biāo)簽","www.","afc","2000025465");‘ onmouseout=‘isShowGg = false;InTextAds_GgLayer="_u6807_u7B7E"‘>標(biāo)簽。在以前的javascript:window.open("http://pagead2./pagead/iclk?sa=l&ai=BnGdXJdwuR_bVMpmU7AOD8aD2Csua_T632oqWA8CNtwGgnAEQBhgGIIS04gcoFDgAUISc9qL8_____wFgnYHVgbQFoAHZkZT9A6oBCjIwMDAwMjU0NjWyAQ93d3cua25vd3NreS5jb23IAQHaASJodHRwOi8vd3d3Lmtub3dza3kuY29tLzM0Nzg4Ni5odG1sgAIBqQK540WNYgGCPsgCx7idAagDAegDH-gD1wI&num=6&adurl=http://www./s.asp%3Fid%3D2110%26i%3Dgg&client=ca-pub-0892797939732602");GgKwClickStat("代碼","www.","afc","2000025465");‘ onmouseout=‘isShowGg = false;InTextAds_GgLayer="_u4EE3_u7801"‘>代碼中，我們常用一個(gè)表格用來(lái)在頁(yè)面的內(nèi)容中創(chuàng)建一個(gè)有邊框的區(qū)塊，我們還使用〈b〉來(lái)加粗文本。用<font color=red>來(lái)改變字體顏色等等。用<br>標(biāo)簽來(lái)創(chuàng)建段落等。

      而要做出能適應(yīng)XHTML標(biāo)準(zhǔn)和能隨意換膚的網(wǎng)站，我們須要避免在頁(yè)面中使用有關(guān)外觀的標(biāo)簽。使文檔結(jié)構(gòu)和表示形式分離的一個(gè)最大的好處就是它使文檔在沒(méi)有CSS時(shí)，仍然可以使用和訪問(wèn)。表現(xiàn)（就是文檔看上去的樣子）在一個(gè)支持性好的瀏覽器中也將呈現(xiàn)的不一樣，但是它的內(nèi)容將永遠(yuǎn)不變，大多數(shù)情況，對(duì)于訪問(wèn)網(wǎng)站的人來(lái)說(shuō)，內(nèi)容實(shí)際上比表現(xiàn)的方式更加重要。這就是為什么給那些支持性不好的瀏覽器發(fā)送一個(gè)沒(méi)有樣式的頁(yè)面，要比把他們排斥在外要好的原因。

      現(xiàn)在比較流行的做法是使用DIV、SPAN等標(biāo)簽來(lái)布局整個(gè)頁(yè)面，而TABLE,UL,PRE,CODE等標(biāo)簽來(lái)顯示數(shù)據(jù)，用UL是用來(lái)顯示無(wú)序的列表信息，而OL顯示有序的列表信息。這將比用TABLE來(lái)顯示一個(gè)列表更有語(yǔ)義上的意義，同時(shí)UL和OL在瀏覽器中比TABLE標(biāo)簽更快有下載速度，并且相對(duì)于TABLE，CSS對(duì)UL和OL的外觀控制更加靈活。當(dāng)然對(duì)于復(fù)雜的數(shù)據(jù)，比如報(bào)表，用TABLE來(lái)顯示仍然是不二的選擇。

      2、建立基本的通用樣式

      由于所有的XHTML文件都是由各種各樣的HTML標(biāo)簽和標(biāo)簽內(nèi)的文字組成，而一些基本的標(biāo)簽在每個(gè)XHTML文件都存在的，如：body、table、td、div、h1—h6、ul、li、input等等，如果我們定義好了這些標(biāo)簽的CSS樣式，如：字體，字號(hào)，行距，背景色，背景圖等等，我們就有了一個(gè)基本的樣式風(fēng)格，就如同在Word或PowerPoint中的主題，每個(gè)主題就是一套風(fēng)格樣式。 因此，我們可以根據(jù)基本的HTML標(biāo)簽定義出一個(gè)通用的樣式來(lái)，例如建立一個(gè)siteComm.css文件，定義如下：

以下是引用片段：
/*文中的樣式表語(yǔ)法中的"("及""為示例所用,因?yàn)閎log每次保存花括號(hào)都出現(xiàn)錯(cuò)誤。請(qǐng)?jiān)谑褂脮r(shí)改為正確的符號(hào)*/ 
BODY 
( 
    background: url(images/bg_page.jpg); 
    font: 10pt verdana,arial,; 
    margin-top: 0px; 
    margin-left: 0px; 
    margin-right: 0px; 
    margin-bottom: 0px; 
) 
H1, H2, H3, H4, H5, H6 
( 
    border-bottom: solid 1px #ccc; 
    margin: 1em 0; 
) 
TD 
( 
    font: 10pt; 
) 
A:link 
( 
    color: #057AE0; 
    text-decoration: none; 
) 
A:visited 
( 
    color: #057AE0; 
    text-decoration: none; 
) 
A:hover 
( 
    color: #009900; 
) 
A:active 
( 
    color: #009900; 
) 

      這樣的一個(gè)樣式文件，可以適用于任何一個(gè)網(wǎng)頁(yè)，只要添加引用我們都可以立刻看見(jiàn)效果。

      由于樣式表的繼承規(guī)則是外部的標(biāo)簽樣式會(huì)保留下來(lái)繼承給這個(gè)標(biāo)簽所包含的其他標(biāo)簽。事實(shí)上，所有在標(biāo)簽中嵌套的標(biāo)簽都會(huì)繼承外層標(biāo)簽指定的屬性值，有時(shí)會(huì)把很多層標(biāo)簽的樣式疊加在一起，例如在body標(biāo)簽中定義了字體大小，那么div、p等標(biāo)簽也會(huì)繼承一樣的字體大小，如果在P標(biāo)簽中又定義了字體顏色，那么P標(biāo)簽中的文字既具有body標(biāo)簽的字體大小又有P標(biāo)簽的字體顏色。需要注意的是，table標(biāo)簽不會(huì)繼承body的字體大小設(shè)定，所以在上面的樣式表中，我們單獨(dú)來(lái)定義td的樣式。

      3、定義好頁(yè)面的結(jié)構(gòu)布局

      很多時(shí)候，我們?cè)谥谱骶W(wǎng)頁(yè)時(shí)總是從視覺(jué)出發(fā)，先用Photoshop或者Fireworks畫出來(lái)、思考頁(yè)面的配色，做一些很炫的效果，很精美的圖片，再切割成小圖。然后通過(guò)編輯HTML將所有設(shè)計(jì)變成頁(yè)面。然而，有視覺(jué)的缺陷的人，不能理解這些顏色或者效果。PDA、移動(dòng)電話和屏幕閱讀機(jī)上也無(wú)法解析這些效果。 因此外觀并不是最重要的。一個(gè)結(jié)構(gòu)良好的XHTML可以通過(guò)CSS的不同定義，顯示成任何外觀，顯示在任何支持XHTML的網(wǎng)絡(luò)設(shè)備上。

      通過(guò)分析我們可以發(fā)現(xiàn)，對(duì)于大多數(shù)WEB網(wǎng)站來(lái)說(shuō)，頁(yè)面都是由一些類似的內(nèi)容區(qū)塊所組成，如：

以下是引用片段：
站點(diǎn)標(biāo)題區(qū) 
站點(diǎn)導(dǎo)航(主菜單，次及菜單) 
功能區(qū)(例如搜索框、用戶登陸區(qū)) 
內(nèi)容區(qū)(文章正文或者文章、產(chǎn)品列表) 
頁(yè)腳(版權(quán)和有關(guān)法律聲明) 

      然后我們用DIV標(biāo)簽來(lái)將這些區(qū)塊包含起來(lái)，類似這樣：

以下是引用片段：
<div class="pageHeader">站點(diǎn)標(biāo)題 
</div> 
<div class="pageNav">站點(diǎn)導(dǎo)航 
</div> 
<div class="catalogNav">欄目導(dǎo)航 
</div> 
<div class="pageContent">文章正文或列表等等 
</div> 
<div class="pageSearch">查詢 
</div> 
<div class="pageBottom">頁(yè)腳 
</div> 

      通過(guò)CSS的定義，我們可以將這些DIV標(biāo)簽包含的區(qū)塊放在頁(yè)面上任何位置，再指定這些塊的顏色、字體、邊框、背景以及對(duì)齊屬性等等。如：我們?cè)俳iteLayout.css文件，定義如下：

以下是引用片段：
.pageHeader 
（ 
    padding: 10px; 
    border: 1px solid #666; 
    height: 100px; 
    height: 70px; 
） 
.pageNav 
（ 
    padding: 10px; 
    border: 1px solid #666; 
    height: 100px; 
    height: 30px; 
） 
.catalogNav 
（ 
    float: left; 
    top: 130px; 
    padding: 10px; 
    border: 1px solid #666; 
    width: 20%; 
） 
.pageSearch 
（ 
    float: left; 
    top: 130px; 
    padding: 10px; 
    border: 1px solid #666; 
    width: 20%; 
） 
.pageContent 
（ 
    float: left; 
    padding: 10px; 
    border: 1px solid #666; 
    height: 400px; 
    width: 60%; 
） 
.pageBottom 
（ 
    clear: both; 
    padding: 10px; 
    border: 1px solid #666; 
    height: 100px; 
    height: 70px; 
） 

      如此，我們定義了一個(gè)三列的頁(yè)面布局：頂部自適應(yīng)頁(yè)面寬度。中間三列自適應(yīng)頁(yè)面。底部自適應(yīng)頁(yè)面寬度，當(dāng)然您也可以將頁(yè)面定義為中間只有兩列等等，您只需要調(diào)整layout.css文件即可，這樣您可以靈活的修改頁(yè)面的布局，讓頁(yè)面外觀發(fā)生根本的變化，而不必動(dòng)到HTML源文件，這一點(diǎn)對(duì)于javascript:window.open("http://pagead2./pagead/iclk?sa=l&ai=BQ_iyJdwuR_bVMpmU7AOD8aD2CsnBkzT1oK-0A8CNtwGQvwUQAhgCIIS04gcoFDgAUKnYt-4HYJ2B1YG0BaABz9nP-QOqAQoyMDAwMDI1NDY1sgEPd3d3Lmtub3dza3kuY29tyAEB2gEiaHR0cDovL3d3dy5rbm93c2t5LmNvbS8zNDc4ODYuaHRtbIACAakCueNFjWIBgj7IAoGbtwOoAwHoAx_oA9cC&num=2&adurl=http://www.&client=ca-pub-0892797939732602");GgKwClickStat("服務(wù)器端","www.JinGoal.com","afc","2000025465");‘ onmouseout=‘isShowGg = false;InTextAds_GgLayer="_u670D_u52A1_u5668_u7AEF"‘>服務(wù)器端生成代碼的程序尤為重要。

     4、定義站點(diǎn)獨(dú)有的樣式

      經(jīng)過(guò)以上兩步之后，我們已經(jīng)有了一個(gè)大概的頁(yè)面主題外觀，接下來(lái)我們要設(shè)計(jì)站點(diǎn)的細(xì)節(jié)，比如，對(duì)站點(diǎn)導(dǎo)航條我們想使用與普通超鏈接不一樣的樣式，如：藍(lán)色、加粗、字體更大、再加上有立體效果的背景圖：

以下是引用片段：
. pageNav a:link, . pageNav a:hover, . pageNav a:visted (Color:#36c;  
font-weight:bold; font-size:120%; background: url(images/bg_siteMenu.jpg) #36c;  
) 

      對(duì)于欄目導(dǎo)航，我們想給每個(gè)欄目連接加上背景色，并且有鼠標(biāo)滑過(guò)和移出的效果。 欄目導(dǎo)航區(qū)的html代碼為：

以下是引用片段：
<div class="catalogNav"> 
        <ul> 
            <li> 
                <A href="1">欄目1</A> 
            <li> 
                <A href="2">欄目2</A> 
            <li> 
                <A href="3">欄目3</A> 
            <li> 
                <A href="4">欄目4</A> 
            <li> 
                <A href="5">欄目5</A> 
            <li> 
                <A href="6">欄目6</A> 
            </li> 
        </ul> 
    </div> 

      欄目導(dǎo)航區(qū)對(duì)應(yīng)的Css代碼為：

以下是引用片段：
.catalogNav ul 
( 
    margin-left: -30px; 
    list-style: none; 
) 
.catalogNav li 
( 
    float: left; 
    background: #CCC; 
    line-height: 30px; 
    border: solid 1px #black; 
) 
.catalogNav a 
( 
    width: 100%; 
    text-align: center; 
    height: 30px; 
) 
.catalogNav a:link 
( 
    color: #666; 
    background: url(arrow_off.gif) #CCC no-repeat 5px 12px; 
    text-decoration: none; 
) 
.catalogNav a:visited 
( 
    color: #666; 
    text-decoration: underline; 
) 
.catalogNav a:hover 
( 
    color: #FFF; 
    font-weight: bold; 
    text-decoration: none; 
    background: url(arrow_on.gif) #F00 no-repeat 5px 12px; 
) 

      接下來(lái)我們還需要定義其他的站點(diǎn)獨(dú)有的樣式，如欄目標(biāo)題、文章列表、文章正文、時(shí)間、注釋、提示、錯(cuò)誤等等各種樣式，而且這些樣式多以類和id來(lái)作為選擇符。這些樣式都是針對(duì)某個(gè)站點(diǎn)的，不適用于其他的站點(diǎn)，然后我們將這些樣式保存為siteStyle.css文件。這樣我們就有了3個(gè)CSS文件。 SiteComm.css：任何站點(diǎn)都可以使用的樣式文件，定義了常用的html標(biāo)簽樣式。 SiteLayout.css：站點(diǎn)的布局文件，能適用于大多數(shù)的網(wǎng)站結(jié)構(gòu)，具體細(xì)節(jié)需要調(diào)整。 siteStyle.css：站點(diǎn)獨(dú)有的樣式文件，能顯示出本站點(diǎn)獨(dú)特的風(fēng)格和適應(yīng)于站點(diǎn)的內(nèi)容。

      然后我們采用外部調(diào)用法：將這些樣式表與頁(yè)面關(guān)聯(lián)起來(lái)。

以下是引用片段：
<LINK rev="stylesheet" media="all" href="css/SiteComm.css" type="text/css" rel="stylesheet"> 
<LINK rev="stylesheet" media="all" href="css/SiteLayout.css" type="text/css" rel="stylesheet"> 
<LINK rev="stylesheet" media="all" href="css/siteStyle.css" type="text/css" rel="stylesheet">
 
      在符合XHTML標(biāo)準(zhǔn)的設(shè)計(jì)中，我們使用外部調(diào)用法，好處不言而喻，HTML文檔會(huì)變得非常的小，CSS文件被存在瀏覽器的緩存中，僅僅需要下載一次即可，并且你只需要修改一個(gè)文件就可以改變整個(gè)網(wǎng)站的樣式。 并且這樣我們才能通過(guò)客戶端腳本，或者服務(wù)器端代碼方便地改變樣式表的連接地址，而快捷地實(shí)現(xiàn)換膚功能。

      5、根據(jù)用戶設(shè)置換膚

      網(wǎng)站樣式切換在網(wǎng)上已有很多現(xiàn)成的javascript換膚代碼，一般使用cookie來(lái)保存用戶設(shè)置，在請(qǐng)求頁(yè)面時(shí)，改變頁(yè)面的CSS文件連接即可。 而服務(wù)器端的換膚做法是根據(jù)用戶請(qǐng)求，動(dòng)態(tài)地生成CSS文件連接，用戶設(shè)置一般保存在數(shù)據(jù)庫(kù)或者cookie中。 由于我們使用了3個(gè)不同功能CSS樣式文件來(lái)顯示網(wǎng)站，所以我們可以設(shè)計(jì)出更加靈活的換膚方案和組合，如只切換主題而保留布局，和切換布局和主題，以及各種細(xì)節(jié)等等。

      使用3個(gè)CSS樣式文件額外的好處是，每當(dāng)我們?cè)O(shè)計(jì)一個(gè)新的系統(tǒng)，它的樣式風(fēng)格特性幾乎都可以大部分應(yīng)用到以前的系統(tǒng)上（因?yàn)槲覀儾捎么笾孪嗤捻?yè)面結(jié)構(gòu)模型，雖然顯示千差萬(wàn)別，但主要的框架是一樣的），這樣我們就可以積累出相當(dāng)數(shù)量和相當(dāng)風(fēng)豐富的界面樣式庫(kù)來(lái)。

      6、通過(guò)校驗(yàn)

      整個(gè)過(guò)程的最后一個(gè)步驟就是對(duì)XHTML\CSS代碼進(jìn)行驗(yàn)證。有很多種的工具都可以幫你對(duì)二者進(jìn)行驗(yàn)證。

      例如Dreamweaver MX即可檢查樣本代碼的可訪問(wèn)性。你可以通過(guò)在文件菜單中選擇Check Page然后選擇Check Accessibility來(lái)實(shí)現(xiàn)。任何錯(cuò)誤或是警告都會(huì)顯示出來(lái)，還包括出現(xiàn)位置的行號(hào)以及對(duì)問(wèn)題簡(jiǎn)要的解釋。你可以在Dreamweaver MX的Reference工具中找到更多關(guān)于這些錯(cuò)誤和警告的內(nèi)容。而Microsoft ASP.NET 2.0 具有很多有用的功能，也能幫助我們?cè)O(shè)計(jì)和生成符合 XHTML 和可訪問(wèn)性標(biāo)準(zhǔn)的 Web 站點(diǎn)。 使用 Web 標(biāo)準(zhǔn)生成 ASP.NET 2.0 Web 站點(diǎn)asp.net/ASPNETusStan.mspx">http://www.microsoft.com/china/msdn/library/webservices/asp.net/ASPNETusStan.mspx 

      此外，World Wide Web Consortium (W3C)提供了超過(guò)30個(gè)的可訪問(wèn)性評(píng)估工具的鏈接。W3C還提供了針對(duì)HTML和CSS的基于Web的免費(fèi)驗(yàn)證器。

      因此如果想要改善網(wǎng)站友好度，可用性，可訪問(wèn)性等，可將新標(biāo)準(zhǔn)視為一個(gè)機(jī)會(huì)，而不是一個(gè)障礙。要了解更多關(guān)于新標(biāo)準(zhǔn)和可訪問(wèn)性的內(nèi)容，你可以去看一看World Wide Web Consortium中的Web Accessibility Initiative (WAI)。