把XHTML／CSS頁面轉換成為印表機頁面

css|xhtml|列印|頁面|轉換

在以前，為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。它們是相互排斥的，因此在為螢幕顯示而產生頁面的時候，瀏覽器會忽略掉列印樣式表，反之亦然。所以，每個樣式表都需要包含相同的樣式選取器，但是有不同的規則聲明，以便為不同的輸出裝置分別產生頁面樣式。