可讀性CSS代碼編寫(xiě)的小技巧
2024-07-11 08:44:20
供稿：網(wǎng)友
這幾個(gè)步驟不會(huì)產(chǎn)生完美的可讀性 CSS 代碼，可以肯定的是它們可以讓你的生活簡(jiǎn)單些。嘗試下并告訴我你的想法。
讀寫(xiě)看起來(lái)容易，實(shí)則非也。對(duì)于網(wǎng)頁(yè)設(shè)計(jì)來(lái)說(shuō)，讀寫(xiě)行為因?yàn)槎喾N原因而重要，并且在網(wǎng)頁(yè)設(shè)計(jì)過(guò)程中，它們有著較高的優(yōu)先級(jí)。我想說(shuō)的是，用較好的方式寫(xiě)代碼是非常重要的。這是因?yàn)椋屍渌魏魏瓦@些代碼打交道的人感到舒服。1. 定義好的結(jié)構(gòu)
CSS 可讀性最重要的一點(diǎn)是要有一個(gè)好的結(jié)構(gòu)。有好的結(jié)構(gòu)，在尋找特定 CSS 規(guī)則的時(shí)候才能縮小尋找區(qū)域。最好的方法是用 HTML 文件構(gòu)成的風(fēng)格來(lái)結(jié)構(gòu)化 css 文件。這樣的 CSS 文件就比較舒服，而且你也能準(zhǔn)確的知道如何定位。本文由武林網(wǎng)（VeVb.com）發(fā)布！轉(zhuǎn)載和采集的話請(qǐng)不要去掉！謝謝。
<div id="wrapper"> <div id="header"></div> <div id="body"> <div id="sidebar"></div> <div id="content"></div> </div> <div id="footer"></div></div>
#wrapper {...}#header {...}#body {...}#content {...}#sidebar {...}#footer {...}2. 定義顏色特區(qū)
每個(gè)網(wǎng)站顏色的數(shù)量各不相同。因此，為設(shè)計(jì)中用到的顏色定義一個(gè)特區(qū)會(huì)是很好的實(shí)踐。一個(gè)很好的理由就是就算過(guò)了一段時(shí)間你也可以很容易的認(rèn)出這些顏色，而且也可以迅速的替換這些顏色。本文是網(wǎng)頁(yè)教學(xué)www.survivalescaperooms.com收集整理或者原創(chuàng)內(nèi)容，轉(zhuǎn)載請(qǐng)注明出處！3. 每行一個(gè) CSS 規(guī)則
寫(xiě) CSS 代碼的時(shí)候，要考慮到有事需要粗略的瀏覽文件來(lái)搜索一些特定規(guī)則。在一行中聲明 CSS 規(guī)則是個(gè)不錯(cuò)的主意。
這樣就可以利用水平方向上浪費(fèi)的空間，也能縮短文件的翻頁(yè)頁(yè)數(shù)。4. 定義排版樣式特區(qū)
每個(gè)項(xiàng)目中排版都應(yīng)該是非常重要的。應(yīng)該為項(xiàng)目中用到的樣式化文本設(shè)置一個(gè)特區(qū)。這會(huì)節(jié)省很多時(shí)間而且會(huì)激發(fā)你的生產(chǎn)率。
1234567891011
/*............Typography................*/body { font: 62.5%/1.5em Tahoma, Arial, sans-serif; }h1 { font:700 2.4em/1.5em Arial, sans-serif; }h2 { font:400 2.0em Verdana, sans-serif; letter-spacing:-1px; }h3 { font:700 1.8em Arial, sans-serif; }... 5. 縮進(jìn) CSS 規(guī)則
對(duì)于可讀性來(lái)說(shuō)，縮進(jìn)是一個(gè)非常重要的方面。CSS 文件最好的縮進(jìn)方式就是 HTML 文件的縮進(jìn)方式。
這樣可以在 CSS 文件中以某種方式重新生成 HTML 標(biāo)簽的可視化結(jié)構(gòu)。縮進(jìn) CSS 文件時(shí)要想著把聲明排成一行，這樣 CSS 屬性就能形成一個(gè)緊湊的塊。我在 Chris Coyier 的 CSS 文件中看到這個(gè)方式，認(rèn)為這是個(gè)好想法。見(jiàn)下面的源代碼(第二部份)。
12345678
<div id="wrapper"> <div id="header"> </div> <div id="body"> <div id="content"> </div> <div id="sidebar"> </div> </div> <div id="footer"> </div></div>
123456
#wrapper{ width:960px; margin:0 auto; }#header{ float:left; width:960px; height:116px; }h1#logo{ float:left; width:188px; }#menu{ float:right; width:100%; text-align:right; }#menu li{ padding:15px; color:#fff; display:inline; }#menu li a{ color:#fff; text-decoration:none; } 6. 首先定義顯示屬性
通常，在我的項(xiàng)目中，我的 CSS 版面是基于浮動(dòng)的。這是我的方式。。。相對(duì)與定位來(lái)說(shuō)，我更喜歡浮動(dòng)。
總之，我認(rèn)為首先聲明 float，width 和 height 這 3 個(gè)屬性是個(gè)好的方式。這樣，就可以從CSS 規(guī)則中靠前的定義獲得顯示版式。基于這 3 個(gè)屬性，也可以幫助你可視化整個(gè)網(wǎng)站結(jié)構(gòu)。本文由武林網(wǎng)VeVb.com整理發(fā)布！轉(zhuǎn)載請(qǐng)注明出處，謝謝！
12345678910
#wrapper{ width:960px; margin:0 auto; } #header { float:left; width:960px; height:116px; } h1#logo{ float:left; width:188px; height:61px; } #search{ float:right; width:270px; } #SearchBox{ float:left; width:180px; height:28px; } #SearchBtn{ float:left; width:80px; height:28px; } #body{ float:left; } #content{ float:left; width:600px; } #sidebar{ float:right; width:300px;} #footer{ float:left; width:960px; } 總結(jié)
這幾個(gè)步驟不會(huì)產(chǎn)生完美的可讀性 CSS 代碼，可以肯定的是它們可以讓你的生活簡(jiǎn)單些。嘗試下并告訴我你的想法。干杯！
