一、 什么是DIV CSS

　　DIV CSS簡介DIV+CSS是網(wǎng)站標(biāo)準(zhǔn)（或稱"WEB標(biāo)準(zhǔn)"）中常用術(shù)語之一，DIV+CSS 是一種網(wǎng)頁的布局方法，這一種網(wǎng)頁布局方法有別于傳統(tǒng)的HTML網(wǎng)頁設(shè)計語言中的表格（table）定位方式，可實(shí)現(xiàn)網(wǎng)頁頁面內(nèi)容與表現(xiàn)相分離ID嵌套樣式問題。XHTML是The Extensible HyperText Markup Language（可擴(kuò)展超文本標(biāo)識語言）的縮寫。XHTML基于可擴(kuò)展標(biāo)記語言（XML），是一種在HTML 基礎(chǔ)上優(yōu)化和改進(jìn)的的新語言，目的是基于XML應(yīng)用與強(qiáng)大的數(shù)據(jù)轉(zhuǎn)換能力，適應(yīng)未來網(wǎng)絡(luò)應(yīng)用更多的需求。在XHTML網(wǎng)站設(shè)計標(biāo)準(zhǔn)中，不再使用表格定位技術(shù)，而是采用DIV+CSS的方式實(shí)現(xiàn)各種定位。

　　二、DIV CSS產(chǎn)生背景

　　HTML語言自HTML4.01以來，不再發(fā)布新版本，原因就在于HTML語言正變得越來越復(fù)雜化、專用化ID嵌套樣式問題。即標(biāo)記越來越多，甚至各個瀏覽器生產(chǎn)商也開發(fā)出只適合于其特定瀏覽器的HTML標(biāo)記，這顯然有礙于HTML網(wǎng)頁的兼容性。于是W3C組織進(jìn)而重新從SGML中獲取營養(yǎng)，隨后發(fā)布了XML。

　　XML是一種比HTML更加嚴(yán)格的標(biāo)記語言，?cè)Q是可擴(kuò)展標(biāo)記語言（EXtensible Markup Language）ID嵌套樣式問題。但是XML過于復(fù)雜，且當(dāng)前的大部分瀏覽器都不完全支持XML。于是XHTML這種語言就派上了用場，用XHTML語言重寫后的HTML頁面可以應(yīng)用許多XML應(yīng)用技術(shù)。使得網(wǎng)頁更加容易擴(kuò)展，適合自動數(shù)據(jù)交換，并且更加規(guī)整。

　　而CSS關(guān)鍵就在于其與腳本語言（如Javascript）及XML技術(shù)的融合，即CSS+Javascript+XML（實(shí)際上有一種更好的融合：XML+XSL+Javascript）——但XSL，即可擴(kuò)展樣式表語言相較于CSS過于復(fù)雜，不太容易上手ID嵌套樣式問題。自從CSS出現(xiàn)之后，HTML終于擺脫了雜亂無章的惡夢，開始將頁面內(nèi)容與樣式分離。

　　三、DIV CSS的優(yōu)勢

　　1、符合W3C標(biāo)準(zhǔn)ID嵌套樣式問題。微軟等公司均為W3C支持者。這一點(diǎn)是最重要的，因?yàn)檫@保證您的網(wǎng)站不會因?yàn)閷砭W(wǎng)絡(luò)應(yīng)用的升級而被淘汰。

　　2、支持瀏覽器的向后兼容，也就是無論未來的瀏覽器大戰(zhàn)，勝利的是IE7或者是火狐，您的網(wǎng)站都能很好的兼容ID嵌套樣式問題。

　　3、搜索引擎更加友好ID嵌套樣式問題。相對與傳統(tǒng)的table, 采用DIV+CSS技術(shù)的網(wǎng)頁，對于搜索引擎的收錄更加友好。

