幾個css元素的簡單解釋 div ul dl dt oldiv，這個很常見，塊級元素，div盡量少用，和table一樣，嵌套越少越好

ol 有序列表。

<ol>
<li>……</li>
<li>……</li>
<li>……</li>
</ol>

表現為：

1……
2……
3……

ul 無序列表，表現為li前面是大圓點而不是123

<ul>
<li>……</li>
<li>……</li>
</ul>

很多人容易忽略 dl dt dd的用法

dl 內容塊
dt 內容塊的標題
dd 內容
可以這么寫：

<dl>
<dt>標題</dt>

<dd>內容1</dd>
<dd>內容2</dd>

</dl>

dt 和dd中可以再加入 ol ul li和p

理解這些以后，在使用div布局的時候，會方便很多，w3c提供了很多元素輔助布局

??

由于項目中編寫文檔結構、編寫CSS的人員較多，并與程序員協同工作，就需要統一class與id的名稱，前天花了一點時間，按照大多人的習慣，制定了下面的常用關鍵字：
容 器：container/box
頭 部：header
主 導 航：mainNav
子 導 航：subNav
頂 導 航：topNav
網站標志：logo
大 廣 告：banner
頁面中部：mainBody
底 部：footer
菜 單：menu
菜單內容：menuContent
子 菜 單：subMenu
子菜單內容：subMenuContent
搜 索：search
搜索關鍵字：keyword
搜索范圍：range
標簽文字：tagTitle
標簽內容：tagContent
當前標簽：tagCurrent/currentTag
標　 題：title
內 容：content
列 表：list
當前位置：currentPath
側 邊 欄：sidebar
圖 標：icon
注 釋：note
登 錄：login
注 冊：register
列 定 義：column_1of3 (三列中的第一列)
column_2of3 (三列中的第二列)
column_3of3 (三列中的第三列)

?

代碼精簡

　　使用DIV CSS布局，頁面代碼精簡，這一點相信對XHTML有所了解的都知道。代碼精簡所帶來的直接好處有兩點：一是提高spider爬行效率，能在最短的時間內爬完整個頁面，這樣對收錄質量有一定好處;二是由于能高效的爬行，就會受到spider喜歡，這樣對收錄數量有一定好處。

　　表格的嵌套問題搜索引擎一般不抓取三層以上的表格嵌套，這一點一直沒有得到搜索引擎官方的證實。我的幾項實驗結果沒有完全出來，但根據目前掌握的情況來看，spider爬行Table布局的頁面，遇到多層表格嵌套時，會跳過嵌套的內容或直接放棄整個頁面。

　　使用Table布局，為了達到一定的視覺效果，不得不套用多個表格。如果嵌套的表格中是核心內容，spider爬行時跳過了這一段沒有抓取到頁面的核心，這個頁面就成了相似頁面。網站中過多的相似頁面會影響排名及域名信任度。

　　而DIV CSS布局基本上不會存在這樣的問題，從技術角度來說，XHTML在控制樣式時也不需要過多的嵌套。搜索引擎優化及營銷都是非常有利的。搜索引擎表示排名規則會傾向于符合W3C標準的網站或頁面，但事實證明使用XTHML架構的網站排名狀況一般都不錯。這一點或許會有爭議，但樂思蜀本人保持這樣的觀點，有異議者可以拿三組以上基本同等質量的網站對比觀察。內容來自中國站長資訊網(www.chinahtml.com)

　　我想，這樣的情況可能不是排名規則，最大的可能還是spider爬行網站時，出現以上差異導致收錄質量的不同。

　　畢竟廖勝于無，建議建站或改版的朋友們，技術許可的情況下，還是選擇DIV CSS布局為好。

?

CSS布局常用的方法：float:none|left|right
取值：
none:　默認值。對象不飄浮
left:　文本流向對象的右邊
right:　文本流向對象的左邊

