標(biāo)簽，他們得到樣式是占用了一排空間（相當(dāng)于換行一樣）；而“我是內(nèi)容三；用的span”和“我是內(nèi)容四；用的span”則，文字內(nèi)容有多寬，就占用多寬距離，使用標(biāo)簽和不使用一樣效果。

　　在網(wǎng)頁開發(fā)的時(shí)候使用DIV和span都可以，通常可以理解為沒有什么區(qū)別。但注意的是DIV占用一行，span不會(huì)占用一行，內(nèi)容占多大寬度，span就有多寬。

　　DIV內(nèi)的span無需命名CSS選擇器偽類，例子如下

　　如果DIV的class為yangshi，則對(duì)內(nèi)的span設(shè)置CSS屬性則，代碼如下

　　.yanshispan{屬性及屬性值}

　　可以得出span無需再命名偽類名，直接使用CSS繼承屬性來對(duì)span設(shè)置CSS樣式。這里本來DIV內(nèi)的樣式為對(duì)文字設(shè)置藍(lán)色字，但是又通過繼承方式設(shè)置了span的樣式為文字為紅色。

　　兩者最明顯的區(qū)別在于DIV是塊元素，而SPAN是行內(nèi)元素(也譯作內(nèi)嵌元素)。

　　詳解：1.所謂塊元素，是以另起一行開始渲染的元素，行內(nèi)元素則不需另起一行，測(cè)試一下下面的代碼你會(huì)有更形象的理解：

　　測(cè)試緊跟前面的"測(cè)試"顯示

這里會(huì)另起一行顯示

　　2.塊元素和行內(nèi)元素也不是一成不變的，通過定義CSS的display屬性值可以互相轉(zhuǎn)化，如：

　　測(cè)試緊跟前面的"測(cè)試"顯示

這里會(huì)另起一行顯示＜span＞SPAN標(biāo)記有一個(gè)重要而實(shí)用的特性，即它什么事也不會(huì)做，它的唯一目的就是圍繞你的HTML代碼中的其它元素，這樣你就可以為它們指定樣式了。在此例中，＜span＞標(biāo)識(shí)符允許你將一個(gè)段落分成不同的部分。

　　還有一個(gè)標(biāo)識(shí)符具有類似的功能，＜p＞DIV也被用來在HTML文件中建立邏輯部分。但與＜p＞SPAN不同，＜p＞工作于文本塊一級(jí)，它在它所包含的HTML元素的前面及后面都引入了行分隔。

　　技巧：有些朋友會(huì)說DIV是層標(biāo)簽，其實(shí)HTML里是沒有層這個(gè)說法的，只不過是為了易于理解，Dreamweaver里才這樣寫的，每個(gè)對(duì)象都可以成為“層”，只需要給對(duì)象定義position屬性(值為absolute或relavite)。例如，要讓圖片成為“層”，可以這樣寫代碼：

　　

　　html4規(guī)范的一大突破就是引入了一大空元素和

。所謂空元素，就是說如果單獨(dú)在頁面上插入這兩個(gè)元素，不會(huì)對(duì)頁面產(chǎn)生影響，但是這兩個(gè)屬性專門為樣式表定義而生，如果對(duì)和

定義樣式表以后，其中內(nèi)容的樣式舊會(huì)隨之變化。

　　和

元素都能處理任意大小的片斷，他們之間的異同可以用一個(gè)例子來說明。

　　示例如下

　　01

　　02

　　03

　　04

　　05

