經(jīng)典樣式表大賽中web標(biāo)準(zhǔn)應(yīng)用存在的問題_Web標(biāo)準(zhǔn)教程

教程Tag：暫無Tag,歡迎添加,賺取U幣!

　　一.CSS校驗(yàn)的問題

　　首先根據(jù)比賽要求，參賽作品必須符合XHTML標(biāo)準(zhǔn)，提交的CSS必須通過W3C的校驗(yàn)。CSS校驗(yàn)的情況比較理想，參賽作品中只有8份作品未通過CSS2.0校驗(yàn)，主要校驗(yàn)錯(cuò)誤都是:“Line : 0 font-family: 建議你指定一個(gè)種類族科作為最后的選擇”

　　W3C建議字體定義的時(shí)候，最后以一個(gè)類別的字體結(jié)束，而不要以單獨(dú)某個(gè)字體結(jié)束。例如"sans-serif"就，以保證在不同操作系統(tǒng)下，網(wǎng)頁字體都能被顯示。

　　雖然多數(shù)人都在body標(biāo)簽上定義了"sans-serif"，但在其它的id或class中再次定義字體時(shí)漏了sans-serif，被認(rèn)為校驗(yàn)不通過。這個(gè)錯(cuò)誤不是很嚴(yán)重，只要稍加注重就可以避免。

　　二.CSS的書寫建議

　　給CSS文件加注釋。注釋會(huì)為你今后的維護(hù)帶來方便，建議盡可能給CSS文件加注釋，不要擔(dān)心增加少量的字節(jié)。
　　
　　盡量簡(jiǎn)寫CSS語法。比如顏色值"#FFFFFF"可以簡(jiǎn)寫成"#FFF";"padding-top:30px;Padding-right:0;padding-bottom:10px;padding-left:2 0px"可以簡(jiǎn)寫為"padding:30px 0 10px 20px;"。在定義技巧上有更多的節(jié)省技巧，隨著對(duì)CSS應(yīng)用的熟練，你會(huì)不斷發(fā)現(xiàn)更好的辦法。

　　三.XHTML校驗(yàn)的問題

　　因?yàn)槭菢邮奖肀荣悾蠹覍?duì)CSS的校驗(yàn)比較注重，但在XHTML符合標(biāo)準(zhǔn)方面有點(diǎn)忽視，出現(xiàn)很多低級(jí)錯(cuò)誤。主要問題羅列如下：

　　target="_blank"，這個(gè)語法在HTML4.0里是正確的，在XHTML1.0里是不答應(yīng)使用的。解決的辦法之一是寫成target="new"，另外一個(gè)辦法是用js處理所有的target；

　　樣式表最好不要內(nèi)嵌，將樣式表文件獨(dú)立出來易于維護(hù)。假如內(nèi)嵌<style>一定要寫成<style type="text/css">，其中的type不能忽略，否則XHTML無法判定你的style作用在什么方面。

　　<br>必須寫成<br />，XHTML要求所有的標(biāo)簽必須關(guān)閉，不成對(duì)的標(biāo)簽直接在后面加" /"。

　　重復(fù)使用同一ID。一個(gè)ID在XHTML中只能使用1次，假如需要多次引用樣式，應(yīng)該使用class。

　　<meta http-equiv="Content-Type" content="text/html; charset="gb2312" />很明顯content屬性值里面多了一個(gè)引號(hào)。
　　
　　Flash的嵌入方法錯(cuò)誤。<embed>最早是Netscape的私有標(biāo)簽，即使后來為IE所支持，但始終沒有被W3C承認(rèn)，在HTML4.0沒有<embed>這個(gè)標(biāo)簽。W3C主張的是采用<object>標(biāo)簽。為了解決不同瀏覽器的兼容，有一個(gè)變通的解決方法是2個(gè)標(biāo)簽都采用。完整的示例代碼如下(flash背景為透明)： <object classid="clsid:27CDB6E-AE6D-11cf-96B8-444553540000"

codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0"
　　
　　width="300" height="100"> <param name="quality" value="high"> <param name="wmode" value="transparent">

　　<param name="SRC" value="test.swf"> <embed src="test.swf" wmode="transparent" quality="high"

　　pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"

　　type="application/x-shockwave-flash" width="300" height="100"> </embed> </object>

　　但直接寫在XHTML中依然不可以，我們現(xiàn)在只能通過把上面代碼寫在flash.js文件里，然后再調(diào)用來騙過校驗(yàn)。

　　關(guān)于flash是否符合標(biāo)準(zhǔn)，是一個(gè)存在爭(zhēng)議的問題。更多說明：參考http://www.blueidea.com/tech/site/2004/1920.asp

　　類似id=header class=title代碼都應(yīng)該寫成id="header" class="title"。給屬性值加引號(hào)是最XHTML基本的語法規(guī)則。

　　四.兼容的問題

　　有12份作品在IE6.0、Mozilla Firefox1.0、Opera 7.12中瀏覽發(fā)生變形和錯(cuò)位。(我沒有用IE5.0測(cè)試，偷懶啦:)IE5.0對(duì)所有CSS布局的設(shè)計(jì)師都是個(gè)挑戰(zhàn))。

　　在IE里居中，但Mozilla里沒有。在IE中設(shè)置body {TEXT-ALIGN: center;}就已經(jīng)可以居中了，但在Mozilla中必須對(duì)需要居中的層再加入以下樣式設(shè)置：MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 超出寬度。在Mozilla里看正常的頁面，在IE里因?yàn)槌鰧挾榷冃危⑴诺膶右频较旅嫒チ�。這個(gè)情況是因?yàn)镮E和Mozilla對(duì)盒模型解釋不同造成的，有很多解決辦法，比如"!important"方法。

　　總得來說，參賽作品整體上是合格的居多，這次大賽的目的也已經(jīng)基本達(dá)到，web標(biāo)準(zhǔn)和CSS布局已經(jīng)被越來越多的設(shè)計(jì)師了解和把握。對(duì)于部分作品美工簡(jiǎn)陋，我想這是一個(gè)過程，資深設(shè)計(jì)師應(yīng)該都記得Table布局剛出現(xiàn)的時(shí)候，網(wǎng)頁大多也很樸素。CSS布局經(jīng)過一段時(shí)間的消化理解和應(yīng)用，會(huì)有更多象一等獎(jiǎng)作品這樣技術(shù)美觀兼顧的網(wǎng)頁涌現(xiàn)。