它是怎樣工作的，看個一行兩列的例子
xhtml:
<div id="wrap">
<div id="column1">這里是第一列</div>
<div id="column2">這里是第二列</div>
<div class="clear"></div>
</div>
CSS:
#wrap{width:100;height:auto;}
#column1{float:left;width:40;}
#column2{float:right;width:60;}
.clear{clear:both;}

position:static|absolute|fixed|relative
取值：
static:　默認值。無特殊定位，對象遵循HTML定位規則
absolute:　將對象從文檔流中拖出，使用left，right，top，bottom等屬性相對于其最接近的一個最有定位設置的父對象進行絕對定位。如果不存在這樣的父對象，則依據body對象。而其層疊通過z-index屬性定義
fixed:　未支持。對象定位遵從絕對(absolute)方式。但是要遵守一些規范
relative:　對象不可層疊，但將依據left，right，top，bottom等屬性在正常文檔流中偏移位置

它來實現一行兩列的例子
xhtml:
<div id="wrap">
<div id="column1">這里是第一列</div>
<div id="column2">這里是第二列</div>
</div>
CSS:
#wrap{position:relative;width:770px;}
#column1{position:absolute;top:0;left:0;width:300px;}
#column2{position:absolute;top:0;right:0;width:470px;}
他們的區別在哪?
顯然，float是相對定位的，會隨著瀏覽器的大小和分辨率的變化而改變，而position就不行了，所以一般情況下還是float布局！

CSS常用布局實例

單行一列
body{margin:0px;padding:0px;text-align:center;}
#content{margin-left:auto;margin-right:auto;width:400px;}

兩行一列
body{margin:0px;padding:0px;text-align:center;}
#content-top{margin-left:auto;margin-right:auto;width:400px;}
#content-end{margin-left:auto;margin-right:auto;width:400px;}

三行一列
body{margin:0px;padding:0px;text-align:center;}
#content-top{margin-left:auto;margin-right:auto;width:400px;width:370px;}
#content-mid{margin-left:auto;margin-right:auto;width:400px;}
#content-end{margin-left:auto;margin-right:auto;width:400px;}

單行兩列
#bodycenter{width:700px;margin-right:auto;margin-left:auto;overflow:auto;}
#bodycenter#dv1{float:left;width:280px;}
#bodycenter#dv2{float:right;width:420px;}

兩行兩列
#header{width:700px;margin-right:auto;margin-left:auto;overflow:auto;}
#bodycenter{width:700px;margin-right:auto;margin-left:auto;overflow:auto;}
#bodycenter#dv1{float:left;width:280px;}
#bodycenter#dv2{float:right;width:420px;}

三行兩列
#header{width:700px;margin-right:auto;margin-left:auto;}
#bodycenter{width:700px;margin-right:auto;margin-left:auto;}
#bodycenter#dv1{float:left;width:280px;}
#bodycenter#dv2{float:right;width:420px;}
#footer{width:700px;margin-right:auto;margin-left:auto;overflow:auto;clear:both;}

單行三列

絕對定位
#left{position:absolute;top:0px;left:0px;width:120px;}
#middle{margin:0px190px0px190px;}
#right{position:absolute;top:0px;right:0px;width:120px;}

float定位
xhtml:
<div id="wrap">
<div id="column">
<div id="column1">這里是第一列</div>
<div id="column2">這里是第二列</div>
<div class="clear"></div>
</div>
<divid="column3">這里是第三列</div>
<divclass="clear"></div>
</div>
CSS:
#wrap{width:100;height:auto;}
#column{float:left;width:60;}
#column1{float:left;width:30;}
#column2{float:right;width:30;}
#column3{float:right;width:40;}
.clear{clear:both;}

float定位二
xhtml
<div id="center"class="column">
<h1>Thisisthemaincontent.</h1>
</div>
<div id="left"class="column">
<h2>Thisistheleftsidebar.</h2>
</div>
<div id="right"class="column">
<h2>Thisistherightsidebar.</h2>
</div>
CSS
body{
margin:0;
padding-left:200px;
padding-right:190px;
min-width:200px;
}
.column{
position:relative;
float:left;
}
#center{
width:100;
}
#left{
width:200px;
right:200px;
margin-left:-100;
}
#right{
width:190px;
margin-right:-100;
}