　　06.myspan1{color:#FFFFFF;background-color:#800000;}

　　07.myspan2{color:#000000;background-color:#CCFFCC;}

　　08.myspan3{color:#FFFFFF;background-color:#000080;}

　　09.myspan4{color:#000000;background-color:#FFCCCC;}

　　10.myp1{color:#FFFFFF;background-color:#008000;}

　　11.myp2{color:#000000;background-color:#CCCCFF;}

　　12.myp3{color:#FFFFFF;background-color:#000000;}

　　13.myp4{color:#000000;background-color:#FFFFAA;}

　　14

　　15

　　16

　　17

生命必須元素

　　18水

　　19維生素

　　20蛋白質(zhì)

　　21礦物質(zhì)

　　22

---

　　23水

　　24維生素

　　25蛋白質(zhì)

　　26礦物質(zhì)

　　27

　　28

　　文件說明

　　設(shè)計(jì)者在代碼中輸入了4個(gè)單詞，單詞之間沒有換行，也沒有空格。然后為每一個(gè)單詞嵌套上和

元素，兩種元素產(chǎn)生了不同的顯示效果。

　　元素包含的內(nèi)容，在顯示格式上沒有任何變化，沒有因?yàn)椴迦?span>元素而產(chǎn)生換行或者其他排版效果。這樣的顯示效果稱為“行內(nèi)元素”，設(shè)計(jì)者可以在一段文本中插入任意多對(duì)元素，然后添加字體、顏色、背景、邊框和邊距等各種格式。

　　

元素所包含的內(nèi)容，在格式上有所變化，每一個(gè)

元素所包含的內(nèi)容都另起一行，瀏覽器為他們分配了一個(gè)獨(dú)立區(qū)域，形成一個(gè)一個(gè)“塊”，因此

也被稱作“塊級(jí)元素”。不過除了這個(gè)區(qū)別，在其他方面和

基本相同，它們都可以為其中內(nèi)容添加各種樣式。

　　正是有了和

兩個(gè)元素的出現(xiàn)，使得HTML4的樣式定義變得更為靈活和規(guī)范。

　　1、行內(nèi)樣式定義元素

　　屬于行內(nèi)樣式定義元素，它的插入不會(huì)使原有結(jié)構(gòu)產(chǎn)生任何變化，直到設(shè)計(jì)者為它提供了屬性為止。

　　基本語法

　　

　　元素的首尾標(biāo)記必須同時(shí)成對(duì)出現(xiàn)，且元素允許多重嵌套，也就是說，一個(gè)元素中可以嵌套任意多個(gè)元素。

　　文件范例

　　01

　　02

　　03

　　04

　　05

　　06p{line-height:1.5em;

　　07font-family:Tahoma;}

　　08.toolname{color:#FFFFFF;

　　09background-color:#AA0000;

　　10cursor:hand;}

　　11.helpfile{cursor:help;

　　12text-decoration:underline;}

　　13

　　14

　　15

　　16

HTML和CSS都是網(wǎng)頁制作必不可少的工具，詳情請(qǐng)參閱幫助文件。

　　17

　　18

　　文件說明

　　設(shè)計(jì)者對(duì)“HTML”和“CSS”兩個(gè)單詞使用了元素，其中style元素用前景色、背景色和鼠標(biāo)樣式定義，同時(shí)還對(duì)于語言編碼、鼠標(biāo)跟蹤文字提醒進(jìn)行了lang和title屬性定義。對(duì)于“幫助文件”4個(gè)字，設(shè)計(jì)者利用元素的style屬性對(duì)它定義了下劃線和鼠標(biāo)樣式，同時(shí)也對(duì)語言解碼、鼠標(biāo)跟蹤文字提醒進(jìn)行了lang和title屬性定義，onclick屬性可以插入腳本，設(shè)置用戶鼠標(biāo)單擊后的瀏覽器動(dòng)作。

　　除了進(jìn)行文本行內(nèi)定義，還可以對(duì)HTML元素和屬性無法定義的地方進(jìn)行樣式設(shè)置。

　　文件范例

　　01

　　02

　　03

　　04

　　05

　　06li{line-height:3em;

　　07font-family:couriernew;

　　08font-size:18pt;}

　　09.bordered_text{border:solid1pxblack;

　　10padding:.5em;

　　11font-weight:bold;}

　　12

　　13

　　14

　　15

　　16

• 13579

  　　17

• 02468

  　　18

　　19

　　20

　　文件說明

　　利用，可以在任意位置對(duì)特定字符進(jìn)行樣式格式化，即使字符包含在

中也一樣。這些功能都是僅靠HTML元素本身屬性無法達(dá)到的，而行內(nèi)樣式元素可以達(dá)到這樣的效果。

　　2、塊級(jí)樣式定義

元素

　　

屬于塊級(jí)樣式定義元素，它的插入會(huì)使原有結(jié)構(gòu)產(chǎn)生變化，所有

元素都會(huì)在新的一行產(chǎn)生一個(gè)文檔模型定義容器，等待設(shè)計(jì)者為它提供屬性。

　　基本語法

　　

　　

元素的首尾標(biāo)記必須同時(shí)成對(duì)出現(xiàn)，且

元素允許多重嵌套，也就是說，一個(gè)

元素中可以嵌套任意多個(gè)

元素。

　　文件范例

　　由于

元素是塊級(jí)元素，因此可以用CSS的position屬性對(duì)其進(jìn)行相對(duì)或者絕對(duì)定位，一旦進(jìn)行了絕對(duì)定位，一個(gè)

矩形區(qū)域就可以出現(xiàn)在一個(gè)HTML文檔的任何地方。

　　01

　　02

　　03

　　04

　　05

　　06body{background-color:black;}

　　.dig1,.dig2,.dig4,.dig6,.dig7{background-color:lime;}

　　.dig3,.dig5{background-color:#003300;}

　　07

　　08

　　09

　　10

　　11

　　12

　　14

　　15

　　16

　　17

　　18

　　19

　　該文檔沒有使用任何的表格和圖片，但是卻能模擬一個(gè)屏幕數(shù)字“5”，依靠的就是

元素的定位屬性和樣式屬性。一個(gè)數(shù)字中包含7個(gè)矩形塊，利用絕對(duì)定位放置在相應(yīng)位置，然后用背景色屬性模擬發(fā)光和變暗的效果。設(shè)計(jì)者可以修改