　　4、樣式的調(diào)整更加方便ID嵌套樣式問題。內(nèi)容和樣式的分離，使頁面和樣式的調(diào)整變得更加方便。 現(xiàn)在YAHOO,MSN等國際門戶網(wǎng)站，網(wǎng)易，新浪等國內(nèi)門戶網(wǎng)站，和主流的WEB2.0網(wǎng)站，均采用DIV+CSS的框架模式，更加印證了DIV+CSS是大勢所趨。

　　5、CSS的極大優(yōu)勢表現(xiàn)在簡潔的代碼，對于一個大型網(wǎng)站來說，可以節(jié)省大量帶寬，而且眾所周知，搜索引擎喜歡清潔的代碼ID嵌套樣式問題。

　　6、表現(xiàn)和結(jié)構(gòu)分離ID嵌套樣式問題，在團(tuán)隊(duì)開發(fā)中更容易分工合作而減少相互關(guān)聯(lián)性

　　四、DIV CSS嵌入方式

　　行內(nèi)套用　　可以在HTML文件內(nèi)直接宣告樣式ID嵌套樣式問題。 　　舉例來說，Thisisfontsize16.

　　以上的HTML文件在瀏覽器上會顯現(xiàn)為：Thisisfontsize16.

　　嵌入套用樣式可以嵌入于HTML文件中(通常是在head內(nèi))ID嵌套樣式問題。 　　舉例來說，headstyle type="text/css"div{background-color:#FF0000;}/style/headbody背景顏色是紅**ody

　　以上的HTML會顯現(xiàn)出：背景顏色是紅色 　　

　　外部連接套用 　　在這種方式下，所有的CSS樣式宣告都是存在另外一個檔案中ID嵌套樣式問題。

　　該檔案通常名稱為.cssID嵌套樣式問題。

　　在HTML文件的header../header之中ID嵌套樣式問題，我們將用以下的程式碼將這個.css檔案連接進(jìn)入：

　　linkrel=style sheettype="text/css" href="external-stylesheet.css"

　　以上這一行會將在external-stylesheet.css這個檔案內(nèi)所宣告的樣式加入HTML文件內(nèi)ID嵌套樣式問題。

　　匯入套用　　外部的CSS樣式也可以被匯入進(jìn)HTML文件ID嵌套樣式問題。 　　匯入的做法為利用@import這個指令。

　　@import的語法為：style type="text/css"!--@import url("style.css");--/style

　　@import指令最初的用意，是為了能夠針對不同的瀏覽器而運(yùn)用不同的樣式ID嵌套樣式問題。不過，現(xiàn)在已經(jīng)沒有這個必要。現(xiàn)在用@import的目的，最常是要加入多個CSS樣式。當(dāng)多個CSS樣式被@import的方式加入，而不同CSS樣式互相有沖突時，后被加入的CSS樣式有優(yōu)先的順位(詳情請見CSS串接)。

　　還有一種嵌入的方式是直接寫在標(biāo)簽上的ID嵌套樣式問題，不過這種寫法有些限制，大多數(shù)標(biāo)簽都可以接受這種解法: 　　div style="color:#000000;"文字/div

　　這個代碼通過直接嵌入標(biāo)簽的形式，使得標(biāo)簽內(nèi)的文字更改顏色，而且根據(jù)css的優(yōu)先調(diào)用級直接嵌入標(biāo)簽的寫法也更直接更優(yōu)先選擇調(diào)用ID嵌套樣式問題。

　　五、DIV CSS布局優(yōu)點(diǎn)

　　一、使頁面載入得更快

　　由于將大部分頁面代碼寫在了CSS當(dāng)中，使得頁面體積容量變得更小ID嵌套樣式問題。相對于表格嵌套的方式，DIV+CSS將頁面獨(dú)立成更多的區(qū)域，在打開頁面的時候，逐層加載。而不像表格嵌套那樣將整個頁面圈在一個大表格里，使得加載速度很慢。

　　二、降低流量費(fèi)用 　　頁面體積變小，瀏覽速度變快，這就使得對于某些控制主機(jī)流量的網(wǎng)站來說是最大的優(yōu)勢了ID嵌套樣式問題。 　　

　　三、修改設(shè)計時更有效率

　　由于使用了DIV+CSS制作方法，在修改頁面的時候更加容易省時ID嵌套樣式問題。根據(jù)區(qū)域內(nèi)容標(biāo)記，到CSS里找到相應(yīng)的ID，使得修改頁面的時候更加方便，也不會破壞頁面其他部分的布局樣式。

　　四、保持視覺的一致性

　　DIV+CSS最重要的優(yōu)勢之一：保持視覺的一致性；以往表格嵌套的制作方法，會使得頁面與頁面，或者區(qū)域與區(qū)域之間的顯示效果會有偏差I(lǐng)D嵌套樣式問題。而使用DIV+CSS的制作方法，將所有頁面，或所有區(qū)域統(tǒng)一用CSS文件控制，就避免了不同區(qū)域或不同頁面體現(xiàn)出的效果偏差。

　　五、更好地被搜索引擎收錄

　　由于將大部分的HTML代碼和內(nèi)容樣式寫入了CSS文件中，這就使得網(wǎng)頁中正文部分更為突出明顯，便于被搜索引擎采集收錄ID嵌套樣式問題。

　　六、對瀏覽者和瀏覽器更具親和力

　　我們都知道網(wǎng)站做出來是給瀏覽者使用的，對瀏覽者和瀏覽器更具親和力，DIV+CSS在這方面更具優(yōu)勢ID嵌套樣式問題。由于CSS富含豐富的樣式，使頁面更加靈活性，它可以根據(jù)不同的瀏覽器，而達(dá)到顯示效果的統(tǒng)一和不變形。

　　六、DIV CSS存在問題

　　盡管DIV+CSS具有一定的優(yōu)勢ID嵌套樣式問題，不過現(xiàn)階段CSS+DIV網(wǎng)站建設(shè)存在的問題也比較明顯，主要表現(xiàn)在：

　　第一，對于CSS的高度依賴使得網(wǎng)頁設(shè)計變得比較復(fù)雜ID嵌套樣式問題。相對于HTML4.0中的表格布局（table），CSS+DIV盡管不是高不可及，但至少要比表格定位復(fù)雜的多，即使對于網(wǎng)站設(shè)計高手也很容易出現(xiàn)問題，更不要說初學(xué)者了，這在一定程度上影響了XHTML網(wǎng)站設(shè)計語言的普及應(yīng)用。

　　第二，CSS文件異常將影響整個網(wǎng)站的正常瀏覽ID嵌套樣式問題。CSS網(wǎng)站制作的設(shè)計元素通常放在幾個l外部文件中，這一個或幾個文件有可能相當(dāng)復(fù)雜，甚至比較龐大，?cè)绻鸆SS文件調(diào)用出現(xiàn)異常，那么整個網(wǎng)站將變得慘不忍睹。