*html#left{
left:190px;
}

?

?

?

這樣的一個指令：(position)，在DreamWeaver中文版中翻譯為“定位”，常用的屬性有兩個：relative(相對)與 absolute(絕對)。有很多朋友對這條指令的用法還是不清楚，這里做一些細致的講解。

　　position:relative; 表示相對定位，被定位了這個屬性的標簽在所屬的范圍內可以進行上下左右的移，這里的移動與padding或是margin所產生的位置變化是不一樣的。padding與margin是元素本身的一種邊距與填充距離并不是真正的移動，而被定義為relative的元素是真正的移動，這所產生的移動距離是從margin的外圍到父級標簽內側之間這一段。

　　position:absolute; 表示絕對定位，如果定義了這個屬性的元素，其位置將依據瀏覽器左上角的0點開始計算，并且是浮動正常元素之上的。那么當你需要某個元素定位在瀏覽器內容區的某個地方就可以用到這個屬性。

　　于是產生了一個問題：現在大家做的網頁大部分是居中的，如果我需要這個元素跟著網頁中的某個元素位置，不論屏幕的分辨率是多少它的位置始終是針對頁內的某個元素的，靠單純的absolute是不行的。

　　正確的解決方法是：在元素的父級元素定義為position:relative;(這里可以是祖父級，也可以是position:absolute;，多謝謝old9的提出)需要絕對定位的元素設為position:absolute;

　　這樣再設定top,right,bottom,left的值就可以了，這樣其定位的參照標準就是父級的左上角padding的左上側。

?

?

?

一.選擇符模式

模式/含義/內容描述

*

匹配任意元素。(通用選擇器)

E

匹配任意元素 E (例如一個類型為 E 的元素)。(類型選擇器)

E F

匹配元素 E 的任意后代元素 F 。(后代選擇器)

E > F

匹配元素 E 的任意子元素 F 。(子選擇器)

E:first-child

當元素 E 是它的父元素中的第一個子元素時，匹配元素 E 。(:first-child 偽類)

E:link E:visited

如果 E 是一個目標還沒有訪問過(:link)或者已經訪問過(:visited)的超鏈接的源錨點時匹配元素 E 。(link 偽類)

E:active E:hover E:focus

在確定的用戶動作中匹配 E 。(動態偽類)

E:lang(c)

如果類型為 E 的元素使用了(人類)語言 c (文檔語言確定語言是如何被確定的)，則匹配該元素。(:lang() 偽類)

E F

如果一個元素 E 直接在元素 F 之前，則匹配元素 F 。(臨近選擇器)

E[foo]

匹配具有”foo”屬性集(不考慮它的值)的任意元素 E 。(屬性選擇器)

E[foo="warning"]

匹配其“foo”屬性值嚴格等于“warning”的任意元素 E 。(屬性選擇器)

E[foo~="warning"]

匹配其“foo”屬性值為空格分隔的值列表，并且其中一個嚴格等于“warning”的任意元素 E 。(屬性選擇器)

E[lang|="en"]

匹配其“lang”屬性具有以“en”開頭(從左邊)的值的列表的任意元素 E 。(屬性選擇器)

DIV.warning

僅 HTML。用法同 DIV[class~="warning"]。(類選擇器)

E#myid

匹配 ID 等于“myid”的任意元素 E 。(ID 選擇器)

我們用下面的例子來解釋“父元素”、“子元素”、“父/子”及“相鄰”這幾個概念。

<div title="這是一個div">

<h1>這是是h1的內容</h1>

<p>這是一個段落p的內容！<strong>這里是strong的內容</strong>這是一個段落p的內容！</p>

</div>

從以上代碼中，我們可以找出這樣的關系：

h1 和 p 同為 div 的“兒子”，兩者分別同 div 形成“父/子”關系。

