【正文】 /style /head body 2 第二節(jié) CSS+DIV 布局的優(yōu)缺點(diǎn) 基于 WEB 標(biāo)準(zhǔn)的網(wǎng)站設(shè)計(jì)的核心在于如何使用眾多 WEB 便準(zhǔn)中的各項(xiàng)技術(shù)來達(dá)到表現(xiàn)與內(nèi)容的分離，即網(wǎng)站的結(jié)構(gòu)、表現(xiàn)和行為三者的分離。 fontweight: bold。 fontweight: bold。 color: blue} p {font: 10pt/12pt Arial。 color: maroon} h2 {font: 13pt/15pt Arial。示例如下： view plaincopy to clipboardprint? html head title文檔標(biāo)題 /title style type=text/css ! body {font: 10pt Arial} h1 {font: 15pt/17pt Arial。示例如下：定義內(nèi)部樣式塊對(duì)象 (Embedding a Style Block) 你 可 以 在 你 的 HTML 文檔的 HTML 和 BODY 標(biāo)記之間插入一個(gè)STYLE.../STYLE塊對(duì)象。示例如下： view plaincopy to clipboardprint? head title文檔標(biāo)題 /title link rel=stylesheet href= type=text/css /head head title文檔標(biāo)題 /title link rel=stylesheet href= type=text/css /head 而在 XML 中，你應(yīng)該如下例所示在聲明區(qū)中加入： ? xmlstylesheet type=text/css href= ? 定義內(nèi)部樣式塊對(duì)象 (Embedding a Style Block) 你可以在你的 HTML 文檔的 HTML和 BODY標(biāo)記之間插入一個(gè) STYLE.../STYLE塊對(duì)象。例外請(qǐng)參閱 !important 聲明。而最接近目標(biāo)的樣式定義優(yōu)先權(quán)越高。 易于維護(hù)和改版 你只要簡單的修改幾個(gè) CSS 文件就可以重新設(shè)計(jì)整個(gè)網(wǎng)站的頁面。 提高頁面瀏覽速度 對(duì)于同一個(gè)頁面視覺效果，采用 CSS+DIV 重構(gòu)的頁面容量要比 TABLE編碼的頁面 文件容量小得多，前者一般只有后者的 1/2 大小。 使用 CSS+DIV 的優(yōu)點(diǎn) 采用 CSS+DIV進(jìn)行網(wǎng)頁重構(gòu)相對(duì)與傳統(tǒng)的 TABLE網(wǎng)頁布局而具有以下 3個(gè)顯著優(yōu)勢： 表現(xiàn)和內(nèi)容相分離 將設(shè)計(jì)部分剝離出來放在一個(gè)獨(dú)立樣式文件中， HTML 文件中只存放文本信息。這個(gè)工作組開始討論第一版中沒有涉及到的問題，其結(jié)果是 1998 年 5 月出版的第二版要求。 1997 年初， W3C 內(nèi) 組織了專門管 CSS 的工作組，其負(fù)責(zé)人是克里斯 1996 年底， CSS 已經(jīng)完成。哈坤、波斯和其他一些人（比如微軟的托馬斯 哈坤于 1994 年在芝加哥的一次會(huì)議上第一次展示了 CSS 的建議， 1995 年他與波斯一起再次展示這個(gè)建議。在CSS 中，一個(gè)文件的樣式可以從其他的樣式表中繼承下來。波斯（ Bert Bos）當(dāng)時(shí)正在設(shè)計(jì)一個(gè)叫做 Argo 的瀏覽器，他們決定一起合作設(shè)計(jì) CSS。利提出了 CSS 的最初建議。隨著這些功能的增加外來定義樣式的語言越來越?jīng)]有意義了。一開始樣式表是給讀者用的，最初的 HTML 版本只含有很少的顯示屬性，讀者來決定網(wǎng)頁應(yīng)該怎樣被顯示。到 2020年為止，第三版還未完備 關(guān)鍵詞 css， div， css+div，發(fā)展，應(yīng)用， css+div 發(fā)展 Abstract This paper expatiate on ?? KEY WORD one two 目錄 第一章 概述 CSS+DIV ............................................. 1 第一節(jié) DSS 發(fā)展歷史 .......................................... 1 第二節(jié) DIV+CSS 布局的 優(yōu)缺點(diǎn) .................................. 2 第三節(jié) DIV+CSS 與瀏覽器的兼容 ................................ 3 第四節(jié) 個(gè)人總結(jié)的關(guān)于 CSS+DIV 的八條學(xué)習(xí)方法 ................. 14 第二章 詳述 CSS+DIV 網(wǎng)頁布局 .................................... 15 第一節(jié) HTML 基礎(chǔ)知識(shí) ........................................ 15 第二節(jié) CSS 基礎(chǔ)知識(shí) ......................................... 15 第 三 章 CSS+DIV 應(yīng)用（ css 布局網(wǎng)站 ） .............................. 18 第一節(jié) 準(zhǔn)備 ................................................. 18 第二節(jié) 操作 ................................................. 18 結(jié)束語 ......................................................... 26 謝辭 ........................................... 錯(cuò)誤 !未定義書簽。里雷。 1996 年 12 月 CSS 要求的第一版本被出版。雷爾登）是這個(gè)項(xiàng)目的主要技術(shù)負(fù)責(zé)人。當(dāng)時(shí) W3C 剛剛建立， W3C 對(duì) CSS 的發(fā)展很感興趣，它為此組織了一次討論會(huì)。讀者在有些地方可以使用他自己更喜歡的樣式，在其他地方則繼承，或“層疊”作者的樣式 , 這種層疊的方式使作者和讀者都可以靈活地加入自己的設(shè)計(jì)，混合各人的愛好。 當(dāng)時(shí)已經(jīng)有過一些樣式表語言的建議了，但 CSS 是第一個(gè)含有“層疊”的主意的。伯特 1994 年哈坤 但隨著 HTML 的成長，為了滿足設(shè)計(jì)師的要求， HTML 獲得了很多顯示功能。摘要 從 1990 年代初 HTML 被發(fā)明開始樣式表就以各種形式出現(xiàn)了，不同的瀏覽器結(jié)合了它們各自的樣式語言，讀者可以使用這些樣式語言來調(diào)節(jié)網(wǎng)頁的顯示方式。一開始樣式表是給讀者用的，最初的 HTML 版本只含有很少的顯示屬性，讀者來決定網(wǎng)頁應(yīng)該怎樣被顯示。隨著這些功能的增加外來定義樣式的語言越來越?jīng)]有意義了。利提出了 CSS 的最初建議。波斯（ Bert Bos）當(dāng)時(shí)正在設(shè)計(jì)一個(gè)叫做 Argo 的瀏覽器，他們決定一起合作設(shè)計(jì) CSS。在CSS 中，一個(gè)文件的樣式可以從其他的樣式表中繼承下來。 哈坤于 1994 年在芝加哥的一次會(huì)議上第一次展示了 CSS 的建議， 1995 年他與波斯一起再次展示這個(gè)建議。哈坤、波斯和其他一些人（比如微軟的托 馬斯 1996 年底， CSS 已經(jīng)完成。 1997 年初， W3C 內(nèi)組織了專門管 CSS 的工作組，其負(fù)責(zé)人是克里斯這個(gè)工作組開始討論第一版中沒有涉及到的問題，其結(jié)果是 1998 年 5 月出版的第二版要求。 參考文獻(xiàn) ....................................................... 27 1 第一章 概述 CSS+DIV 第一節(jié) CSS 發(fā)展歷史 CSS 歷史 從 1990 年代初 HTML 被發(fā)明開始樣式表就以各種形式出現(xiàn)了，不同的瀏覽器結(jié)合了它們各自的樣式語言，讀者可以使用這些樣式語言來調(diào)節(jié)網(wǎng)頁的 顯示方式。 但隨著 HTML 的成長，為了滿足設(shè)計(jì)師的要求， HTML 獲得了很多顯示功能。 1994 年哈坤伯特 當(dāng)時(shí)已經(jīng)有過一些樣式表語言的建議了，但 CSS 是第一個(gè)含有“層疊”的主意的。 讀者在有些地方可以使用他自己更喜歡的樣式，在其他地方則繼承，或“層疊”作者的樣式 , 這種層疊的方式使作者和讀者都可以靈活地加入自己的設(shè)計(jì)，混合各人的愛好。當(dāng)時(shí) W3C 剛剛建立， W3C 對(duì) CSS 的發(fā)展很感興趣，它為此組織了一次討論會(huì)。雷爾登）是這個(gè)項(xiàng)目的主要技術(shù)負(fù)責(zé)人。 1996 年 12 月 CSS 要求的第一版本被出版。里雷。到 2020年為止，第三版還未完備。這樣的頁面對(duì)搜索引擎更加友好。瀏覽器就不用去編譯大量冗長的標(biāo)簽。 感性體驗(yàn) CSS 什么是 Cascading Style Sheets（層疊樣式表） * CSS 是 Cascading Style Sheets(層疊樣式表 )的簡稱 . * CSS 語言是一種標(biāo)記語言 ,它不需要編譯 ,可以直接由瀏覽器解釋執(zhí)行 (屬于瀏覽器解釋型語言 ). * 在標(biāo)準(zhǔn)網(wǎng)頁設(shè)計(jì)中 CSS 負(fù)責(zé)網(wǎng)頁內(nèi)容 (XHTML)的表現(xiàn) . * CSS 文件也可以說是一個(gè) 文本文件 ,它包含了一些 CSS 標(biāo)記 ,CSS文件必須使用 css為文件名后綴 . * 可以通 2 過簡單的更改 CSS 文件 ,改變網(wǎng)頁的整體表現(xiàn)形式 ,可以減少我們的工作量 ,所以她是每一個(gè)網(wǎng)頁設(shè)計(jì)人員的必修課 . * CSS 是由 W3C 的 CSS 工作組產(chǎn)生和維護(hù)的 . 如何將樣式表加入到網(wǎng)頁 可以用以下三種方式將樣式表加入您的網(wǎng)頁。高優(yōu)先權(quán)樣式將繼承低優(yōu)先權(quán)樣式的未重疊定義但覆蓋重疊的定義。 鏈入外部樣式表文件 (Linking to a Style Sheet) 你可以先建立外部樣式表文件（ .css），然后使用 HTML 的 link 對(duì)象。 定義方式請(qǐng)參閱樣式表語法。 定義方式請(qǐng)參閱樣式表語法。 fontweight: bold。 fontweight: bold。 color: black} /style /head body html head title文檔標(biāo)題 /title style type=text/css ! 3 body {font: 10pt Arial} h1 {font: 15pt/17pt Arial。 color: maroon} h2 {font: 13pt/15pt Arial。 color: blue} p {font: 10pt/12pt Arial。只有真正實(shí)現(xiàn)了結(jié)構(gòu)分離的網(wǎng)頁設(shè)計(jì)，才能真正意義上的符合 WEB 標(biāo)準(zhǔn)的網(wǎng)頁設(shè)計(jì)。由于表格元素中可以顯示表格的邊框?yàn)?0，即不顯示邊框，因此可以在網(wǎng)頁中的各個(gè) 元素按版式劃分放入表格的各個(gè)單元格中，從而實(shí)現(xiàn)復(fù)雜的排版組合。大量的樣式設(shè)計(jì)代碼混雜在表格和單元格中，使得可讀性大大降低，維護(hù)成本也相對(duì)提高。 復(fù)雜的表格設(shè)計(jì)使得設(shè)計(jì)極為不易，修改更為復(fù)雜，最后生成的網(wǎng)頁代碼除了表格本身的代碼，還有許多沒有任何意義的圖像占位符及其他元素，文件量龐 大，最終導(dǎo)致瀏覽器下載及解析速度變慢。 CSS 布局的重點(diǎn)不在表格元素的設(shè)計(jì)上，而是采用另外一元素 DIV。 DIV 是一種比表格簡單的元素，從語法上只有 這樣簡單的定義。通過使用DIV，可以將網(wǎng)頁中的各個(gè)元素劃分到各個(gè) DIV 中，成為網(wǎng)頁中的結(jié)構(gòu)主體，而樣式表現(xiàn)由CSS 完成。 三、 CSS 入門的幾個(gè)誤區(qū) （一）不要用傳統(tǒng)的表格思維來嵌套 DIV。這種觀點(diǎn)是錯(cuò)誤的。使用 CSS 布局，內(nèi)容僅僅是一次羅列下來，只有結(jié)構(gòu)，沒有任何的樣式。這樣制作的頁面才是內(nèi)容和表現(xiàn)分離，也就是說，當(dāng)去掉 CSS 文件后，剩下的就只有內(nèi)容。 （二）不必為每塊內(nèi)容都建立 ID。對(duì)于多次引用的樣式可以用 Class 來定義而不需要每個(gè)都用 ID；另外也不是說一定要用 ，也可以使用 來代替，同樣是塊級(jí)元素，一樣具有盒模型的 7 個(gè)參數(shù)， 僅僅方便浮動(dòng)。一列布局是所有布局的基礎(chǔ)，也是最簡單的布局形式，即一種固定寬度的布局樣式。 2．一列自適應(yīng)。自適應(yīng)的布局能夠根據(jù)瀏覽器窗口的大小，自動(dòng)改變其寬度或高度值，是一種非常靈活的布局形式。實(shí)際上 DIV 在默認(rèn)狀態(tài)下展區(qū)整行的空間，便是寬度 100%的自適應(yīng)布局的表現(xiàn)形式。 CSS 的大部分?jǐn)?shù)值作為參數(shù)的樣式屬性都提供百分比值。如將寬度設(shè)置為 80%，則 DIV 的寬度就變?yōu)闉g覽器寬度的 80%，當(dāng)瀏覽器窗口的大小調(diào)整時(shí)，其寬度還將維持在瀏覽器當(dāng)前寬度比例的 80%。頁面整體居中是網(wǎng)頁設(shè)計(jì)中常見的形式，在傳統(tǒng)表格布局中，我們可以使用表格的 align 屬性來實(shí)現(xiàn)。 Margin 屬性中可以直接使用數(shù)據(jù)，也支持“ auto”，即自動(dòng)判