　　第三，對于CSS網(wǎng)站設(shè)計的瀏覽器兼容性問題比較突出ID嵌套樣式問題。基于HTML4.0的網(wǎng)頁設(shè)計在IE4.0之后的版本中幾乎不存在瀏覽器兼容性問題，但CSS+DIV設(shè)計的網(wǎng)站在IE瀏覽器里面正常顯示的頁面，到火狐瀏覽器（FireFox ）中卻可能面目全非（這也是為什么建議網(wǎng)絡(luò)營銷人員使用火狐瀏覽器的原因所在 ）。CSS+DIV還有待于各個瀏覽器廠商的進(jìn)一步支持。

　　第四，CSS+DIV對搜索引擎優(yōu)化與否取決于網(wǎng)頁設(shè)計的專業(yè)水平而不是CSS+DIV本身ID嵌套樣式問題。CSS+DIV網(wǎng)頁設(shè)計并不能保證網(wǎng)頁對搜索引擎的優(yōu)化，甚至不能保證一定比HTML網(wǎng)站有更簡潔的代碼設(shè)計，何況搜索引擎對于網(wǎng)頁的收錄和排序顯然不是以是否采用表格和CSS定位來衡量，這就是為什么很多傳統(tǒng)表格布局制作的網(wǎng)站在搜索結(jié)果中的排序靠前，而很多使用CSS及web標(biāo)準(zhǔn)制作的網(wǎng)頁排名依然靠后的原因。因?yàn)閷τ谒阉饕娑?，網(wǎng)站結(jié)構(gòu)、內(nèi)容、相關(guān)網(wǎng)站鏈接等因素始終是網(wǎng)站優(yōu)化最重要的指標(biāo)。

