Html和body標(biāo)記應(yīng)用CSS

作者：admin 2010-08-27 15:16:26

CSS網(wǎng)頁(yè)布局有很多值得學(xué)習(xí)的地方，這里向大家描述一下html和body標(biāo)記如何應(yīng)用CSS，相信本文介紹一定會(huì)讓你有所收獲。

本文和大家重點(diǎn)討論一下html和body標(biāo)記如何應(yīng)用CSS，使用Html里面的background可以讓我們?cè)诟嗟臅r(shí)候能減少添加一個(gè)div標(biāo)簽來(lái)包含body中的所有內(nèi)容。

淺談html和body標(biāo)記應(yīng)用CSS

對(duì)于一個(gè)頁(yè)面來(lái)說(shuō)，最基本的結(jié)構(gòu)呢就是

<HTML> 
<head> 
<!--頭部信息內(nèi)容區(qū)域--> 
</head> 
<body> 
<!--頁(yè)面顯示內(nèi)容區(qū)域--> 
</body> 
</html>

對(duì)于這樣的一個(gè)結(jié)構(gòu)，不會(huì)有人感到陌生，然而往往有時(shí)候卻是大家越熟悉的東西就容易讓人去遺忘了他們的存在。或許你會(huì)在想，這個(gè)結(jié)構(gòu)這些標(biāo)簽有什么好聊的呢，每個(gè)頁(yè)面都需要他們的啊。最近發(fā)現(xiàn)，其實(shí)在很多時(shí)候這些不起眼的我們不在乎的標(biāo)簽卻可以幫我們?cè)陧?yè)面美化的過(guò)程帶來(lái)很大的幫助。

對(duì)于hack方面，大家都知道*HTML跟*+html可以幫助我們?cè)贗E7跟IE6之間作為識(shí)別，而這個(gè)也不是我現(xiàn)在想說(shuō)的內(nèi)容。其實(shí)我想說(shuō)的內(nèi)容很簡(jiǎn)單，主要有下面幾點(diǎn)。

1、利用一下HTML的background。使用它可以讓我們?cè)诟嗟臅r(shí)候能減少添加一個(gè)div標(biāo)簽來(lái)包含body中的所有內(nèi)容；而且html作為body的父級(jí)，因此背景（背景色以及背景圖片，以下出現(xiàn)的“背景”二字都是指背景色跟背景圖片）都會(huì)被body中的背景所覆蓋，先看一小段代碼。

<!DOCTYPEHTMLPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"  
 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<htmlXMLnshtmlXMLns="http://www.w3.org/1999/xhtml"id="myHtml"> 
<head> 
<metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=gb2312"/> 
<metahttp-equivmetahttp-equiv="X-UA-Compatible"content="IE=EmulateIE7"/> 
<styletypestyletype="text/CSS"> 
#myHtml{background-color:#CCCCCC;}  
#myBody{background-color:#FF0000;}  
</style> 
<title>無(wú)標(biāo)題文檔</title> 
</head> 
<bodyidbodyid="myBody"> 
提醒：嘗試刪除body中的文字再做于未刪除前做一個(gè)簡(jiǎn)單的對(duì)比，別忘了瀏覽器的差別哦。  
</body> 
</html>

通過(guò)上面的一小段代碼，大家可以看到body的背景跟HTML的背景所存在的區(qū)別了吧。接著大家應(yīng)該可以想到背景既然有這個(gè)特點(diǎn)，我們是不是可以考慮在有時(shí)候處理一些背景圖片的時(shí)候把html的background也利用起來(lái)呢，尤其是在處理一些比較個(gè)性的頁(yè)面（比如游戲官網(wǎng)）。

PS：

a.如果你把HTML（#myHtml）的樣式去掉，你再看看瀏覽器的表現(xiàn)，你會(huì)發(fā)現(xiàn)世界又變了。

b.對(duì)于背景色的設(shè)置還可以讓瀏覽器自定義的背景顏色失效（IE7為例：“工具”->“Internet選項(xiàng)”->“常規(guī)”中的顏色里可以找到背景的設(shè)置）

2、在上面的那一小段代碼中并沒(méi)用直接設(shè)置

HTML{background-color:#CCCCCC;}  
body{background-color:#FF0000;}

而是用了兩個(gè)ID，不知道你是否在想我為什么要這樣做呢？對(duì)于這點(diǎn)的話，可以從幾個(gè)方面來(lái)考慮

2.1JS的調(diào)用

2.2CSS中權(quán)限值的提升

簡(jiǎn)單的再說(shuō)一下如果body中使用ID或者CLASS的時(shí)候，我們能做什么吧。

a.對(duì)于現(xiàn)在網(wǎng)絡(luò)中出現(xiàn)的頁(yè)面，大家都可以看到很多時(shí)候，某個(gè)導(dǎo)航是高亮顯示，提示你當(dāng)前瀏覽的是在哪個(gè)頁(yè)面上。這點(diǎn)的功能我就是可以通過(guò)body或者那個(gè)導(dǎo)航中添加一個(gè)ID或者CLASS來(lái)判斷識(shí)別，當(dāng)然少不了給這個(gè)ID或者CLASS添加一個(gè)樣式。

b.在一些比較大型的網(wǎng)站中，某個(gè)頻道或者某些頻道的大致結(jié)構(gòu)都是相同，因此我們可以把其中一個(gè)結(jié)構(gòu)作為基礎(chǔ)參考，復(fù)制到其他頁(yè)面中使用，然后再調(diào)用同一個(gè)樣式，這樣可以減少很多的重復(fù)工作量，也讓頁(yè)面中的結(jié)構(gòu)的重用性提高，作為區(qū)別我們只要利用body中的ID或者CLASS來(lái)修改樣式的權(quán)重值就OK了。

【編輯推薦】

解決Firefox、IE6、IE7的CSS樣式兼容問(wèn)題
IE6、IE7、Firefox中margin問(wèn)題解決辦法
DIV布局規(guī)范中CSS類及id命名方式
CSS兼容：解決IE6、IE7和IE8的兼容問(wèn)題妙招
將XHTML+CSS頁(yè)面轉(zhuǎn)換為打印機(jī)頁(yè)面技巧

責(zé)任編輯：佚名來(lái)源： svn8.com