【正文】 　h1 {font: 15pt/17pt Arial。示例如下：view plaincopy to clipboardprint?head title文檔標(biāo)題/title link rel=stylesheet href= type=text/css /head headtitle文檔標(biāo)題/titlelink 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ì)象。而最接近目標(biāo)的樣式定義優(yōu)先權(quán)越高。 提高頁(yè)面瀏覽速度 對(duì)于同一個(gè)頁(yè)面視覺(jué)效果，采用CSS+DIV重構(gòu)的頁(yè)面容量要比TABLE編碼的頁(yè)面文件容量小得多，前者一般只有后者的1/2大小。這個(gè)工作組開(kāi)始討論第一版中沒(méi)有涉及到的問(wèn)題，其結(jié)果是1998年5月出版的第二版要求。1996年底，CSS已經(jīng)完成。哈坤于1994年在芝加哥的一次會(huì)議上第一次展示了CSS的建議，1995年他與波斯一起再次展示這個(gè)建議。波斯（Bert Bos）當(dāng)時(shí)正在設(shè)計(jì)一個(gè)叫做Argo的瀏覽器，他們決定一起合作設(shè)計(jì)CSS。隨著這些功能的增加外來(lái)定義樣式的語(yǔ)言越來(lái)越?jīng)]有意義了。這個(gè)工作組開(kāi)始討論第一版中沒(méi)有涉及到的問(wèn)題，其結(jié)果是1998年5月出版的第二版要求。1996年底，CSS已經(jīng)完成。哈坤于1994年在芝加哥的一次會(huì)議上第一次展示了CSS的建議，1995年他與波斯一起再次展示這個(gè)建議。波斯（Bert Bos）當(dāng)時(shí)正在設(shè)計(jì)一個(gè)叫做Argo的瀏覽器，他們決定一起合作設(shè)計(jì)CSS。隨著這些功能的增加外來(lái)定義樣式的語(yǔ)言越來(lái)越?jīng)]有意義了。 畢業(yè)論文（設(shè)計(jì)）　　　　　　　　　　　　　　重慶信息技術(shù)職業(yè)學(xué)院校園網(wǎng)絡(luò)規(guī)劃設(shè)計(jì)摘要從1990年代初HTML被發(fā)明開(kāi)始樣式表就以各種形式出現(xiàn)了，不同的瀏覽器結(jié)合了它們各自的樣式語(yǔ)言，讀者可以使用這些樣式語(yǔ)言來(lái)調(diào)節(jié)網(wǎng)頁(yè)的顯示方式。1994年哈坤當(dāng)時(shí)已經(jīng)有過(guò)一些樣式表語(yǔ)言的建議了，但CSS是第一個(gè)含有“層疊”的主意的。當(dāng)時(shí)W3C剛剛建立，W3C對(duì)CSS的發(fā)展很感興趣，它為此組織了一次討論會(huì)。1996年12月CSS要求的第一版本被出版。到2007年為止，第三版還未完備關(guān)鍵詞 css，div，css+div，發(fā)展，應(yīng)用，css+div發(fā)展 目錄第一章 概述 CSS+DIV 1第一節(jié) DSS發(fā)展歷史 1第二節(jié) DIV+CSS布局的優(yōu)缺點(diǎn) 2第三節(jié) DIV+CSS與瀏覽器的兼容 2第四節(jié) 個(gè)人總結(jié)的關(guān)于CSS+DIV的八條學(xué)習(xí)方法 2第二章 詳述CSS+DIV網(wǎng)頁(yè)布局 2第一節(jié) HTML基礎(chǔ)知識(shí) 2第二節(jié) CSS 基礎(chǔ)知識(shí) 2第三章CSS+DIV應(yīng)用（css布局網(wǎng)站） 2第一節(jié) 準(zhǔn)備 2第二節(jié) 操作 2結(jié)束語(yǔ) 3謝辭 4參考文獻(xiàn) 5第一章 概述CSS+DIV第一節(jié) CSS發(fā)展歷史CSS歷史從1990年代初HTML被發(fā)明開(kāi)始樣式表就以各種形式出現(xiàn)了，不同的瀏覽器結(jié)合了它們各自的樣式語(yǔ)言，讀者可以使用這些樣式語(yǔ)言來(lái)調(diào)節(jié)網(wǎng)頁(yè)的顯示方式。1994年哈坤當(dāng)時(shí)已經(jīng)有過(guò)一些樣式表語(yǔ)言的建議了，但CSS是第一個(gè)含有“層疊”的主意的。當(dāng)時(shí)W3C剛剛建立，W3C對(duì)CSS的發(fā)展很感興趣，它為此組織了一次討論會(huì)。1996年12月CSS要求的第一版本被出版。到2007年為止，第三版還未完備。瀏覽器就不用去編譯大量冗長(zhǎng)的標(biāo)簽。高優(yōu)先權(quán)樣式將繼承低優(yōu)先權(quán)樣式的未重疊定義但覆蓋重疊的定義。 定義方式請(qǐng)參閱樣式表語(yǔ)法。 fontweight: bold。 color: black} 　　 　　/style 　　/head 　　body html　　head　　title文檔標(biāo)題/title　　style type=text/css　　!　　body {font: 10pt Arial}　　h1 {font: 15pt/17pt Arial。 color: blue}　　p {font: 10pt/12pt Arial。由于表格元素中可以顯示表格的邊框?yàn)?，即不顯示邊框，因此可以在網(wǎng)頁(yè)中的各個(gè)元素按版式劃分放入表格的各個(gè)單元格中，從而實(shí)現(xiàn)復(fù)雜的排版組合。 　　復(fù)雜的表格設(shè)計(jì)使得設(shè)計(jì)極為不易，修改更為復(fù)雜，最后生成的網(wǎng)頁(yè)代碼除了表格本身的代碼，還有許多沒(méi)有任何意義的圖像占位符及其他元素，文件量龐大，最終導(dǎo)致瀏覽器下載及解析速度變慢。DIV是一種比表格簡(jiǎn)單的元素，從語(yǔ)法上只有 這樣簡(jiǎn)單的定義。 　　三、CSS入門的幾個(gè)誤區(qū) 　　（一）不要用傳統(tǒng)的表格思維來(lái)嵌套DIV。使用CSS布局，內(nèi)容僅僅是一次羅列下來(lái)，只有結(jié)構(gòu)，沒(méi)有任何的樣式。 　?。ǘ┎槐貫槊繅K內(nèi)容都建立ID。一列布局是所有布局的基礎(chǔ)，也是最簡(jiǎn)單的布局形式，即一種固定寬度的布局樣式。自適應(yīng)的布局能夠根據(jù)瀏覽器窗口的大小，自動(dòng)改變其寬度或高度值，是一種非常靈活的布局形式。 　　CSS的大部分?jǐn)?shù)值作為參數(shù)的樣式屬性都提供百分比值。頁(yè)面整體居中是網(wǎng)頁(yè)設(shè)計(jì)中常見(jiàn)的形式，在傳統(tǒng)表格布局中，我們可以使用表格的 align屬性來(lái)實(shí)現(xiàn)。 　　4．兩列固定寬度。 　　Float是CSS布局非常強(qiáng)大的布局功能。 　　Float屬性有三個(gè)值，none表示對(duì)象不浮動(dòng)。這樣右欄的內(nèi)容將流入到左欄的右邊，并根據(jù)左欄的寬度，自動(dòng)流入并貼至左欄，而貼近的程度則由左欄的右邊距和右欄的左邊距來(lái)控制，不需要一欄對(duì)象本身的寬度值。需要實(shí)現(xiàn)這樣的布局，就需要使用position屬性來(lái)定位。第三節(jié)CSS+DIV與瀏覽器的兼容IEIEFF 與兼容性有關(guān)的特性CSS HACK代碼:所有瀏覽器 通用height: 100px。IEFF 共用height: 100px !important（優(yōu)先級(jí)）。 } /* FireFox */*html wrapper { width: 80px。height:0。}/* Hide from IE Mac \*/.clearfix {display:block。/* FF */.submitbutton {float:left。marginright: 12px。而HACK就是一種辦法，能讓你在一個(gè)CSS里面獨(dú)立的寫(xiě)支持不同瀏覽器的樣式。除了前面那片文章，《針對(duì)firefox ie6 ie7的css樣式》中的hack方式也是很好用的。第三個(gè)HACK IE6 IE7公用*height:100px。下面我簡(jiǎn)單解釋一下各瀏覽器怎樣理解這三個(gè)屬性：在FF下，第3個(gè)屬性FF不認(rèn)識(shí)，所以它讀的是 height:100px。 } /* Moz */* html 1 { color: 666。}center { MARGINRIGHT: auto。但在mozilla中不能居中。MARGINLEFT: auto。//for ff+}box{width:600px!important//for ffwidth:600px。 margin:0 0 0 100px。box{ display:block。這樣問(wèn)題就大了，如果只用寬度和高度，正常的瀏覽器里這兩個(gè)值就不會(huì)變，如果只用minwidth和minheight的話，IE下面根本等于沒(méi)有設(shè)置寬度和高度。}htmlbody box{ width: auto。}6 頁(yè)面的最小寬度minwidth是個(gè)非常方便的CSS命令，它可以指定元素最小也不能小于某個(gè)寬度，這樣就能保證排版一直正確。}第一個(gè)minwidth是正常的；但第2行的width使用了Javascript，這只有IE才認(rèn)得，這也會(huì)讓你的HTML文檔不太正規(guī)。}或者加入:after（偽對(duì)象）,設(shè)置在對(duì)象后發(fā)生的內(nèi)容，通常和content配合使用，IE不支持此偽對(duì)象，非Ie 瀏覽器支持，所以并不影響到IE/WIN瀏覽器。clear: both。}left{float:left。//這句是關(guān)鍵}HTML代碼DIV id=boxDIV id=left/DIVDIV id=right/DIV/DIV9 屬性選擇器(這個(gè)不能算是兼容,是隱藏css的一個(gè)bug)p[id]{}div[id]{}p[id]{}div[id]{},FF和OPera作用屬性選擇器和子選擇器還是有區(qū)別的,子選擇器的范圍從形式來(lái)說(shuō)縮小了,屬性選擇器的范圍比較大,如p[id]中,所有p標(biāo)簽中有id的都是同樣式的.10 IE捉迷藏的問(wèn)題當(dāng)div應(yīng)用復(fù)雜的時(shí)候每個(gè)欄中又有一些鏈接，DIV等這個(gè)時(shí)候容易發(fā)生捉迷藏的問(wèn)題。11 高度不適應(yīng)高度不適應(yīng)是當(dāng)內(nèi)層對(duì)象的高度發(fā)生變化時(shí)外層高度不能自動(dòng)進(jìn)行調(diào)節(jié)，特別是當(dāng)內(nèi)層對(duì)象使用margin 或paddign 時(shí)。 textalign:center。屏蔽IE瀏覽器（也就是IE下不顯示）*:lang(zh) select {font:12px !important。僅IE7識(shí)別*+html {…}當(dāng)面臨需要只針對(duì)IE7做樣式的時(shí)候就可以采用這個(gè)HACK。僅IE6不識(shí)別select { display /*IE6不識(shí)別*/:none。僅IE5不識(shí)別select/*IE5不識(shí)別*/ { display:none。 voicefamily:inherit。清除浮動(dòng)select:after {content:.。 visibility:hidden。 whitespace:nowrap。只有Opera識(shí)別media all and (minwidth: 0px){ select {……} }針對(duì)Opera瀏覽器做單獨(dú)的設(shè)定。/* */}} import 39。/**/下面是IE的條件注釋，個(gè)人覺(jué)得用條件注釋調(diào)用相應(yīng) Hack是比較完美的多瀏覽器兼容的解決辦法。div ul li 的嵌套順序今天只講一個(gè)規(guī)則。但很多情況你來(lái)到下一行，間隙就沒(méi)了，但是前面的內(nèi)容又空了很大一塊，出現(xiàn)這種情況雖然你可以改變IE的Margin，然后調(diào)整Firefox下面的Padding，以便使得兩者顯示起來(lái)得效果很相似，但是你得CSS將變得臭長(zhǎng)無(wú)比，你不得不多考慮更多可能出現(xiàn)這種問(wèn)題補(bǔ)救措施，雖然你知道千篇一律來(lái)Hack它們，但是你會(huì)煩得要命。}，其中l(wèi)iststyle:none是不讓li標(biāo)記的最前方顯示圓點(diǎn)或者數(shù)字等目錄類型的標(biāo)記，因?yàn)镮E和Firefox顯示出來(lái)默認(rèn)效果有些不一樣。說(shuō)它容易，往往有很多問(wèn)題困擾著新手，介紹了非常多的技巧，這些小技巧與知識(shí)能事半功倍的給大家以幫助。W3C對(duì)于XHTML與CSS 都有檢測(cè)工具可用，請(qǐng)見(jiàn) ?！　∪?、邊界重合時(shí)利用padding或border來(lái)避免　　您可能會(huì)為了一點(diǎn)不應(yīng)該出現(xiàn)的空間而焦頭爛額，或者您需要一點(diǎn)點(diǎn)空間時(shí)，怎樣都擠不出來(lái)?！　∥?、不要依賴minwidth/minheight　　Windows版IE并不支援兩種語(yǔ)法?！　∑?、記住“TRBL”寫(xiě)法　　border，margin與padding的簡(jiǎn)寫(xiě)語(yǔ)法有特定順序，從上方開(kāi)始順時(shí)針?lè)较蜣D(zhuǎn)動(dòng)：top,right,bottom,left. 所以margin:0 1px 3px 5px。許多朋友在制作頁(yè)面時(shí)，往往喜歡把這句刪除掉，在這里建議大家一