　　七、DIV CSS常見錯誤

　　1. 檢查HTML元素是否有拼寫錯誤、是否忘記結(jié)束標(biāo)記

　　即使是老手也經(jīng)常會弄錯div的嵌套關(guān)系ID嵌套樣式問題。可以用dreamweaver的驗(yàn)證功能檢查一下有無錯誤。 　　

　　2. 檢查CSS是否正確

　　檢查一下有無拼寫錯誤、是否忘記結(jié)尾的 } 等ID嵌套樣式問題。可以利用CleanCSS來檢查 CSS的拼寫錯誤。CleanCSS本是為CSS減肥的工具，但也能檢查出拼寫錯誤。 　　

　　3. 確定錯誤發(fā)生的位置

　　如果錯誤影響了整體布局，則可以逐個刪除div塊，直到刪除某個div塊后顯示恢復(fù)正常，即可確定錯誤發(fā)生的位置ID嵌套樣式問題。 　　

　　4. 利用border屬性確定出錯元素的布局特性 　　使用float屬性布局一不小心就會出錯ID嵌套樣式問題。這時為元素添加border屬性確定元素邊界，錯誤原因即水落石出。

　　5. float元素的父元素不能指定clear屬性

　　MacIE下如果對float的元素的父元素使用clear屬性，周圍的float元素布局就會混亂ID嵌套樣式問題。這是MacIE的著名的bug，倘若不知道就會走彎路。

　　6. float元素務(wù)必指定width屬性

　　很多瀏覽器在顯示未指定width的float元素時會有bugID嵌套樣式問題。所以不管float元素的內(nèi)容如何，一定要為其指定width屬性。

　　另外指定元素時盡量使用em而不是px做單位ID嵌套樣式問題。 　　

　　7. float元素不能指定margin和padding等屬性

　　IE在顯示指定了margin和padding的float元素時有bugID嵌套樣式問題。因此不要對float元素指定margin和padding屬性(可以在float元素內(nèi)部嵌套一個div來設(shè)置margin和padding)。也可以使用hack方法為IE指定特別的值。

　　8. float元素的寬度之和要小于100%

　　如果float元素的寬度之和正好是100%，某些古老的瀏覽器將不能正常顯示ID嵌套樣式問題。因此請保證寬度之和小于99%。

　　9. 是否重設(shè)了默認(rèn)的樣式?

　　某些屬性如margin、padding等，不同瀏覽器會有不同的解釋ID嵌套樣式問題。因此最好在開發(fā)前首先將全體的margin、padding設(shè)置為0、列表樣式設(shè)置為none等。

　　10. 是否忘記了寫DTD? 　　如果無論怎樣調(diào)整不同瀏覽器顯示結(jié)果還是不一樣ID嵌套樣式問題，那么可以檢查一下頁面開頭是不是忘了寫下面這行DTD：

　　!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

　　八、DIV CSS常用工具

　　1.Notepad.exe記事本ID嵌套樣式問題，（程序小，隨時手工編輯，垃圾代碼少，不能可視化預(yù)覽）