h1,p,strong 都是 div 的“子元素”。（三者都包含在 div 之內）

div 是 h1 和 p 的“父元素”。

strong 和 p 形成“父/子”關系，strong 的“父元素”是 p 。

但 strong 和 div 并非“父/子”關系，而是“祖孫”關系，但 strong 依然是 div 的“子（孫）元素”。

div 是 h1 p strong 三者的“祖先”，三者是 div 的“子（孫）元素”。

h1 和 p 兩者是相鄰的。

繼承上面的實例來具體演示一下E F的關系：假如，我們需要將 strong 內的內容二字變為綠色，我們可以有哪些方法呢？

div strong {color:green;}

p > strong {color:green;}

div > strong {color:green;}

臨近選擇器和通用選擇器：通用選擇器以星號“*”表示，可以用于替代任何 tag 。

實例：

h2 * { color:green }

二.選擇符分類介紹

1.通配選擇符

語法：

* { sRules }

說明：

通配選擇符。選定文檔目錄樹(DOM)中的所有類型的單一對象。

假如通配選擇符不是單一選擇符中的唯一組成，“*”可以省略。

示例：

*[lang=fr] { font-size:14px; width:120px; }

*.div { text-decoration:none; }

2.類型選擇符

語法：

E { sRules }

說明：

類型選擇符。以文檔語言對象(Element)類型作為選擇符。

示例：

td { font-size:14px; width:120px; }

a { text-decoration:none; }

?

?

?

偽類可以看做是一種特殊的類選擇符，是能被支持CSS的瀏覽器自動所識別的特殊選擇符。它的最大的用處就是可以對鏈接在不同狀態下定義不同的樣式效果。

1. 語法

偽類的語法是在原有的語法里加上一個偽類（pseudo-class）：

selector:pseudo-class {property: value}

（選擇符:偽類 {屬性: 值}）

偽類和類不同，是CSS已經定義好的，不能象類選擇符一樣隨意用別的名字，根據上面的語法可以解釋為對象（選擇符）在某個特殊狀態下（偽類）的樣式。

類選擇符及其他選擇符也同樣可以和偽類混用：

selector.class:pseudo-class {property: value}

（選擇符.類:偽類 {屬性: 值}）

2. 錨的偽類

我們最常用的是4種a（錨）元素的偽類，它表示動態鏈接在4種不同的狀態：link、visited、active、hover（未訪問的鏈接、已訪問的鏈接、激活鏈接和鼠標停留在鏈接上）。我們把它們分別定義不同的效果：

