2.1 DIV CSS初體驗(yàn)

DIV和CSS到底是什么呢？

2.1.1 什么是DIV CSS

DIV+CSS(DIV CSS)是“WEB標(biāo)準(zhǔn)”中常用術(shù)語(yǔ)之一。DIV，它是用于搭建html網(wǎng)頁(yè)結(jié)構(gòu)（框架）的標(biāo)簽，像<b>、<h1>、<span>等html標(biāo)簽一樣。CSS，它是用于創(chuàng)建網(wǎng)頁(yè)表現(xiàn)（樣式/美化）樣式表的統(tǒng)稱，通過CSS來設(shè)置DIV標(biāo)簽樣式，這一切常常稱為DIV+CSS。

<DIV>標(biāo)記早在HTML3.0時(shí)代就已經(jīng)出現(xiàn)過，但那時(shí)并不常用。直到CSS的出現(xiàn)才逐漸發(fā)揮出它的優(yōu)勢(shì)。

傳統(tǒng)的HTML3.2/4.0標(biāo)簽里既有控制結(jié)構(gòu)的標(biāo)簽，如<p>；又有控制表現(xiàn)的標(biāo)簽，如<font>；還有本意用于結(jié)構(gòu)后來被濫用于控制表現(xiàn)的標(biāo)簽，如<table>。結(jié)構(gòu)標(biāo)簽與表現(xiàn)標(biāo)簽混雜在一起。

2.1.2 了解DIV與CSS結(jié)合的優(yōu)勢(shì)

下面以一個(gè)設(shè)計(jì)1級(jí)標(biāo)題為例，講解一下DIV與CSS結(jié)合的優(yōu)勢(shì)。

對(duì)于1級(jí)標(biāo)題，傳統(tǒng)的表格布局代碼如下。

<table width="100%"border="0"cellpadding="0">
<tr>
<td><font face="Arial"size="4"color="#000000"><b>height</b></font></td>
</tr>
</table>
<! --下面是實(shí)現(xiàn)下線的表格-->
<table width="100%"border="0"cellspacing="1"cellpadding="0">
<tr>
<td height="2"bgcolor="#FF9900"></td>
</tr>
</table>

可以看出不僅結(jié)構(gòu)和表現(xiàn)混雜在一起，而且頁(yè)面內(nèi)到處都是為了實(shí)現(xiàn)裝飾線而插入的表格代碼。于是網(wǎng)站制作者往往會(huì)遇到如下問題。

● 改版：例如需要把標(biāo)題文字替換成紅色，下邊線變成1px灰色的虛線，那么制作者可能就要一頁(yè)一頁(yè)地修改。CSS就是用來解決“批量修改表現(xiàn)”的問題。廣泛被制作者接受的CSS屬性，包括控制字體的大小顏色、超鏈接的效果、表格的背景色等。

● 數(shù)據(jù)的利用：從本質(zhì)上講，所有的頁(yè)面信息都是數(shù)據(jù)，例如對(duì)CSS所有屬性的解釋，就可以建立一個(gè)數(shù)據(jù)庫(kù)，有數(shù)據(jù)就存在數(shù)據(jù)查詢、處理和交換的問題。由于結(jié)構(gòu)和表現(xiàn)混雜在一起，裝飾圖片、內(nèi)容被層層嵌套的表格拆分。

在上面的這個(gè)實(shí)例中，從哪里開始是標(biāo)題？哪里開始是說明？哪些是附加信息不需要打印？如果只靠軟件是無法判斷的，唯一的方法是人工判斷、手工處理。這要如何解決呢？解決的辦法就是使結(jié)構(gòu)清晰化，將內(nèi)容、結(jié)構(gòu)與表現(xiàn)相分離。

對(duì)于1級(jí)標(biāo)題的實(shí)現(xiàn)如下所示。

<h1>height</h1>

同時(shí)，在CSS內(nèi)定義<h1>的樣式如下。

h1{
font:bold 16px Arial;
color:#000;
border-bottom:2px solid#f90:
}

這樣，當(dāng)需要修改外觀的時(shí)候，例如，需要把標(biāo)題文字替換成紅色，下畫線變成1px灰色的虛線，只需要修改相應(yīng)的CSS即可，而不用修改HTML文檔，如下所示。

h1{
font:bold 16px Arial;
color:#f00;
border-bottom:1px dashed#666:
}

如果為了實(shí)現(xiàn)特定的效果，還需要做進(jìn)一步的處理。

|提示|

雖然DIV+CSS在網(wǎng)頁(yè)布局方面具有很大的優(yōu)勢(shì)，但在使用的時(shí)候仍需注意以下3個(gè)方面。

① 對(duì)于CSS的高度依賴會(huì)使得網(wǎng)頁(yè)設(shè)計(jì)變得比較復(fù)雜。相對(duì)于表格布局來說，DIV+CSS要比表格定位復(fù)雜很多，即使網(wǎng)站設(shè)計(jì)高手也很容易出現(xiàn)問題，更不要說初學(xué)者了。因此DIV+CSS應(yīng)酌情而用。

② CSS文件異常將會(huì)影響到整個(gè)網(wǎng)站的正常瀏覽。CSS網(wǎng)站制作的設(shè)計(jì)元素通常放在外部文件中，這些文件可能比較龐大且復(fù)雜，如果CSS文件調(diào)用出現(xiàn)異常，那么整個(gè)網(wǎng)站將會(huì)變得慘不忍睹，因此要避免那些設(shè)計(jì)復(fù)雜的CSS頁(yè)面或重復(fù)性定義樣式的出現(xiàn)。

③ 設(shè)計(jì)的CSS網(wǎng)站瀏覽器兼容性問題比較突出?；贖TML4.0的網(wǎng)頁(yè)設(shè)計(jì)在IE4.0之后的版本中幾乎不存在瀏覽器兼容性問題，但CSS+DIV設(shè)計(jì)的網(wǎng)站在IE瀏覽器里面正常顯示的頁(yè)面，到火狐瀏覽器（FireFox）中卻可能面目全非。因此，使用CSS+DIV布局網(wǎng)站頁(yè)面時(shí)也需要注意瀏覽器的支持問題。