|
CSS整站規(guī)劃——網(wǎng)站設(shè)計的重中之重題
說過DIV當然要說說CSS，CSS使現(xiàn)代網(wǎng)站大放異彩。符合標準化的網(wǎng)站，僅僅通過更換一個不同的CSS文件，就可以瞬間實現(xiàn)整站所有頁面改變更新的顯示效果。CSS統(tǒng)一了網(wǎng)頁的表現(xiàn)層，而不影響網(wǎng)站結(jié)構(gòu)和數(shù)據(jù)傳輸。
而CSS的書寫方式也因設(shè)計師的不同而各有千秋，在此，我們強調(diào)CSS的設(shè)計關(guān)鍵在于代碼的縮略與復(fù)用：縮略能使CSS代碼更加簡明扼要，CSS文件也能縮小體積；復(fù)用則是提高代碼的利用率，以最少的代碼實現(xiàn)最高的重復(fù)使用效率。如圖3所示，騰訊網(wǎng)的CSS設(shè)計就十分優(yōu)秀。
首先我們來看代碼的縮略，很多編輯器生成的CSS代碼片段會像圖4一樣雜亂隨意，而實際上這段代碼能縮略掉所有不需要的空格，組合起同系列元素，使得代碼行讀起來更加輕松無負擔。
畢竟，編輯器是按照一定的程序運算而提供出來的CSS樣式，它能自動實現(xiàn)預(yù)期效果的CSS樣式，而絕不會自動精簡代碼。這個過程還是需要人的干預(yù)，而且對于不同的應(yīng)用場合，CSS代碼中的縮略方式也會有所不同，而取誰舍誰，則完全看具體情況而定了。
其次，我們來了解CSS的復(fù)用。同樣是復(fù)用，CSS的復(fù)用情況和DIV很不同。設(shè)計中我們需要盡量實現(xiàn)CSS代碼的復(fù)用，盡量多利用CSS的繼承和層疊，而不是到處定義新的CSS類。在繁瑣的CSS設(shè)計中，也許會遇見兩個大部分屬性一致而只有某一兩個細節(jié)不同的類，那么可以考慮這兩個類是否是繼承關(guān)系，或者說將它們相同的屬性提煉出來，形成另一個可供公用的類。
后期整理——代碼也可以很美
之前說的都是代碼編寫的前期規(guī)范，而頁面完成之后，代碼的后期整理對于今后的修改維護“可持續(xù)發(fā)展”也非常重要。在這里，我們需要注意以下幾個方面的內(nèi)容。
1.樣式表統(tǒng)一：樣式表分為內(nèi)聯(lián)樣式表和外聯(lián)樣式表，成型的網(wǎng)站架構(gòu)要求對樣式表統(tǒng)一管理，所有的樣式表都需要獨立出來，作為一個或幾個外聯(lián)樣式表文件；除非是極特殊的情況，該CSS只在這一個頁面中出現(xiàn)，不會有另外的頁面需要復(fù)用它，那么可以考慮使用內(nèi)聯(lián)，而內(nèi)聯(lián)樣式很多時候會被視為極不專業(yè)的做法。如圖5，色影無忌網(wǎng)站的設(shè)計從外觀看很符合標準化設(shè)計，但從圖6我們可以看出色影無忌的代碼設(shè)計非�；靵y。
出處：藍色理想
責任編輯：bluehearts
上一頁 代碼設(shè)計 上 下一頁 代碼設(shè)計 下
|
第 1 頁 
第 10 頁 代碼設(shè)計 中
