|
1.事實(shí)上，CSS布局只是Web標(biāo)準(zhǔn)的一部分，在HTML、CSS、Javascript這三大元素中，HTML才是最重要的，結(jié)構(gòu)才是重點(diǎn)，樣式是用來(lái)修飾結(jié)構(gòu)的。正確的做法是，先確定HTML，確定語(yǔ)義的標(biāo)簽，再來(lái)選用合適的CSS。
2.默認(rèn)情況下，瀏覽器會(huì)根據(jù)標(biāo)簽的語(yǔ)義給定一個(gè)默認(rèn)的樣式，CSS則是用來(lái)控制樣式和重置樣式的。判斷網(wǎng)頁(yè)標(biāo)簽語(yǔ)義是否良好的一個(gè)簡(jiǎn)單方法就是：去掉樣式，看網(wǎng)頁(yè)結(jié)構(gòu)是否組織良好有序，是否仍然有很好的可讀性。 3.h標(biāo)簽的含義是“標(biāo)題”，搜索引擎對(duì)這個(gè)標(biāo)簽比較敏感，尤其是h1和h2。一個(gè)語(yǔ)義良好的頁(yè)面，h標(biāo)簽應(yīng)該是完整有序沒有斷層的。也就是說(shuō)，要按照h1,h2,h3,h4這樣一次排序下來(lái)，不要出現(xiàn)類似h1,h3,h4，漏掉h2的情況。 4.當(dāng)頁(yè)面內(nèi)標(biāo)簽無(wú)法滿足設(shè)計(jì)需要時(shí)，才會(huì)適當(dāng)添加div和span等無(wú)語(yǔ)義標(biāo)簽來(lái)輔助實(shí) 現(xiàn)。 5.一般來(lái)說(shuō)，表單域要用fieldset標(biāo)簽包起來(lái)，并用legend標(biāo)簽說(shuō)明表單的用途。因?yàn)閒ieldset默認(rèn)有邊框，而legend也有默認(rèn)的樣式，為滿足設(shè)計(jì)需要，我們可以將fieldset的“border”設(shè)為“none”，把legend的“display”設(shè)為“none”，以此來(lái)兼顧語(yǔ)義和設(shè)計(jì)兩方面的要求。每個(gè)input標(biāo)簽對(duì)應(yīng)的說(shuō)明文本都需要使用label標(biāo)簽，并且通過為input設(shè)置id屬性，在label標(biāo)簽中設(shè)置“for=someld”來(lái)讓說(shuō)明文本和對(duì)應(yīng)的input關(guān)聯(lián)起來(lái)。實(shí)例： <form action="" method="post"> <fieldset> <legend>登錄表單</legend> <p><label for="username">用戶名：</label><input type="text" value="" id="username" name="username" /></p> <p><label for="userpwd">密碼：</label><input type="password" value="" id="userpwd" name="userpwd" /></p> <input type="submit" value="提交" /> </fieldset> </form> 6.table布局在二維數(shù)據(jù)顯示有它的語(yǔ)義和用途，是最好的選擇。在用table布局時(shí)，常常只使用table、tr、td標(biāo)簽。事實(shí)上，table常用的標(biāo)簽還包括caption、thead、tbody、tfoot和th。我們?cè)谑褂帽砀竦臅r(shí)候，應(yīng)該注意選用合適的標(biāo)簽，表格標(biāo)題要用caption,表頭要用thead包圍，主體部分用tbody包圍，尾部要用tfoot包圍，表頭和一般單元格分開，表頭用th，一般單元格用td。實(shí)例： <table border="1"> <colgroup> <col width="25%"/> <col width="25%"/> <col width="25%"/> <col width="25%"/> </colgroup> <caption>幾個(gè)頁(yè)面實(shí)現(xiàn)的比較</caption> <thead> <tr><th>實(shí)現(xiàn)方式</th><th>代碼量</th><th>搜索引擎友好</th><th>特殊終端兼容</th></tr> </thead> <tbody> <tr><td>table布局</td><td>多</td><td>差</td><td>一般</td></tr> <tr><td>亂用標(biāo)簽的布局</td>少<td></td>差<td></td><td>一般</td></tr> <tr><td>亂用標(biāo)簽的布局</td><td>少</td><td>好</td><td>好</td></tr> </tbody> </table> 實(shí)現(xiàn)表格邊框細(xì)線：css: table{border-collapse:collapse;border-spacing:0;border-left:1px solid #888;border-top:1px solid #888;background:#efefef;} th,td{border-right:1px solid #888;border-bottom:1px solid #888;padding:5px 15px;} th{font-weight:bold;background:#ccc;} 7.語(yǔ)義化標(biāo)簽應(yīng)注意的一些問題 為了保證網(wǎng)頁(yè)去樣式后的可讀性，并且有符合Web標(biāo)準(zhǔn)，我們應(yīng)注意以下幾點(diǎn)： ①盡可能少地使用無(wú)語(yǔ)義標(biāo)簽div和span； ②在語(yǔ)義不明顯，既可以用p也可以用div的地方，盡量用p，因?yàn)閜默認(rèn)情況下有上下間距，去樣式后的可讀性更好，對(duì)兼容特殊終端有利； ③不要使用純樣式標(biāo)簽，例如b、font和u等，改用css設(shè)置。語(yǔ)義上需要強(qiáng)調(diào)的文本可以包在strong或em標(biāo)簽里，strong和em有“強(qiáng)調(diào)”的語(yǔ)意，其中strong的默認(rèn)樣式是加粗，而em的默認(rèn)樣式是斜體。 8.怪異模式和標(biāo)準(zhǔn)模式 為了確保向后兼容，瀏覽器廠商發(fā)明了標(biāo)準(zhǔn)模式和怪異模式這兩種方法來(lái)解析網(wǎng)頁(yè)。在標(biāo)準(zhǔn)模式中，瀏覽器根據(jù)規(guī)范表現(xiàn)頁(yè)面；而怪異模式通常模擬老式瀏覽器（比如Microsoft IE 4和Netscape Navigator 4）的行為以防止老站點(diǎn)無(wú)法工作。這兩種模式的差異比較大，比較典型的就是IE 對(duì)盒模式的解析：在標(biāo)準(zhǔn)模式中，網(wǎng)頁(yè)元素的寬度是由padding、border、width三者的寬度相加決定的；而在怪異模式中，width本身就包括了padding和border的寬度。此外，標(biāo)準(zhǔn)模式下塊級(jí)元素的經(jīng)典居中方法---設(shè)定width，然后margin-left:auto,margin-right:auto---在怪異模式下也無(wú)法正常工作。 同樣的代碼，在怪異模式和標(biāo)準(zhǔn)模式下的表現(xiàn)很可能相差甚遠(yuǎn)。因?yàn)榘l(fā)明怪異模式的目的就是為了兼容老式瀏覽器下的代碼，它的很多解析方式是不符合標(biāo)準(zhǔn)的。所以，一般情況下，我們應(yīng)該避免出發(fā)怪異模式，應(yīng)選用標(biāo)準(zhǔn)模式。 HTML中常見的四種DTD類型： //用于XHTML 4.0 的嚴(yán)格型 <!DOCTYPE HTMLPUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www./TR/html4/strict.dtd"> //用于XHTML 4.0 的過渡型 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www./TR/html4/loose.dtd"> //用于XHTML 1.0 的嚴(yán)格型 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd"> //用于XHTML 1.0 的過渡型 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www./TR/xhtml1/DTD/xhtml1-strict.dtd"> 按照W3C的標(biāo)準(zhǔn)，我們需要在HTML的最開始聲明文件的DTD類型。如果漏寫DTD聲明，F(xiàn)irefox仍然會(huì)按照標(biāo)準(zhǔn)模式來(lái)解析網(wǎng)頁(yè)，但在IE中（包括IE6，IE7,IE8）就會(huì)出發(fā)怪異模式。在table布局時(shí)代，盒模型和CSS我們都接觸得比較少，所以DTD聲明并不是很重要，被我們忽視了。到了CSS布局時(shí)代，DTD的聲明就變得非常重要了。為了避免怪異模式給我們帶來(lái)不必要的麻煩，我們要養(yǎng)成書寫DTD聲明的好習(xí)慣。 9.推薦的一種組織CSS的方法：base.css+common.css+page.css。將網(wǎng)站內(nèi)的所有樣式，按照職能分成三大類：base、common和page。在一般情況下，任何一個(gè)網(wǎng)頁(yè)的最終表現(xiàn)都是由這三者共同完成的。這三者并不是并列結(jié)構(gòu)，而是層疊結(jié)構(gòu)。 page ↓ common ↓ base 1.base層 這一層位于三者的最底層，提供CSS reset功能和粒度最小的通用類---原子類。 這一層會(huì)被所有頁(yè)面引用，是頁(yè)面樣式所需以來(lái)的最底層。這一層與具體UI無(wú)關(guān)，無(wú)論何種風(fēng)格的設(shè)計(jì)都可以引用它，素以base層要力求精簡(jiǎn)和通用。這一層的核心職能猶如房子的地基一樣重要，亦扮演著網(wǎng)頁(yè)中最基礎(chǔ)的同樣重要的角色。 2.common層 這一層位于中間，提供組件級(jí)的CSS類。與common層相關(guān)的是樣式的模塊化，模塊化可以從樣式和行為兩個(gè)層面來(lái)考慮。我們可以將頁(yè)面內(nèi)的元素拆分成一小塊一小塊功能和樣式相對(duì)獨(dú)立的小模塊，這些模塊有些是很少重復(fù)的，有些是會(huì)大量重復(fù)的，我們可以將大量重復(fù)的模塊視為一個(gè)組件。我們從頁(yè)面盡可能多地將組件提取出來(lái)，放在common層里。common層就相當(dāng)于MVC模式中的M（Model模型）。為了保證重用性和靈活性，M需要盡可能將內(nèi)部實(shí)現(xiàn)封裝，對(duì)可能會(huì)經(jīng)常變化的部分提供靈活的接口。不同的房子選用不同的門窗，common層就像建房時(shí)用到的門窗，房子選用的門窗就好比這個(gè)網(wǎng)站選用的UI組件。門窗最好與整個(gè)房子的風(fēng)格保持一致。同樣，網(wǎng)站最好讓UI組件的風(fēng)格保持相同。UI組件是網(wǎng)站中的單位，在網(wǎng)站內(nèi)部可以高度重用，但不用的網(wǎng)站可能會(huì)用不同的UI組件。 所以，comman層的網(wǎng)站級(jí)的，不同的網(wǎng)站有不同的common層，同一個(gè)網(wǎng)站只有一個(gè)common層。common層是放在一個(gè)common.css文件里，還是按照功能劃分放在諸如common_form.css、common_imagelist.css的多個(gè)文件里，需要根據(jù)網(wǎng)站規(guī)模來(lái)決定。在團(tuán)隊(duì)合作中，common層最好由一個(gè)人負(fù)責(zé)，統(tǒng)一管理。 3.page層 網(wǎng)站中高度重用的模塊，我們把它們視為組件，放在common層；非高度重用的模塊，可以把它們放在page層。page層位于最高層，提供頁(yè)面級(jí)的樣式。page層就好比是房間內(nèi)的裝飾畫，不同房間的裝飾畫各不相同。 page層是頁(yè)面級(jí)的，每個(gè)頁(yè)面都可能有自己的page層CSS.page層的文件可以分離出來(lái)寫，也可以放在一個(gè)page.css文件里，根據(jù)頁(yè)面配上注釋，分塊書寫，便于維護(hù)。實(shí)例： /*首頁(yè)*/ .test{} .test2{} /*關(guān)于我們*/ .test3{} .test4{} /*聯(lián)系我們*/ .test5{} .test6{} 這樣做可能會(huì)帶來(lái)些冗余，比如，首頁(yè)的css文件里帶有“關(guān)于我們”、“聯(lián)系我們”頁(yè)的page層CSS文件，而這些對(duì)首頁(yè)的樣式毫無(wú)影響。但是，對(duì)于文件過于分散和集中的問題并沒有完美的解決方法，我們需要根據(jù)實(shí)際情況做些適當(dāng)?shù)恼壑?。比起讓page層的CSS文件過于繁多和零散，把它們集中在一個(gè)文件中更便于維護(hù)，且便于瀏覽器緩存，瀏覽網(wǎng)站時(shí)只有首頁(yè)的下載時(shí)間較長(zhǎng)，瀏覽其他頁(yè)面時(shí)反而較快。當(dāng)然，page.css還是應(yīng)當(dāng)越精簡(jiǎn)越好，能用base層和common層的CSS解決的，就盡量不要用到page層。 base層基本上不需要維護(hù)，common層修改的幅度不會(huì)很大，通常只由一個(gè)人負(fù)責(zé)維護(hù)，但到了page層，代碼可能由多人開發(fā)，如何避免沖突是個(gè)需要注意的問題。通常我們通過命名規(guī)則來(lái)避免這種沖突。 10.拆分模塊的技巧： ①模塊與模塊之間盡量不要包含相同的部分，如果有相同部分，應(yīng)將它們提取出來(lái)，拆分成一個(gè)獨(dú)立的模塊 ②模塊應(yīng)在保證數(shù)量盡可能少的原則下，做到盡可能簡(jiǎn)單，以提高重用性 在面向?qū)ο缶幊讨幸灿蓄愃频乃枷?，設(shè)計(jì)類的時(shí)候，為了保證重用性需遵守“單一職責(zé)”原則，一般情況下，類的功能應(yīng)該相對(duì)簡(jiǎn)單穩(wěn)定，一個(gè)類只具有一個(gè)職責(zé)。一個(gè)功能超復(fù)雜的擁有多個(gè)職責(zé)的大類，遠(yuǎn)不如一群職責(zé)單一的簡(jiǎn)單小類。 11.多用組合，少用繼承 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www./1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無(wú)標(biāo)題文檔</title> <style type="text/css"> /*常用類樣式以組合的方式呈現(xiàn)*/ .fs-12{font-size:12px} .fs-14{font-size:14px} .pd-10{padding:10px} .pd-20{padding:20px} .box{ border:1px solid #ccc; } /*下面以繼承的方式實(shí)現(xiàn)樣式*/ .box.gray{background:#f1f1f1} .box.green{background:#66ff66} </style> </head> <body> <div class="box gray fs-12 pd-20">this a gray fontsize12px padding20px box</div> <div class="box green fs-14 pd-10">this a gray fontsize14px padding10px box</div> </body> </html> 我們看一些雖然在class上引用了幾個(gè)，但是代碼和邏輯都非常清晰，而且非常容易維護(hù)，隨意組合隨意擴(kuò)展。從上面可以看到“組合”的方式是不言而喻的，但是也不是十全十美的，再拆分組合的時(shí)候一定不要過度，不然效果可能適得其反，只有把組合+繼承運(yùn)用的恰到好處才能讓我們的代碼更加優(yōu)雅和藝術(shù)。 |
|
|
來(lái)自： 文章收藏者 > 《技術(shù)文章》