　　2.Dreamweaver（老牌網(wǎng)頁編輯工具ID嵌套樣式問題，功能全，程序比較大，但對DIV+CSS可視化支持程度不太友好）

　　3..editplus(應(yīng)該是升級版的記事本工具ID嵌套樣式問題，代碼編輯有顏色提示) 　　

　　4.Ultraedit

　　5.Golive（將來替代Dreamweaver的產(chǎn)品）

　　6.Topstyle(功能相當(dāng)多，附有CSS碼檢查功能，減少寫錯的機(jī)會ID嵌套樣式問題。尤其是它的HELP文件中詳細(xì)的CSS指令介紹，很適于用作參考文件與初次接觸CSS的人做為學(xué)習(xí)使用)

　　九、DIV CSS兼容辦法

　　區(qū)別IE6與FF： background:orange;*background:blue; 　　

　　區(qū)別IE6與IE7： background:green !important;background:blue; 　　

　　區(qū)別IE7與FF： background:orange; *background:green; 　　

　　區(qū)別FFID嵌套樣式問題，IE7，IE6： background:orange;*background:green !important;*background:blue; 　　

　　IE7,IE8兼容: meta " / 　　

　　HEAD 　　

　　1. CSS中幾種瀏覽器對不同關(guān)鍵字的支持ID嵌套樣式問題，可進(jìn)行瀏覽器兼容性重復(fù)定義 !important 可被FireFox和IE7識別 * 可被IE6、IE7識別 _ 可被IE6識別 *+ 可被IE7識別 　　

　　2. IE專用的條件注釋 !--其他瀏覽器 -- link rel="stylesheet" type="text/css" href="css.css" / !--[if IE 7] !-- 適合于IE7 -- link rel="stylesheet" type="text/css" href="ie7.css" / ![endif]-- !--[if lte IE 6] !-- 適合于IE6及一下 -- link rel="stylesheet" type="text/css" href="ie.css" / ![endif]--

　　3. 幾個瀏覽器對實(shí)際像素的解釋 IE/Opera：對象的實(shí)際寬度 = (margin-left) + width + (margin-right) Firefox/Mozilla：對象的實(shí)際寬度= (margin-left) + (border-left-width) + (padding- left) + width + (padding-right) + (border-right-width) + (margin-right) 　　

　　4. 鼠標(biāo)手勢問題：FireFox的cursor屬性不支持handID嵌套樣式問題，但是支持pointer，IE兩個都支持；所以為了兼容都用pointer 　　

　　5. FireFox中設(shè)置HTML標(biāo)簽的Style屬性時，所有位置、寬高和尺寸值必須后跟px，IE也支持此寫法，因此統(tǒng)一加px單位ID嵌套樣式問題。如 Obj.Style.Height = imgObj.Style.Height + 'px'; 　　

　　6. FireFox無法解析簡寫的padding屬性設(shè)置ID嵌套樣式問題，?cè)鏿adding 5px 4px 3px 1px；必須改為 padding-top:5px; padding-right:4px; padding-bottom:3px; padding-left:1px0； 　　

　　7. 消除ul、ol等列表的縮進(jìn)時ID嵌套樣式問題，樣式應(yīng)寫成:list-style:none;margin:0px;padding:0px;其中margin屬性對IE有效，padding屬性對FireFox有效

　　8. CSS控制透明：IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60); FireFox：opacity:0.6; 　　

　　9. CSS控制圓角：IE：不支持圓角； FireFox: -moz-border-radius:4px;或 -moz-border-radius-topleft:4px; -moz-border-radius-topright:4px; -moz-border-radius-bottomleft:4px; -moz-border-radius- bottomright:4px; 　　

　　10. CSS雙線凹凸邊框：IE：border:2px outset; FireFox： -moz-border-top-colors: #d4d0c8 white; -moz-border-left-colors: #d4d0c8 white; -moz-border-right-colors:#404040 #808080; -moz-border-bottom-colors:#404040 #808080;

021yin.com /