本文 向大家描述一下如何把XHTML／CSS頁(yè)面轉(zhuǎn)換成為打印機(jī)頁(yè)面，使用結(jié)構(gòu)化的XHTML標(biāo)示和CSS格式將內(nèi)容和表示分離開來(lái)的一個(gè)優(yōu)勢(shì)在于，通過(guò)更改CSS樣式，你可以很輕易就把內(nèi)容重新格式化。

把XHTML／CSS頁(yè)面轉(zhuǎn)換成為打印機(jī)頁(yè)面

在以前，為Web頁(yè)面創(chuàng)建一個(gè)打印機(jī)友好的版本意味著要設(shè)計(jì)一個(gè)布局和格式都經(jīng)過(guò)修改的單獨(dú)頁(yè)面，這樣才能夠在打印的時(shí)候獲得令人滿意的效果。現(xiàn)在，通過(guò)使用結(jié)構(gòu)化的XHTML和CSS，你可以實(shí)現(xiàn)同樣的效果而只用花費(fèi)少得多的精力。

從屏幕顯示到打印效果

大多數(shù)的Web頁(yè)面都是設(shè)計(jì)適用于在計(jì)算機(jī)屏幕上觀看的。然而，有的時(shí)候用戶需要將某些頁(yè)面打印出來(lái)，也許就是為了保留一個(gè)長(zhǎng)期的記錄，或者將其用作方便的離線參考資料。

現(xiàn)在的麻煩是，讓W(xué)eb頁(yè)面在計(jì)算機(jī)彩色屏幕上看起來(lái)引人注目和五彩繽紛的很多特性，都無(wú)法在打印版的Web頁(yè)面上表現(xiàn)出相同的效果——尤其當(dāng)打印機(jī)是黑白的時(shí)候。在被降級(jí)為灰度打印的時(shí)候，彩色的組合會(huì)失去（原有的）對(duì)比效果；圖形會(huì)看起來(lái)失真，而且耗費(fèi)太長(zhǎng)的打印時(shí)間；在Web頁(yè)面上起著重要作用的導(dǎo)航按鈕在打印頁(yè)面上也毫無(wú)用處。

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

CSS的解決方案

使用結(jié)構(gòu)化的XHTML標(biāo)示和CSS格式將內(nèi)容和表示分離開來(lái)的一個(gè)優(yōu)勢(shì)在于，通過(guò)更改CSS樣式，你可以很輕易就把內(nèi)容重新格式化。因此，創(chuàng)建一個(gè)打印機(jī)友好的頁(yè)面就是把一個(gè)不同的CSS文件鏈接到相同的XHTML頁(yè)面上。

你可以同時(shí)把屏幕樣式表和打印樣式表鏈接到同一個(gè)XHTML文件里，所以就沒(méi)有必要單獨(dú)創(chuàng)建一個(gè)打印機(jī)友好的頁(yè)面，只需要一個(gè)打印機(jī)友好的樣式表就行了。當(dāng)你在鏈接代碼里加入多媒體類型的文件時(shí)，這就是在告訴瀏覽器為了進(jìn)行屏幕輸出要遵循或者忽略哪些CSS的規(guī)則，而為了打印輸出要使用哪些規(guī)則。

下面是鏈接到一對(duì)CSS文件的例子：

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

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

【編輯推薦】

1. DIV+CSS滑動(dòng)門技術(shù)簡(jiǎn)介
2. 暢談DIV排版和table排版的區(qū)別
3. 14大CSS工具提高網(wǎng)頁(yè)設(shè)計(jì)效率
4. 實(shí)現(xiàn)DIV圖片居中方法揭秘
5. 鼠標(biāo)經(jīng)過(guò)時(shí)改變DIV背景顏色的三種途徑