三位一體的網(wǎng)頁:

我們?cè)跒g覽器里看到的網(wǎng)頁其實(shí)是由以下三層信息構(gòu)成的一個(gè)共同體:

1、結(jié)構(gòu)層:

結(jié)構(gòu)層是由HTML和XHTML之類的標(biāo)記語言所構(gòu)成的。所就是哪些出現(xiàn)在html標(biāo)簽里面的單詞,對(duì)網(wǎng)頁內(nèi)容的語義含義作出了如下描述，例如，<p>This is a paragraph</p>標(biāo)簽表達(dá)了這樣一個(gè)語意:這是一個(gè)文本段落。但這些標(biāo)簽并不包含任何關(guān)于段落如何顯示的信息。

2、表示層:

表示層由CSS負(fù)責(zé)完成。CSS描述頁面內(nèi)容應(yīng)該如何呈現(xiàn)。

3、行為層:

行為層負(fù)責(zé)內(nèi)容應(yīng)該如何響應(yīng)事件這一問題,這是JavaScript語言和DOM所主宰的領(lǐng)域.

?

注意:網(wǎng)頁的顯示層和行為層總是存在的即使創(chuàng)建的網(wǎng)頁為給定任何具體的指令也是如此。此時(shí)Web瀏覽器將應(yīng)用它給出的默認(rèn)樣式和默認(rèn)事件處理函數(shù),比如:瀏覽器會(huì)在呈現(xiàn)文本段元素時(shí),留出默認(rèn)頁邊距,當(dāng)用戶把鼠標(biāo)指針懸停在某個(gè)元素上方時(shí)，有時(shí)候?yàn)g覽器會(huì)彈出一個(gè)顯示著該元素title屬性值的彈出框等等。

?

在所有的產(chǎn)品設(shè)計(jì)過程中,選擇最適用的工具去解決問題是最基本的原則。具體到網(wǎng)頁設(shè)計(jì)工作,這意味著:
我們將使用(X)HTML去搭建文檔的結(jié)構(gòu)；

使用CSS去設(shè)置文檔的呈現(xiàn)效果；

使用DOM腳本去實(shí)現(xiàn)文檔的行為；

?

但是在這三種技術(shù)之間存在著一些潛在的重疊區(qū)域,相信大家都會(huì)遇到過,用DOM可以改變結(jié)構(gòu)層的結(jié)構(gòu),諸如createElement()和appendChild()之類的方法允許你動(dòng)態(tài)創(chuàng)建標(biāo)記，表現(xiàn)層可以用:hover和：focus之類的偽類觸發(fā)事件來改變?cè)氐恼故拘Ч８淖冊(cè)氐某尸F(xiàn)效果當(dāng)然是表示層的"勢(shì)力范圍",但響應(yīng)用戶觸發(fā)的事件確實(shí)行為層的領(lǐng)地。行為層和表示層的這種重疊形成了一種灰色地帶。確實(shí),CSS正在利用偽類走進(jìn)DOM的領(lǐng)地,但DOM也有反擊之道。你也可以利用DOM來給元素設(shè)置樣式。

總結(jié)

以上是生活随笔為你收集整理的CSS-DOM介绍的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。