CSS是什麼：HTML原始碼的優化方案
難懂的HTML
雖然，HTML原始碼已經是最簡單的原始碼了，但很多人都討厭看原始碼，因為有太多太繁雜的設定涵蓋在裡面。其實，HTML碼繁雜的程度，不只人不想看，如果google、YAHOO搜尋引擎電腦程式，也可以選擇有選擇自主權的話，我想他也不會想看的。 這次我們來用 table與DIV ，產生一組3×3矩陣格，來比對原始碼的解讀難度。各位可以看看，到底哪個你比較願意看。產生的結果
我們先來看看用table與用div產生的矩陣格結果會是如何：| table矩陣格 | div矩陣格 |
原始碼探究
再來我們來看一下table與div之間產生的原始碼：| table矩陣格 | div矩陣格 |
| <table width="300" border="1" align="center" cellpadding="0" cellspacing="2" bordercolor="#999999"> <tr> <td width="96" height="96" align="center" valign="middle">1-1</td> <td width="96" height="96" align="center" valign="middle">1-2</td> <td width="96" height="96" align="center" valign="middle">1-3</td> </tr> <tr> <td width="96" height="96" align="center" valign="middle">2-1</td> <td width="96" height="96" align="center" valign="middle">2-2</td> <td width="96" height="96" align="center" valign="middle">2-3</td> </tr> <tr> <td width="96" height="96" align="center" valign="middle">3-1</td> <td width="96" height="96" align="center" valign="middle">3-2</td> <td width="96" height="96" align="center" valign="middle">3-3</td> </tr> </table> | <div class="table_box"> <div>1-1</div> <div>1-2</div> <div>1-3</div> <div>2-1</div> <div>2-2</div> <div>2-3</div> <div>3-1</div> <div>3-2</div> <div>3-3</div> </div> |
只需設定一次，就可以無限套用的CSS
從上面的div原始碼得知，先是用一層div，包覆著九個div標籤；總共10個div標籤，只有最外圍有設定一個class屬性「table_box」，這個「table_box」則是一個識別代號。有了這個識別代號，就可以讓CSS針對其代號做屬性的設定。 以下就是CSS針對「table_box」做的屬性原始碼： .table_box { padding: 1px; height: 300px; width: 300px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; } .table_box div { margin: 1px; padding: 0px; float: left; height: 96px; width: 96px; text-align: center; vertical-align: middle; line-height: 96px; } div { border: 1px solid #999999; }
這樣比較起來，div的原始碼與table的原始碼感覺就一樣複雜了。不過，如果今天是要各做三組以上的3×3矩陣格，就能更清楚的知道哪個簡單哪個複雜了。
結論
對於擁有同樣屬性設定的html，只需用css設定一次就好了，其他的，只要設定class屬性，剩下的全部都不用在重覆定義，原始碼看起來更舒服，其實，對搜尋引擎來看，更能加速了解整個網頁的內容。多少對於關鍵字排名是有幫助的。
|