萬盛學電腦網 >> 網頁制作 >> 腳本Html教程 >> html和body標記應用CSS方法和技巧
html和body標記應用CSS方法和技巧
大家都知道對於一個頁面來說，最基本的結構呢就是
<html>
<head>
<!-- 頭部信息內容區域 -->
</head>
<body>
<!-- 頁面顯示內容區域 -->
</body>
</html>
對於這樣的一個結構，不會有人感到陌生，然而往往有時候卻是大家越熟悉的東西就容易讓人去遺忘了他們的存在。或許你會在想，這個結構這些標簽有什麼好聊的呢，每個頁面都需要他們的啊。是啊，以前我一直也是這麼認為的，不過最近發現，其實在很多時候這些不起眼的我們不在乎的標簽卻可以幫我們在頁面美化的過程帶來很大的幫助。
對於hack方面，大家都知道* html跟*+html可以幫助我們在IE7跟IE6之間作為識別，而這個也不是我現在想說的內容。其實我想說的內容很簡單，主要有下面幾點。
1、利用一下html的background，可以讓我們在更多的時候能減少添加一個div標簽來包含body中的所有內容；而且html作為body的父級，因此背景（背景色以及背景圖片，以下出現的“背景”二字都是指背景色跟背景圖片）都會被body中的背景所覆蓋，先看一小段代碼我們繼續聊
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" id="myHtml" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<style type="text/css">
#myHtml {background-color:#CCCCCC;}
#myBody {background-color:#FF0000;}
</style>
<title>無標題文檔</title>
</head>
<body id="myBody">
小志提醒：嘗試刪除body中的文字再做於未刪除前做一個簡單的對比，別忘了浏覽器的差別哦。
</body>
</html>
通過上面的一小段代碼，大家可以看到body的背景跟html的背景所存在的區別了吧。接著大家應該可以想到背景既然有這個特點，我們是不是可以考慮在有時候處理一些背景圖片的時候把html的background也利用起來呢，尤其是在處理一些比較個性的頁面（比如游戲官網）。
PS：
a.如果你把html（#myHtml）的樣式去掉，你再看看浏覽器的表現，你會發現世界又變了。
b.對於背景色的設置還可以讓浏覽器自定義的背景顏色失效（IE7為例：“工具”->“Internet選項”->“常規”中的顏色裡可以找到背景的設置）
2、在上面的那一小段代碼中並沒用直接設置
html {background-color:#CCCCCC;}
body {background-color:#FF0000;}
而是用了兩個ID，不知道你是否在想我為什麼要這樣做呢？對於這點的話，可以從幾個方面來考慮
2.1 JS的調用（相對來說，用到比較多一點的是body中使用ID或者CLASS）
2.2 CSS中權限值的提升（這點基本上來說用到的機率微乎其微）
簡單的再說一下如果body中使用ID或者CLASS的時候，我們能做什麼吧。
a.對於現在網絡中出現的頁面，大家都可以看到很多時候，某個導航是高亮顯示，提示你當前浏覽的是在哪個頁面上。這點的功能我就是可以通過body或者那個導航中添加一個ID或者CLASS來判斷識別，當然少不了給這個ID或者CLASS添加一個樣式。
b.在一些比較大型的網站中，某個頻道或者某些頻道的大致結構都是相同，因此我們可以把其中一個結構作為基礎參考，復制到其他頁面中使用，然後再調用同一個樣式，這樣可以減少很多的重復工作量，也讓頁面中的結構的重用性提高，作為區別我們只要利用body中的ID或者CLASS來修改樣式的權重值就OK了。這樣說或許比較混亂，大家可以大致參考一下迅雷的動漫頻道http://anime.xunlei.com/（不過這個頻道中的body所用CLASS過多而且相對比較雜亂，這點算是一個敗筆吧）
- 上一頁:規范化CSS+XHTML命名參考
- 下一頁:打印部分頁面時預覽
