首頁 > web前端 > css教學 > 淺談DIV+CSS的優缺點

淺談DIV+CSS的優缺點

零到壹度
發布: 2018-03-19 11:18:19
原創
2603 人瀏覽過

本文主要和大家淺談DIV+CSS的優缺點,具有很好的參考價值,希望對大家有幫助。一起跟著小編過來看看吧,希望能幫助大家。

DIV本身就是容器性質的,你不但可以內嵌table還可以內嵌文本和其它的HTML代碼;CSS是CascADIng style Sheets的簡稱,中文譯作“層疊樣式表單”,在主頁製作時採用CSS技術,可以有效地對頁面的佈局、字體、顏色、背景和其它效果實現更精確的控制。只要對對應的程式碼做一些簡單的修改,就可以改變同一頁的不同部分,或是所有頁數的網頁的外觀和格式。

DIV+CSS標準有以下優點:

#1、因為採用CSS佈局,不像表格佈局充滿各種各樣的屬性和數字,而且很多css檔案通常是共用的,從而大大縮減頁面程式碼,提高頁面瀏覽速度。

2、結構清晰,對搜尋引擎更加友善。更容易被搜尋引擎收錄,具備搜尋引擎SEO的先天條件,配合優秀的內容和一些SEO處理,可以獲得更好的網站排名。

3、相容性更好,符合web標準規範的發展趨勢,可以在幾乎所有的瀏覽器上都可以使用,不會出現在不同的瀏覽器中效果差距很大的情況。

4、縮短改版時間,因為網站的佈局都是透過外部的css檔案來控制,只要簡單的修改幾個CSS檔案就可以將許多網頁的風格格式同時更新,不用再一頁一頁地更新了。你可以將網站上所有的網頁風格都使用一個CSS檔案來控制,只要修改這個CSS檔案中對應的行,那麼整個網站的所有頁面都會隨之改變。

5、強大的字體控制和排版能力,CSS控製字體的能力比糟糕的FONT標籤好多了,CSS不再需要用FONT標籤或透明的1px圖片來控制標題、改變字體顏色、字體樣式等等。

6、提高易用性,使用CSS可以結構化HTML,例如:P標籤只用來控制段落,h1-h6標籤只用來控制標題,table標籤只用來表現格式化的數據等等。你可以增加更多的使用者而不需要建立獨立的版本。

7、更好的擴充性。你的設計不只用於web瀏覽器,也可以發佈在其他裝置上,例如PowerPoint等。

8、更靈活控制頁面佈局,通常頁面的下載是按照程式碼的排列順序,而表格佈局程式碼的排列代表從上向下,從左到右,無法改變。而透過CSS控制,您可以任意改變程式碼的排列順序,例如將重要的右邊內容先載入出來。

9、表現和內容相分離,乾淨利落,將設計部分剝離出來放在一個獨立樣式文件中,而網頁主要來放置您的內容,你可以減少未來網頁無效的可能。

10、更方便搜尋引擎收錄,並獲得更高的評價。用只包含結構化內容的HTML取代嵌套的標籤,主次分明,搜尋引擎將更有效地搜尋到你的內容,並可能給你一個較高的評價(ranking)。

11、Table表格佈局彈性不大,你只能遵循 table tr td 的格式。而p你可以p ul li 也可以ol li 還可以ul li......

12、Table表格佈局中,垃圾程式碼會很多,一些修飾的樣式及佈局的程式碼混合一起,很不利於直觀。而DIV 更能體現樣式和結構相分離,結構的重構性強。

13.以前一些必須透過圖片轉換實現的功能,現在只要用CSS就可以輕鬆實現,從而更快地下載頁面。


DIV+CSS有這麼多的優點,但它還有一些不好的地方:


#1、CSS網站製作的設計元素通常放在1個外部文件中,或幾個文件,有可能相當複雜,甚至比較龐大,如果CSS文件調用出現異常,那麼整個網站將變得慘不忍睹。

2、DIV+CSS儘管不是高不可及,但至少要比表格定位複雜的多,即使對於網站設計高手也很容易出現問題,更不要說初學者了。

3、雖然說DIV+CSS解決了大部分瀏覽器相容問題,但是也有在部分瀏覽器中使用出現異常,例如火狐瀏覽器,在IE中顯示正常的頁面,到了火狐瀏覽器中可能會面目全非。當然這應該是瀏覽器的問題,但可以說在目前來看,DIV+CSS還沒有實現所有瀏覽器的統一相容。

4、DIV+CSS對搜尋引擎最佳化與否,取決於網頁設計的專業程度,而不是DIV+CSS本身。 DIV+CSS網頁設計並不能保證網頁對搜尋引擎的優化,甚至不能保證一定比HTML網站有更簡潔的程式碼設計,何況搜尋引擎對於網頁的收錄和排序顯然不是以是否採用表格和CSS定位來衡量,這就是為什麼許多傳統表格佈局製作的網站在搜尋結果中的排序靠前,而許多使用CSS及web標準製作的網頁排名依然靠後的原因。因為對於搜尋引擎而言,網站架構、內容、相關網站連結等因素始終是網站優化最重要的指標。

以上是淺談DIV+CSS的優缺點的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板