XHTML CSS制作樣式風(fēng)格切換的WEB站點(diǎn)
互聯(lián)網(wǎng) 發(fā)布時(shí)間:2008-10-17 19:26:50 作者:佚名
我要評(píng)論

隨著XHTML的逐漸推廣流行,HTML在許多場(chǎng)合已經(jīng)顯得過時(shí)。WorldWideWebConsortium(W3C)于2000年6月26日發(fā)布了XHTML的第一個(gè)版本作為推薦標(biāo)準(zhǔn)。XHTML標(biāo)準(zhǔn)的目標(biāo)是取代html。按照W3C的說法,“XHTML是html的繼承者”(http://www.w3.org/MarkUp/)。
XHTML具有兩大目標(biāo)
隨著XHTML的逐漸推廣流行,HTML在許多場(chǎng)合已經(jīng)顯得過時(shí)。WorldWideWebConsortium(W3C)于2000年6月26日發(fā)布了XHTML的第一個(gè)版本作為推薦標(biāo)準(zhǔn)。XHTML標(biāo)準(zhǔn)的目標(biāo)是取代html。按照W3C的說法,“XHTML是html的繼承者”(http://www.w3.org/MarkUp/)。
XHTML具有兩大目標(biāo):
在文檔結(jié)構(gòu)和表示形式之間創(chuàng)建更明顯的分離。
將html重新表示為XML的應(yīng)用程序。
使用XHTML標(biāo)準(zhǔn)的好處是:只需設(shè)計(jì)頁面一次,即可讓該頁以完全相同的方式在任何現(xiàn)代的瀏覽器中顯示和工作。例如,在按照標(biāo)準(zhǔn)生成以后,頁面在InternetExplorer、MozillaFirefox、NetscapeNavigator、Opera、Camino和Safari)中以相同的方式顯示,而無需完成任何額外的工作。并且XHTML標(biāo)準(zhǔn)可以使Web站點(diǎn)更易于為智能手機(jī)、殘疾人電腦等設(shè)備訪問。
由于XHTML標(biāo)準(zhǔn)要求在在文檔結(jié)構(gòu)和表示形式之間創(chuàng)建更明顯的分離。因此使用CSS樣式表是必不可少的。CSS在網(wǎng)頁中占著極重要的地位,它的使用一直是熱門討論的話題。CSS是CascadingStyleSheet的簡(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)容所表示的東西來標(biāo)記內(nèi)容,而樣式表應(yīng)該用于美化內(nèi)容。而這一點(diǎn)與XHTML分離文檔結(jié)構(gòu)和表示形式的目標(biāo)是一致,(在XHTML2.0將除去b、i和img標(biāo)記(以及big、small和tt),甚至不贊成使用br,準(zhǔn)備從將來的發(fā)行版中除去它。原因在于大多數(shù)標(biāo)記都是表示性的。它們的唯一目的就是給予瀏覽器指令,規(guī)定有關(guān)其內(nèi)容應(yīng)該如何顯示,但卻完全未提供有關(guān)其內(nèi)容是什么的信息。)因此它們成了最好的合作伙伴。更多關(guān)于XHTML2.0的資料,請(qǐng)參見:http://www-128.ibm.com/developerworks/cn/xml/x-wa-xhtml/index.html
CSS過去經(jīng)常被用來定義字體的屬性,而現(xiàn)在新標(biāo)準(zhǔn)中我們將用它來控制整個(gè)頁面的顯示。然而,我們必須需要做一些不同于以往的處理來適應(yīng)這種新的變化,如:使用div來布局而不是表格,使用結(jié)構(gòu)化、語義化的標(biāo)記等等。由于采用新的處理方式,我們現(xiàn)在可以輕松地設(shè)計(jì)出可重用的CSS(同一個(gè)樣式文件多個(gè)WEB站點(diǎn)中使用)以及可換膚的WEB站點(diǎn)(一個(gè)站點(diǎn)使用多種不同風(fēng)格的樣式)。
示例請(qǐng)見四川省建設(shè)廳信息門戶,界面切換在右上方,如圖1所示。由于時(shí)間原因,并未通過XHTML和CSS校驗(yàn),但原理是一樣的。
圖1:界面樣式切換
1、重新設(shè)計(jì)站點(diǎn)的HTML
首先我們要去掉網(wǎng)頁中有關(guān)外觀的標(biāo)簽。在以前的代碼中,我們常用一個(gè)表格用來在頁面的內(nèi)容中創(chuàng)建一個(gè)有邊框的區(qū)塊,我們還使用〈b〉來加粗文本。用<fontcolor=red>來改變字體顏色等等。用<br>標(biāo)簽來創(chuàng)建段落等。
而要做出能適應(yīng)XHTML標(biāo)準(zhǔn)和能隨意換膚的網(wǎng)站,我們須要避免在頁面中使用有關(guān)外觀的標(biāo)簽。使文檔結(jié)構(gòu)和表示形式分離的一個(gè)最大的好處就是它使文檔在沒有CSS時(shí),仍然可以使用和訪問。表現(xiàn)(就是文檔看上去的樣子)在一個(gè)支持性好的瀏覽器中也將呈現(xiàn)的不一樣,但是它的內(nèi)容將永遠(yuǎn)不變,大多數(shù)情況,對(duì)于訪問網(wǎng)站的人來說,內(nèi)容實(shí)際上比表現(xiàn)的方式更加重要。這就是為什么給那些支持性不好的瀏覽器發(fā)送一個(gè)沒有樣式的頁面,要比把他們排斥在外要好的原因。
現(xiàn)在比較流行的做法是使用DIV、SPAN等標(biāo)簽來布局整個(gè)頁面,而TABLE,UL,PRE,CODE等標(biāo)簽來顯示數(shù)據(jù),用UL是用來顯示無序的列表信息,而OL顯示有序的列表信息。這將比用TABLE來顯示一個(gè)列表更有語義上的意義,同時(shí)UL和OL在瀏覽器中比TABLE標(biāo)簽更快有下載速度,并且相對(duì)于TABLE,CSS對(duì)UL和OL的外觀控制更加靈活。當(dāng)然對(duì)于復(fù)雜的數(shù)據(jù),比如報(bào)表,用TABLE來顯示仍然是不二的選擇。
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è)通用的樣式來,例如建立一個(gè)siteComm.css文件,定義如下:
/*文中的樣式表語法中的"("及""為示例所用,因?yàn)閎log每次保存花括號(hào)都出現(xiàn)錯(cuò)誤。請(qǐng)?jiān)谑褂脮r(shí)改為正確的符號(hào)*/
BODY
(
background:url(images/bg_page.jpg);
font:10ptverdana,arial,;
margin-top:0px;
margin-left:0px;
margin-right:0px;
margin-bottom:0px;
)
H1,H2,H3,H4,H5,H6
(
border-bottom:solid1px#ccc;
margin:1em0;
)
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)頁,只要添加引用我們都可以立刻看見效果。
由于樣式表的繼承規(guī)則是外部的標(biāo)簽樣式會(huì)保留下來繼承給這個(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ú)來定義td的樣式。
3、定義好頁面的結(jié)構(gòu)布局
很多時(shí)候,我們?cè)谥谱骶W(wǎng)頁時(shí)總是從視覺出發(fā),先用Photoshop或者Fireworks畫出來、思考頁面的配色,做一些很炫的效果,很精美的圖片,再切割成小圖。然后通過編輯HTML將所有設(shè)計(jì)變成頁面。
然而,有視覺的缺陷的人,不能理解這些顏色或者效果。PDA、移動(dòng)電話和屏幕閱讀機(jī)上也無法解析這些效果。
因此外觀并不是最重要的。一個(gè)結(jié)構(gòu)良好的XHTML可以通過CSS的不同定義,顯示成任何外觀,顯示在任何支持XHTML的網(wǎng)絡(luò)設(shè)備上。
通過分析我們可以發(fā)現(xiàn),對(duì)于大多數(shù)WEB網(wǎng)站來說,頁面都是由一些類似的內(nèi)容區(qū)塊所組成,如:
站點(diǎn)標(biāo)題區(qū)
站點(diǎn)導(dǎo)航(主菜單,次及菜單)
功能區(qū)(例如搜索框、用戶登陸區(qū))
內(nèi)容區(qū)(文章正文或者文章、產(chǎn)品列表)
頁腳(版權(quán)和有關(guān)法律聲明)
然后我們用DIV標(biāo)簽來將這些區(qū)塊包含起來,類似這樣:
<divclass="pageHeader">站點(diǎn)標(biāo)題
</div>
<divclass="pageNav">站點(diǎn)導(dǎo)航
</div>
<divclass="catalogNav">欄目導(dǎo)航
</div>
<divclass="pageContent">文章正文或列表等等
</div>
<divclass="pageSearch">查詢
</div>
<divclass="pageBottom">頁腳
</div>
通過CSS的定義,我們可以將這些DIV標(biāo)簽包含的區(qū)塊放在頁面上任何位置,再指定這些塊的顏色、字體、邊框、背景以及對(duì)齊屬性等等。如:我們?cè)俳iteLayout.css文件,定義如下:
.pageHeader
(
padding:10px;
border:1pxsolid#666;
height:100px;
height:70px;
)
.pageNav
(
padding:10px;
border:1pxsolid#666;
height:100px;
height:30px;
)
.catalogNav
(
float:left;
top:130px;
padding:10px;
border:1pxsolid#666;
width:20%;
)
.pageSearch
(
float:left;
top:130px;
padding:10px;
border:1pxsolid#666;
width:20%;
)
.pageContent
(
float:left;
padding:10px;
border:1pxsolid#666;
height:400px;
width:60%;
)
.pageBottom
(
clear:both;
padding:10px;
border:1pxsolid#666;
height:100px;
height:70px;
)
如此,我們定義了一個(gè)三列的頁面布局:頂部自適應(yīng)頁面寬度。中間三列自適應(yīng)頁面。底部自適應(yīng)頁面寬度,當(dāng)然您也可以將頁面定義為中間只有兩列等等,您只需要調(diào)整layout.css文件即可,這樣您可以靈活的修改頁面的布局,讓頁面外觀發(fā)生根本的變化,而不必動(dòng)到HTML源文件,這一點(diǎn)對(duì)于服務(wù)器端生成代碼的程序尤為重要。更多關(guān)于CSS布局的資料,請(qǐng)參見:http://www.w3cn.org/article/layout/2004/55.html
4、定義站點(diǎn)獨(dú)有的樣式
經(jīng)過以上兩步之后,我們已經(jīng)有了一個(gè)大概的頁面主題外觀,接下來我們要設(shè)計(jì)站點(diǎn)的細(xì)節(jié),比如,對(duì)站點(diǎn)導(dǎo)航條我們想使用與普通超鏈接不一樣的樣式,如:藍(lán)色、加粗、字體更大、再加上有立體效果的背景圖:
.pageNava:link,.pageNava:hover,.pageNava:visted(Color:#36c;
font-weight:bold;font-size:120%;background:url(images/bg_siteMenu.jpg)#36c;
)
對(duì)于欄目導(dǎo)航,我們想給每個(gè)欄目連接加上背景色,并且有鼠標(biāo)滑過和移出的效果。欄目導(dǎo)航區(qū)的html代碼為:
<divclass="catalogNav">
<ul>
<li>
<Ahref="1">欄目1</A>
<li>
<Ahref="2">欄目2</A>
<li>
<Ahref="3">欄目3</A>
<li>
<Ahref="4">欄目4</A>
<li>
<Ahref="5">欄目5</A>
<li>
<Ahref="6">欄目6</A>
</li>
</ul>
</div>
欄目導(dǎo)航區(qū)對(duì)應(yīng)的Css代碼為:
.catalogNavul
(
margin-left:-30px;
list-style:none;
)
.catalogNavli
(
float:left;
background:#CCC;
line-height:30px;
border:solid1px#black;
)
.catalogNava
(
width:100%;
text-align:center;
height:30px;
)
.catalogNava:link
(
color:#666;
background:url(arrow_off.gif)#CCCno-repeat5px12px;
text-decoration:none;
)
.catalogNava:visited
(
color:#666;
text-decoration:underline;
)
.catalogNava:hover
(
color:#FFF;
font-weight:bold;
text-decoration:none;
background:url(arrow_on.gif)#F00no-repeat5px12px;
)
接下來我們還需要定義其他的站點(diǎn)獨(dú)有的樣式,如欄目標(biāo)題、文章列表、文章正文、時(shí)間、注釋、提示、錯(cuò)誤等等各種樣式,而且這些樣式多以類和id來作為選擇符。這些樣式都是針對(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)用法:將這些樣式表與頁面關(guān)聯(lián)起來。
<LINKrev="stylesheet"media="all"href="css/SiteComm.css"type="text/css"rel="stylesheet">
<LINKrev="stylesheet"media="all"href="css/SiteLayout.css"type="text/css"rel="stylesheet">
<LINKrev="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)站的樣式。
并且這樣我們才能通過客戶端腳本,或者服務(wù)器端代碼方便地改變樣式表的連接地址,而快捷地實(shí)現(xiàn)換膚功能。
5、根據(jù)用戶設(shè)置換膚
網(wǎng)站樣式切換在網(wǎng)上已有很多現(xiàn)成的javascript換膚代碼,一般使用cookie來保存用戶設(shè)置,在請(qǐng)求頁面時(shí),改變頁面的CSS文件連接即可。
而服務(wù)器端的換膚做法是根據(jù)用戶請(qǐng)求,動(dòng)態(tài)地生成CSS文件連接,用戶設(shè)置一般保存在數(shù)據(jù)庫或者cookie中。
由于我們使用了3個(gè)不同功能CSS樣式文件來顯示網(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)模型,雖然顯示千差萬別,但主要的框架是一樣的),這樣我們就可以積累出相當(dāng)數(shù)量和相當(dāng)風(fēng)豐富的界面樣式庫來。
6、通過校驗(yàn)
整個(gè)過程的最后一個(gè)步驟就是對(duì)XHTML\CSS代碼進(jìn)行驗(yàn)證。有很多種的工具都可以幫你對(duì)二者進(jìn)行驗(yàn)證。
例如DreamweaverMX即可檢查我的樣本代碼的可訪問性。你可以通過在文件菜單中選擇CheckPage然后選擇CheckAccessibility來實(shí)現(xiàn)。任何錯(cuò)誤或是警告都會(huì)顯示出來,還包括出現(xiàn)位置的行號(hào)以及對(duì)問題簡(jiǎn)要的解釋。你可以在DreamweaverMX的Reference工具中找到更多關(guān)于這些錯(cuò)誤和警告的內(nèi)容。
而MicrosoftASP.NET2.0具有很多有用的功能,也能幫助我們?cè)O(shè)計(jì)和生成符合XHTML和可訪問性標(biāo)準(zhǔn)的Web站點(diǎn)。使用Web標(biāo)準(zhǔn)生成ASP.NET2.0Web站點(diǎn)http://www.microsoft.com/china/msdn/library/webservices/asp.net/ASPNETusStan.mspx
此外,WorldWideWebConsortium(W3C)提供了超過30個(gè)的可訪問性評(píng)估工具的鏈接。W3C還提供了針對(duì)HTML和CSS的基于Web的免費(fèi)驗(yàn)證器。
因此如果想要改善網(wǎng)站友好度,可用性,可訪問性等,可將新標(biāo)準(zhǔn)視為一個(gè)機(jī)會(huì),而不是一個(gè)障礙。要了解更多關(guān)于新標(biāo)準(zhǔn)和可訪問性的內(nèi)容,你可以去看一看WorldWideWebConsortium中的WebAccessibilityInitiative(WAI)。
XHTML具有兩大目標(biāo):
在文檔結(jié)構(gòu)和表示形式之間創(chuàng)建更明顯的分離。
將html重新表示為XML的應(yīng)用程序。
使用XHTML標(biāo)準(zhǔn)的好處是:只需設(shè)計(jì)頁面一次,即可讓該頁以完全相同的方式在任何現(xiàn)代的瀏覽器中顯示和工作。例如,在按照標(biāo)準(zhǔn)生成以后,頁面在InternetExplorer、MozillaFirefox、NetscapeNavigator、Opera、Camino和Safari)中以相同的方式顯示,而無需完成任何額外的工作。并且XHTML標(biāo)準(zhǔn)可以使Web站點(diǎn)更易于為智能手機(jī)、殘疾人電腦等設(shè)備訪問。
由于XHTML標(biāo)準(zhǔn)要求在在文檔結(jié)構(gòu)和表示形式之間創(chuàng)建更明顯的分離。因此使用CSS樣式表是必不可少的。CSS在網(wǎng)頁中占著極重要的地位,它的使用一直是熱門討論的話題。CSS是CascadingStyleSheet的簡(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)容所表示的東西來標(biāo)記內(nèi)容,而樣式表應(yīng)該用于美化內(nèi)容。而這一點(diǎn)與XHTML分離文檔結(jié)構(gòu)和表示形式的目標(biāo)是一致,(在XHTML2.0將除去b、i和img標(biāo)記(以及big、small和tt),甚至不贊成使用br,準(zhǔn)備從將來的發(fā)行版中除去它。原因在于大多數(shù)標(biāo)記都是表示性的。它們的唯一目的就是給予瀏覽器指令,規(guī)定有關(guān)其內(nèi)容應(yīng)該如何顯示,但卻完全未提供有關(guān)其內(nèi)容是什么的信息。)因此它們成了最好的合作伙伴。更多關(guān)于XHTML2.0的資料,請(qǐng)參見:http://www-128.ibm.com/developerworks/cn/xml/x-wa-xhtml/index.html
CSS過去經(jīng)常被用來定義字體的屬性,而現(xiàn)在新標(biāo)準(zhǔn)中我們將用它來控制整個(gè)頁面的顯示。然而,我們必須需要做一些不同于以往的處理來適應(yīng)這種新的變化,如:使用div來布局而不是表格,使用結(jié)構(gòu)化、語義化的標(biāo)記等等。由于采用新的處理方式,我們現(xiàn)在可以輕松地設(shè)計(jì)出可重用的CSS(同一個(gè)樣式文件多個(gè)WEB站點(diǎn)中使用)以及可換膚的WEB站點(diǎn)(一個(gè)站點(diǎn)使用多種不同風(fēng)格的樣式)。
示例請(qǐng)見四川省建設(shè)廳信息門戶,界面切換在右上方,如圖1所示。由于時(shí)間原因,并未通過XHTML和CSS校驗(yàn),但原理是一樣的。
圖1:界面樣式切換
1、重新設(shè)計(jì)站點(diǎn)的HTML
首先我們要去掉網(wǎng)頁中有關(guān)外觀的標(biāo)簽。在以前的代碼中,我們常用一個(gè)表格用來在頁面的內(nèi)容中創(chuàng)建一個(gè)有邊框的區(qū)塊,我們還使用〈b〉來加粗文本。用<fontcolor=red>來改變字體顏色等等。用<br>標(biāo)簽來創(chuàng)建段落等。
而要做出能適應(yīng)XHTML標(biāo)準(zhǔn)和能隨意換膚的網(wǎng)站,我們須要避免在頁面中使用有關(guān)外觀的標(biāo)簽。使文檔結(jié)構(gòu)和表示形式分離的一個(gè)最大的好處就是它使文檔在沒有CSS時(shí),仍然可以使用和訪問。表現(xiàn)(就是文檔看上去的樣子)在一個(gè)支持性好的瀏覽器中也將呈現(xiàn)的不一樣,但是它的內(nèi)容將永遠(yuǎn)不變,大多數(shù)情況,對(duì)于訪問網(wǎng)站的人來說,內(nèi)容實(shí)際上比表現(xiàn)的方式更加重要。這就是為什么給那些支持性不好的瀏覽器發(fā)送一個(gè)沒有樣式的頁面,要比把他們排斥在外要好的原因。
現(xiàn)在比較流行的做法是使用DIV、SPAN等標(biāo)簽來布局整個(gè)頁面,而TABLE,UL,PRE,CODE等標(biāo)簽來顯示數(shù)據(jù),用UL是用來顯示無序的列表信息,而OL顯示有序的列表信息。這將比用TABLE來顯示一個(gè)列表更有語義上的意義,同時(shí)UL和OL在瀏覽器中比TABLE標(biāo)簽更快有下載速度,并且相對(duì)于TABLE,CSS對(duì)UL和OL的外觀控制更加靈活。當(dāng)然對(duì)于復(fù)雜的數(shù)據(jù),比如報(bào)表,用TABLE來顯示仍然是不二的選擇。
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è)通用的樣式來,例如建立一個(gè)siteComm.css文件,定義如下:
/*文中的樣式表語法中的"("及""為示例所用,因?yàn)閎log每次保存花括號(hào)都出現(xiàn)錯(cuò)誤。請(qǐng)?jiān)谑褂脮r(shí)改為正確的符號(hào)*/
BODY
(
background:url(images/bg_page.jpg);
font:10ptverdana,arial,;
margin-top:0px;
margin-left:0px;
margin-right:0px;
margin-bottom:0px;
)
H1,H2,H3,H4,H5,H6
(
border-bottom:solid1px#ccc;
margin:1em0;
)
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)頁,只要添加引用我們都可以立刻看見效果。
由于樣式表的繼承規(guī)則是外部的標(biāo)簽樣式會(huì)保留下來繼承給這個(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ú)來定義td的樣式。
3、定義好頁面的結(jié)構(gòu)布局
很多時(shí)候,我們?cè)谥谱骶W(wǎng)頁時(shí)總是從視覺出發(fā),先用Photoshop或者Fireworks畫出來、思考頁面的配色,做一些很炫的效果,很精美的圖片,再切割成小圖。然后通過編輯HTML將所有設(shè)計(jì)變成頁面。
然而,有視覺的缺陷的人,不能理解這些顏色或者效果。PDA、移動(dòng)電話和屏幕閱讀機(jī)上也無法解析這些效果。
因此外觀并不是最重要的。一個(gè)結(jié)構(gòu)良好的XHTML可以通過CSS的不同定義,顯示成任何外觀,顯示在任何支持XHTML的網(wǎng)絡(luò)設(shè)備上。
通過分析我們可以發(fā)現(xiàn),對(duì)于大多數(shù)WEB網(wǎng)站來說,頁面都是由一些類似的內(nèi)容區(qū)塊所組成,如:
站點(diǎn)標(biāo)題區(qū)
站點(diǎn)導(dǎo)航(主菜單,次及菜單)
功能區(qū)(例如搜索框、用戶登陸區(qū))
內(nèi)容區(qū)(文章正文或者文章、產(chǎn)品列表)
頁腳(版權(quán)和有關(guān)法律聲明)
然后我們用DIV標(biāo)簽來將這些區(qū)塊包含起來,類似這樣:
<divclass="pageHeader">站點(diǎn)標(biāo)題
</div>
<divclass="pageNav">站點(diǎn)導(dǎo)航
</div>
<divclass="catalogNav">欄目導(dǎo)航
</div>
<divclass="pageContent">文章正文或列表等等
</div>
<divclass="pageSearch">查詢
</div>
<divclass="pageBottom">頁腳
</div>
通過CSS的定義,我們可以將這些DIV標(biāo)簽包含的區(qū)塊放在頁面上任何位置,再指定這些塊的顏色、字體、邊框、背景以及對(duì)齊屬性等等。如:我們?cè)俳iteLayout.css文件,定義如下:
.pageHeader
(
padding:10px;
border:1pxsolid#666;
height:100px;
height:70px;
)
.pageNav
(
padding:10px;
border:1pxsolid#666;
height:100px;
height:30px;
)
.catalogNav
(
float:left;
top:130px;
padding:10px;
border:1pxsolid#666;
width:20%;
)
.pageSearch
(
float:left;
top:130px;
padding:10px;
border:1pxsolid#666;
width:20%;
)
.pageContent
(
float:left;
padding:10px;
border:1pxsolid#666;
height:400px;
width:60%;
)
.pageBottom
(
clear:both;
padding:10px;
border:1pxsolid#666;
height:100px;
height:70px;
)
如此,我們定義了一個(gè)三列的頁面布局:頂部自適應(yīng)頁面寬度。中間三列自適應(yīng)頁面。底部自適應(yīng)頁面寬度,當(dāng)然您也可以將頁面定義為中間只有兩列等等,您只需要調(diào)整layout.css文件即可,這樣您可以靈活的修改頁面的布局,讓頁面外觀發(fā)生根本的變化,而不必動(dòng)到HTML源文件,這一點(diǎn)對(duì)于服務(wù)器端生成代碼的程序尤為重要。更多關(guān)于CSS布局的資料,請(qǐng)參見:http://www.w3cn.org/article/layout/2004/55.html
4、定義站點(diǎn)獨(dú)有的樣式
經(jīng)過以上兩步之后,我們已經(jīng)有了一個(gè)大概的頁面主題外觀,接下來我們要設(shè)計(jì)站點(diǎn)的細(xì)節(jié),比如,對(duì)站點(diǎn)導(dǎo)航條我們想使用與普通超鏈接不一樣的樣式,如:藍(lán)色、加粗、字體更大、再加上有立體效果的背景圖:
.pageNava:link,.pageNava:hover,.pageNava:visted(Color:#36c;
font-weight:bold;font-size:120%;background:url(images/bg_siteMenu.jpg)#36c;
)
對(duì)于欄目導(dǎo)航,我們想給每個(gè)欄目連接加上背景色,并且有鼠標(biāo)滑過和移出的效果。欄目導(dǎo)航區(qū)的html代碼為:
<divclass="catalogNav">
<ul>
<li>
<Ahref="1">欄目1</A>
<li>
<Ahref="2">欄目2</A>
<li>
<Ahref="3">欄目3</A>
<li>
<Ahref="4">欄目4</A>
<li>
<Ahref="5">欄目5</A>
<li>
<Ahref="6">欄目6</A>
</li>
</ul>
</div>
欄目導(dǎo)航區(qū)對(duì)應(yīng)的Css代碼為:
.catalogNavul
(
margin-left:-30px;
list-style:none;
)
.catalogNavli
(
float:left;
background:#CCC;
line-height:30px;
border:solid1px#black;
)
.catalogNava
(
width:100%;
text-align:center;
height:30px;
)
.catalogNava:link
(
color:#666;
background:url(arrow_off.gif)#CCCno-repeat5px12px;
text-decoration:none;
)
.catalogNava:visited
(
color:#666;
text-decoration:underline;
)
.catalogNava:hover
(
color:#FFF;
font-weight:bold;
text-decoration:none;
background:url(arrow_on.gif)#F00no-repeat5px12px;
)
接下來我們還需要定義其他的站點(diǎn)獨(dú)有的樣式,如欄目標(biāo)題、文章列表、文章正文、時(shí)間、注釋、提示、錯(cuò)誤等等各種樣式,而且這些樣式多以類和id來作為選擇符。這些樣式都是針對(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)用法:將這些樣式表與頁面關(guān)聯(lián)起來。
<LINKrev="stylesheet"media="all"href="css/SiteComm.css"type="text/css"rel="stylesheet">
<LINKrev="stylesheet"media="all"href="css/SiteLayout.css"type="text/css"rel="stylesheet">
<LINKrev="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)站的樣式。
并且這樣我們才能通過客戶端腳本,或者服務(wù)器端代碼方便地改變樣式表的連接地址,而快捷地實(shí)現(xiàn)換膚功能。
5、根據(jù)用戶設(shè)置換膚
網(wǎng)站樣式切換在網(wǎng)上已有很多現(xiàn)成的javascript換膚代碼,一般使用cookie來保存用戶設(shè)置,在請(qǐng)求頁面時(shí),改變頁面的CSS文件連接即可。
而服務(wù)器端的換膚做法是根據(jù)用戶請(qǐng)求,動(dòng)態(tài)地生成CSS文件連接,用戶設(shè)置一般保存在數(shù)據(jù)庫或者cookie中。
由于我們使用了3個(gè)不同功能CSS樣式文件來顯示網(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)模型,雖然顯示千差萬別,但主要的框架是一樣的),這樣我們就可以積累出相當(dāng)數(shù)量和相當(dāng)風(fēng)豐富的界面樣式庫來。
6、通過校驗(yàn)
整個(gè)過程的最后一個(gè)步驟就是對(duì)XHTML\CSS代碼進(jìn)行驗(yàn)證。有很多種的工具都可以幫你對(duì)二者進(jìn)行驗(yàn)證。
例如DreamweaverMX即可檢查我的樣本代碼的可訪問性。你可以通過在文件菜單中選擇CheckPage然后選擇CheckAccessibility來實(shí)現(xiàn)。任何錯(cuò)誤或是警告都會(huì)顯示出來,還包括出現(xiàn)位置的行號(hào)以及對(duì)問題簡(jiǎn)要的解釋。你可以在DreamweaverMX的Reference工具中找到更多關(guān)于這些錯(cuò)誤和警告的內(nèi)容。
而MicrosoftASP.NET2.0具有很多有用的功能,也能幫助我們?cè)O(shè)計(jì)和生成符合XHTML和可訪問性標(biāo)準(zhǔn)的Web站點(diǎn)。使用Web標(biāo)準(zhǔn)生成ASP.NET2.0Web站點(diǎn)http://www.microsoft.com/china/msdn/library/webservices/asp.net/ASPNETusStan.mspx
此外,WorldWideWebConsortium(W3C)提供了超過30個(gè)的可訪問性評(píng)估工具的鏈接。W3C還提供了針對(duì)HTML和CSS的基于Web的免費(fèi)驗(yàn)證器。
因此如果想要改善網(wǎng)站友好度,可用性,可訪問性等,可將新標(biāo)準(zhǔn)視為一個(gè)機(jī)會(huì),而不是一個(gè)障礙。要了解更多關(guān)于新標(biāo)準(zhǔn)和可訪問性的內(nèi)容,你可以去看一看WorldWideWebConsortium中的WebAccessibilityInitiative(WAI)。
相關(guān)文章
- CSS Grid 是一種二維布局系統(tǒng),可以同時(shí)控制行和列,相比 Flex(一維布局),更適合用在整體頁面布局或復(fù)雜模塊結(jié)構(gòu)中,這篇文章主要介紹了前端CSS Grid 布局詳解,需要的朋2025-04-16
CSS Padding 和 Margin 區(qū)別全解析
CSS 中的 padding 和 margin 是兩個(gè)非常基礎(chǔ)且重要的屬性,它們用于控制元素周圍的空白區(qū)域,本文將詳細(xì)介紹 padding 和 margin 的概念、區(qū)別以及如何在實(shí)際項(xiàng)目中使用它們2025-04-07- will-change 是一個(gè) CSS 屬性,用于告訴瀏覽器某個(gè)元素在未來可能會(huì)發(fā)生哪些變化,本文給大家介紹CSS will-change 屬性詳解,感興趣的朋友一起看看吧2025-04-07
- 本文給大家分享在 CSS 中,去除a標(biāo)簽(超鏈接)的下劃線的幾種方法,本文給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2025-04-07
- 在前端開發(fā)中,CSS(層疊樣式表)不僅是用來控制網(wǎng)頁的外觀和布局,更是實(shí)現(xiàn)復(fù)雜交互和動(dòng)態(tài)效果的關(guān)鍵技術(shù)之一,隨著前端技術(shù)的不斷發(fā)展,CSS的用法也日益豐富和高級(jí),本文將2025-04-07
css中的 vertical-align與line-height作用詳解
文章詳細(xì)介紹了CSS中的`vertical-align`和`line-height`屬性,包括它們的作用、適用元素、屬性值、常見使用場(chǎng)景、常見問題及解決方案,感興趣的朋友跟隨小編一起看看吧2025-03-26淺析CSS 中z - index屬性的作用及在什么情況下會(huì)失效
z-index屬性用于控制元素的堆疊順序,值越大,元素越顯示在上層,它需要元素具有定位屬性(如relative、absolute、fixed或sticky),本文給大家介紹CSS 中z - index屬性的作用2025-03-21- 文章詳細(xì)介紹了CSS中的打印媒體查詢@mediaprint包括基本語法、常見使用場(chǎng)景和代碼示例,如隱藏非必要元素、調(diào)整字體和顏色、處理鏈接的URL顯示、分頁控制、調(diào)整邊距和背景等2025-03-18
CSS模擬 html 的 title 屬性(鼠標(biāo)懸浮顯示提示文字效果)
本文介紹了如何使用CSS模擬HTML的title屬性,通過鼠標(biāo)懸浮顯示提示文字效果,通過設(shè)置`.tipBox`和`.tipBox.tipContent`的樣式,實(shí)現(xiàn)了提示內(nèi)容的隱藏和顯示,感興趣的朋友一起2025-03-10前端 CSS 動(dòng)態(tài)設(shè)置樣式::class、:style 等技巧(推薦)
本文介紹了Vue.js中動(dòng)態(tài)綁定類名和內(nèi)聯(lián)樣式的兩種方法:對(duì)象語法和數(shù)組語法,通過對(duì)象語法,可以根據(jù)條件動(dòng)態(tài)切換類名或樣式;通過數(shù)組語法,可以同時(shí)綁定多個(gè)類名或樣式,此外2025-02-26