將XHTML CSS頁面轉換為打印機頁面

2020-03-24 19:05:40

字體：大中小

來源：轉載

供稿：網友

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

在以前，為Web頁面創建一個打印機友好的版本意味著要設計一個布局和格式都經過修改的單獨頁面，這樣才能夠在打印的時候獲得令人滿意的效果?，F在，通過使用結構化的XHTML和CSS，你可以實現同樣的效果而只用花費少得多的精力。
從屏幕顯示到打印效果
大多數的Web頁面都是設計適用于在計算機屏幕上觀看的。然而，有的時候用戶需要將某些頁面打印出來，也許就是為了保留一個長期的記錄，或者將其用作方便的離線參考資料。
現在的麻煩是，讓Web頁面在計算機彩色屏幕上看起來引人注目和五彩繽紛的很多特性，都無法在打印版的Web頁面上表現出相同的效果尤其當打印機是黑白的時候。在被降級為灰度打印的時候，彩色的組合會失去（原有的）對比效果；圖形會看起來失真，而且耗費太長的打印時間；在Web頁面上起著重要作用的導航按鈕在打印頁面上也毫無用處。
為了克服這些問題，Web的創建者常常會為頁面專門設計一個打印機友好的版本，這樣訪問者就有打印的欲望。打印機友好的版本通常都包括有和主要Web頁面相同的內容，但是會省略掉大多數的圖形、背景和導航元素。頁面還會把彩色轉換成某種形式，以便生成能夠讓人接受的灰度圖像。
CSS的解決方案
使用結構化的XHTML標示和CSS格式將內容和表示分離開來的一個優勢在于，通過更改html' target='_blank'>CSS樣式，你可以很輕易就把內容重新格式化。因此，創建一個打印機友好的頁面就是把一個不同的CSS文件鏈接到相同的XHTML頁面上。
你可以同時把屏幕樣式表和打印樣式表鏈接到同一個XHTML文件里，所以就沒有必要單獨創建一個打印機友好的頁面，只需要一個打印機友好的樣式表就行了。當你在鏈接代碼里加入多媒體類型的文件時，這就是在告訴瀏覽器為了進行屏幕輸出要遵循或者忽略哪些CSS的規則，而為了打印輸出要使用哪些規則。
下面是鏈接到一對CSS文件的例子：
以下為引用的內容：
linkrel= stylesheet type= text/css media= screen href= mysite-screen.css /
linkrel= stylesheet type= text/css media= print href= mysite-print.css /

如果需要支持老版本的瀏覽器，那你就必須堅持使用CSS1的媒體描述符screen和print。它們是相互排斥的，因此在為屏幕顯示而生成頁面的時候，瀏覽器會忽略掉打印樣式表，反之亦然。所以，每個樣式表都需要包含相同的樣式選擇器，但是有不同的規則聲明，以便為不同的輸出設備分別生成頁面樣式。
簡化CSS
如果你愿意放棄照顧老版本的瀏覽器，并假設你的用戶正在使用支持CSS2的瀏覽器（比如說IE5及以上版本或者Netscape6及以上版本），你可以使用新的all媒體描述符來極大地簡化CSS代碼。
下面就是使用CSS2媒體描述符的鏈接的例子：
以下為引用的內容：
linkrel= stylesheet type= text/css media= all href= mysite-all.css /
linkrel= stylesheet type= text/css media= print href= mysite-print2.css /

這些鏈接幾乎和前面的完全一樣；不同之處在于CSS文件里包含有用于打印媒體的樣式。
CSS文件里同media= all 聯系在一起的樣式可以應用于屏幕顯示、打印，以及其他所有的媒體，所以你可以把所有創建的樣式都放到這個文件里。同media= print 單獨聯系在一起的CSS文件可以小得多，因為頁面從所有的媒體文件繼承了所有的樣式，這就沒有必要再復制打印媒體文件里的這些樣式了。
打印媒體CSS文件里唯一需要的樣式是那些為打印輸出而更改或者添加頁面樣式。一般來說，這只不過是一些禁止顯示包含有圖形和導航內容的div的樣式，和把主體標簽以及主要div的寬度和空白設置替換成適合打印輸出的設置。
這個技巧能夠起作用是因為所有的媒體CSS文件和打印媒體CSS文件都組合成了相同的層疊樣式規則。因此，對這些CSS文件的鏈接順序相當重要。所有的媒體文件鏈接都必須要放在打印媒體文件鏈接之前。
下面是一些關于使用打印媒體CSS文件的提示：
如果禁止某個div的顯示，就要使用display:none而不能用visibility:hidden。
點（pt）和英寸（in）都不是用于屏幕顯示的正確度量單位，但是它們是打印輸出的正確度量單位。
在打印媒體文件里使用的選擇器要和你在所有媒體文件里使用的選擇器完全相同。例如，如果你使用div#sidenav來選擇所有媒體文件里id為sidenav的div，那么在打印媒體文件里使用#sidenav就可能無法成功地達到你的目的。
不要忘記明確地強制替代從一個文件到另一個文件都會發生改變的規則聲明。例如，如果你在所有的媒體文件里為一個元素設置了padding，并希望在打印輸出里去掉這個padding，那么在打印媒體文件里加入一個忽略padding聲明的樣式是不夠的你必須明確地設置padding:0pt，以取代前面的設置。
如果你正在使用諸如Dreamweaver這樣的圖形編輯器，你就可以預覽生成頁面的屏幕效果，而不是打印輸出的效果。要在Dreamweaver的設計（Design）查看窗里預覽打印樣式，就要把到打印媒體CSS文件的鏈接改成media= screen 。這就讓你可以預覽打印媒體文件里的CSS樣式。不要忘了在發布你的頁面之前把媒體描述符改回到media= print 。
當你需要為自己的訪問者提供一個打印機友好的Web頁面，你不再需要為原有的頁面創建一個單獨的版本。添加一個對帶有media= print 媒體描述符的CSS樣式表的鏈接，就能夠把任何XHTML／CSS頁面轉換成為一個打印機友好的頁面。html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：CSS中10件你需要知道的事

下一篇：CSS技巧教程-css書寫技巧