a:link {color: #FF0000; text-decoration: none}

a:visited {color: #00FF00; text-decoration: none}

a:hover {color: #FF00FF; text-decoration: underline}

a:active {color: #0000FF; text-decoration: underline}

（上面這個例子中，這個鏈接未訪問時的顏色是紅色并無下劃線，訪問后是綠色并無下劃線，激活鏈接時為藍色并有下劃線，鼠標在鏈接上時為紫色并有下劃線）

注意：有時這個鏈接訪問前鼠標指向鏈接時有效果，而鏈接訪問后鼠標再次指向鏈接時卻無效果了。這是因為你把a:hover放在了a:visited的前面，這樣的話由于后面的優先級高，當訪問鏈接后就忽略了a:hover的效果。所以根據疊層順序，我們在定義這些鏈接樣式時，一定要按照a:link， a:visited， a:hover， a:actived的順序書寫。

3. 偽類和類選擇符

將偽類和類組合起來用，就可以在同一個頁面中做幾組不同的鏈接效果了，例如，我們定義一組鏈接為紅色，訪問后為藍色；另一組為綠色，訪問后為黃色：

a.red:link {color: #FF0000}

a.red:visited {color: #0000FF}

a.blue:link {color: #00FF00}

a.blue:visited {color: #FF00FF}

現在應用在不同的鏈接上：

<a class="red" href="...">這是第一組鏈接</a>

<a class="blue" href="...">這是第二組鏈接</a>

4. 其他偽類

此外CSS2還定義了首字和首行（first-letter和first-line）的偽類，可以對元素的首字或首行設定不同的樣式。

下面看這個例子，我們在段落標記里定義文本首字尺寸為默認大小的3倍：

<style type=”text/css”>

p:first-letter {font-size: 300%}

</style>

……

<p>

這是一個段落，這個段落的首字被放大了。

</p>

我們再定義一個首行樣式的例子：

<style type=”text/css”>

div p:first-line {color: red}

</style>

……

<div>

<p>

這是段落的第一行

這是段落的第二行

這是段落的第三行

</p>

</div>

（上例中段落的第一行為紅色，第二、三行為默認顏色）

注意：首字和首行的偽類需要IE5.5以上的版本支持。

?

?

?

1. Block和inline元素對比

所有的HTML元素都屬于block和inline之一。

block元素的特點是：

總是在新行上開始；

高度，行高以及頂和底邊距都可控制；

寬度缺省是它的容器的100%，除非設定一個寬度

<div>, <p>, <h1>, <form>, <ul> 和 <li>是塊元素的例子。

相反地，inline元素的特點是：

和其他元素都在一行上；

高，行高及頂和底邊距不可改變；

寬度就是它的文字或圖片的寬度，不可改變。

<span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素的例子。

用display: inline 或display: block命令就可以改變一個元素的這一特性。什么時候需要改變這一屬性呢？

讓一個inline元素從新行開始；

讓塊元素和其他元素保持在一行上；

控制inline元素的寬度（對導航條特別有用）；

控制inline元素的高度；

無須設定寬度即可為一個塊元素設定與文字同寬的背景色。

2. 再來一個box黑客方法

之所以有這么多box黑客方法，是因為IE在6之前對box的理解跟別人都不一樣，它的寬度要包含邊線寬和空白。要想讓IE5等同其他瀏覽器保持一致，可以用CSS的方法：

padding: 2em;

border: 1em solid green;

width: 20em;

width: 14em;

第一個寬度所有瀏覽器都認得，但IE5.x不認得第2行的寬度設置，只因為那一行上有空白的注釋符號（多么蠢的語法分析！），所以IE5.x就用20減掉一些空白，而其他瀏覽器會用14這個寬度，因為它是第2行，會覆蓋掉第1行。

3. 頁面的最小寬度

min-width是個非常方便的CSS命令，它可以指定元素最小也不能小于某個寬度，這樣就能保證排版一直正確。但IE不認得這個，而它實際上把width當做最小寬度來使。為了讓這一命令在IE上也能用，可以把一個
放到 標簽下，然后為div指定一個類：

<body>

<div class="container“>

然后CSS這樣設計：

#container

{

min-width: 600px;

width:expression(document.body.clientWidth < 600? "600px": "auto" );

}

第一個min-width是正常的；但第2行的width使用了Javascript，這只有IE才認得，這也會讓你的HTML文檔不太正規。它實際上通過Javascript的判斷來實現最小寬度。

同樣的辦法也可以為IE實現最大寬度：

#container

{

min-width: 600px;

max-width: 1200px;

width:expression(document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1200? ”1200px“ : ”auto";

}

4. IE與寬度和高度的問題

IE不認得min-這個定義，但實際上它把正常的width和height當作有min的情況來使。這樣問題就大了，如果只用寬度和高度，正常的瀏覽器里這兩個值就不會變，如果只用min-width和min-height的話，IE下面根本等于沒有設置寬度和高度。

比如要設置背景圖片，這個寬度是比較重要的。要解決這個問題，可以這樣：

.box

{

width: 80px;

height: 35px;

}

body .box

{

width: auto;

height: auto;

min-width: 80px;

min-height: 35px;

}

所有的瀏覽器都可以使用第一個box設置，但IE不認得第2段設置，因為其中用到了子選擇器命令。第2個設置更特殊些，所以它會覆蓋掉第1個設置。

?

?

?

在以前的web開發欄目中，我介紹了不少處理HTML表格的方法，盡管現在使用表格來布局網頁的方法已經不再時髦了，但是您依然可以使用表格來顯示表列數據。

顯示和樣式化表格的方法有很多種，在這篇文章中，我將介紹使用CSS對表格邊框進行樣式化的方法。

鏈接

CSS2表格模型是基于HTML 4.01表格模型的。表格包含了一個可選的錨標記和單元格以及數據行，表格模型包含以下的元素：表格、錨、數據行、數據行組、數據列、數據列組和單元格。這篇文章將集中講解表格中各個元素的邊框處理方法。

邊框

根據不同的需求，您可以對表格和單元格應用不同的邊框。您可以定義整個表格的邊框也可以對單獨的單元格分別進行定義。CSS的邊框屬性可以指定邊框的大小以及顏色和類型。以下的代碼定義了寬度為5個像素的黑色實線邊框：

TABLE { 5px solid black; }

除此以外，您還可以使用相同的語法為表格中單獨的單元格分別指定邊框屬性。您可以使用以下的屬性值來定義邊框類型：

l none: 指定表格沒有邊框，所以邊框寬度為0。

l dotted: 由點線組成的表格邊框。

l dashed: 由虛線組成的表格邊框。

l solid: 由實線組成的表格邊框。

l Double: 由雙實線組成的表格邊框。

l Groove: 槽線效果邊框。

l ridge: 脊線效果邊框，和槽線效果相反。

l inset: 內凹效果邊框。

l outset: 外凸效果邊框，和內凹效果相反。

每個邊框類型都可以指定一種顏色，邊框是繪制在背景顏色上的，列表A使用邊框屬性來樣式化整個表格以及錨標記和單獨的單元格。

<html>

<head><title>HTML Table</title></head>

<style type="text/css">

TABLE {

background: blue;

border-collapse: separate;

border-spacing: 10pt;

border: 5px solid red; }

TD, TH {

background: white;

border: inset 5pt;

horizontal-align: right; }

CAPTION { border: ridge 5pt blue; }

</style><body>

<table summary="TechRepublic.com - Tables and CSS">

<caption>First Quarter Sales</caption>

<thead><tr>

<thabbr="salesperson" scope="col">Person</th>

<thabbr="sales" scope="col">Sales</th>

</tr></thead>

<tbody><tr>

<td>Mr. Smith</td>

<td>600.00</td>

</tr><tr>

<td>Mr. Jones</td>

<td>0000.00</td>

</tr><tr>

<td>Ms. Williams</td>

<td>0000.00</td>

</tr></tbody>

<tfoot><tr>

<td colspan="2">Let's sale, sale, sale!</td>

</tr></tfoot></table></body></html>

列表A

這個例子展示了很多可供使用的表格邊框的選項，您可以使用您熟悉的度量單位（像素、磅，行長單位等）。設定邊框的尺寸，您可以使用十六進制數值或顏色名稱來指定邊框顏色。以下的例子演示了定義邊框的方法。

border: 5px solid red;

在這一條語句中融合了寬度、樣式和顏色屬性的定義，但是您也可以對這些元素進行單獨定義，如下所示：

border-width: 5px;

border-style: solid;

border-color: red;

除了將表格作為一個整體進行定義，您也可以將表格邊框的四個部分分別進行定義，包括頂部、底部、左邊和右邊。列表B中的代碼將剛才的例子中的表格分成四個部分單獨定義。

?

?

?

CSS布局常用的方法

float:none|left|right

取值：

none:默認值。對象不飄浮

left:文本流向對象的右邊

right:文本流向對象的左邊

它是怎樣工作的，看個一行兩列的例子

xhtml代碼:

Example Source Code

<div id="wrap">

<div id="column1">這里是第一列</div>

<div id="column2">這里是第二列</div>

?

</div>

CSS代碼:

Example Source Code

#wrap{width:100;height:auto;}

#column1{float:left;width:40;}

#column2{float:right;width:60;}

.clear{clear:both;}

position:static|absolute|fixed|relative

取值：

static:默認值。無特殊定位，對象遵循HTML定位規則

absolute:將對象從文檔流中拖出，使用left，right，top，bottom等屬性相對于其最接近的一個最有定位設置的父對象進行絕對定位。如果不存在這樣的父對象，則依據body對象。而其層疊通過z-index屬性定義

fixed:未支持。對象定位遵從絕對(absolute)方式。但是要遵守一些規范

relative:對象不可層疊，但將依據left，right，top，bottom等屬性在正常文檔流中偏移位置

它來實現一行兩列的例子

xhtml代碼:

Example Source Code

<div id="wrap">

<div id="column1">這里是第一列</div>

<div id="column2">這里是第二列</div>

</div>

CSS代碼:

Example Source Code [www.52css.com]

#wrap{position:relative;width:770px;}

#column1{position:absolute;top:0;left:0;width:300px;}

#column2{position:absolute;top:0;right:0;width:470px;}

他們的區別在哪？

顯然，float是相對定位的，會隨著瀏覽器的大小和分辨率的變化而改變，而position就不行了，所以一般情況下還是float布局！

?

?

?

在以前，為Web頁面創建一個打印機友好的版本意味著要設計一個布局和格式都經過修改的單獨頁面，這樣才能夠在打印的時候獲得令人滿意的效果。現在，通過使用結構化的XHTML和CSS，你可以實現同樣的效果而只用花費少得多的精力。

從屏幕顯示到打印效果

大多數的Web頁面都是設計適用于在計算機屏幕上觀看的。然而，有的時候用戶需要將某些頁面打印出來，也許就是為了保留一個長期的記錄，或者將其用作方便的離線參考資料。

現在的麻煩是，讓Web頁面在計算機彩色屏幕上看起來引人注目和五彩繽紛的很多特性，都無法在打印版的Web頁面上表現出相同的效果——尤其當打印機是黑白的時候。在被降級為灰度打印的時候，彩色的組合會失去（原有的）對比效果；圖形會看起來失真，而且耗費太長的打印時間；在Web頁面上起著重要作用的導航按鈕在打印頁面上也毫無用處。

為了克服這些問題，Web的創建者常常會為頁面專門設計一個打印機友好的版本，這樣訪問者就有打印的欲望。打印機友好的版本通常都包括有和主要Web頁面相同的內容，但是會省略掉大多數的圖形、背景和導航元素。頁面還會把彩色轉換成某種形式，以便生成能夠讓人接受的灰度圖像。

CSS的解決方案

使用結構化的XHTML標示和CSS格式將內容和表示分離開來的一個優勢在于，通過更改CSS樣式，你可以很輕易就把內容重新格式化。因此，創建一個打印機友好的頁面就是把一個不同的CSS文件鏈接到相同的XHTML頁面上。

你可以同時把屏幕樣式表和打印樣式表鏈接到同一個XHTML文件里，所以就沒有必要單獨創建一個打印機友好的頁面，只需要一個打印機友好的樣式表就行了。當你在鏈接代碼里加入多媒體類型的文件時，這就是在告訴瀏覽器為了進行屏幕輸出要遵循或者忽略哪些CSS的規則，而為了打印輸出要使用哪些規則。

下面是鏈接到一對CSS文件的例子：

<link rel="stylesheet" type="text/css" media="screen" href="mysite-screen.css"
/>
<link rel="stylesheet" type="text/css" media="print" href="mysite-print.css" />

如果需要支持老版本的瀏覽器，那你就必須堅持使用CSS1的媒體描述符screen和print。它們是相互排斥的，因此在為屏幕顯示而生成頁面的時候，瀏覽器會忽略掉打印樣式表，反之亦然。所以，每個樣式表都需要包含相同的樣式選擇器，但是有不同的規則聲明，以便為不同的輸出設備分別生成頁面樣式。

總結

以上是生活随笔為你收集整理的常用CSS元素div ul dl dt ol的简单解释的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。