為列印輸出建立一個CSS樣式

css|建立|列印

　　有的時候，你可以不必在你的Web網站上建立一個獨立的與列印相關的頁面。

　　大多數的Web頁面都顯示在電腦螢幕上，人們通過螢幕觀看，但是，有時候使用者想要將一些網上的內容列印出來，這就需要與列印媒體串連起來。由於原來採用的是能讓Web頁面在螢幕上顯示的效果很好的那種格式，但在列印時效果並不那麼好，Web建立者們通常都會建立一些獨立的頁面，這些頁面與印表機聯絡緊密，而使用者也需要經常列印這些頁面。但如果你使用了XHTML標記和CSS，你就沒必要再建立一個獨立的與印表機相串連的頁面了，你僅僅只需要幾種CSS樣式來將需列印的頁面的內容進行格式化，以便於列印輸出就行了。

　　以良好的標記開頭

　　XHTML和CSS有一種特殊的功能，即內容與表述是各自獨立的；你可以隨意將其格式改成另一種媒體形式，而不必改變它的內容，也不必改變它的基本標記。不過為了使這一想法能在實踐中成為可能，你應該讓你的結構標記好一點，乾淨整潔一點。因此，在你準備用CSS建立一個與印表機相連的頁面之前，要仔細看看它的XHTML標記。

　　清除該標記中所有的內嵌樣式以及其它固有的表述格式。為了讓該列印媒體的CSS檔案能發揮應有的作用，所有的樣式和格式都必須由它內建的樣式表來決定，而不是由它的標記中的格式來決定。同樣，將頁首中所有的CSS樣式移走，將它們存入一個外部樣式表中，這個表是附在（串連在或被輸入）該XHTML文檔中的。

　　檢查標記的時候，你要確定它的內容都是按邏輯分組的，分成了一個個的div，而且每一個div都是通過其ID或類別來鑒別。

　　第一步：添加一個列印樣式表

　　用CSS建立一個與印表機密切聯絡的頁面的第一步，是將列印媒體的CSS檔案附加到你的XHTML文檔中。與下面兩個獨立的CSS檔案相比，我更傾向於使用XHTML頁首中的連結，這兩個檔案，一個是有關所有媒體的（或者螢幕媒體），另一個是有關列印媒體的。該連結看起來與下面這些有點相似：

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

　　第二步：設定顏色和字型

　　在螢幕上，那些有色文本，多彩的顏色，以及紋理清晰的背景看起來比較宜人，但是如果是在一張由一台黑白印表機列印出來的紙張上，可能就不那麼好了。在這種情況下，通常是簡單的黑底白字更好看一些。

　　通常設計師們會在主體標籤選取器中設定預設背景和文本顏色。這個選取器還設定預設字型外形和大小，如下所示：

　　body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  background-color: maroon;
  color: silver;
}

　　為了使這種樣式與印表機之間配合更好一些，你要將顏色改為白色背景黑色字型，還要設定基本的字型大小。主要的樣式像下面這樣：

　　body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12pt;
  background-color: white;
  color: black;
}

　　注意一下，在列印樣式表中，字型大小是以點（pt）來計的。如果要指定螢幕顯示度量單位的話，象素比點和英尺更合適，而在列印中，情況卻恰好相反，人們採用的往往是前者。

　　另一方面，許多人建議使用一種有襯線的字型來取代人們在螢幕上廣泛使用的無襯線字型，我個人覺得這是一種逐項設計，因此，我不會自動轉換每個列印樣式表中的字型。

　　第三步：連結的樣式

　　對於列印輸出中的連結的處理，存在著兩種不同的看法，兩者各成一派。一種看法是，連結在紙張上並不發揮作用，因此，應該對它們進行一番設計，就像設計文本中其它部份一樣。另一種看法則認為，連結對於一個Web的結構來說至關重要，正由於它的重要性，在列印文本中，它應該清楚可見。

　　如果不考慮你的設計意圖，不管你是想突出連結還是讓它摻入到文本中，有一件事是無可置疑的，那就是你要改變普通的Web頁面和列印版之間的連結的樣式。由於普通連結與已訪問連結之間並沒有什麼區別，這樣你就可以將那兩個選取器合并起來，就像這樣：

　　a:link,a:visited {
  color: #3333CC;
  text-decoration: underline;
  font-weight: bold;
}

　　這個盒子將連結設為深藍色（在黑白印表機上則顯示為深灰色），粗體，有底線，這也是連結的一種最普通的無格式樣式，即白色背景上的黑色文本。

　　第四步：隱藏導覽列和工具條

　　設計師們設計一種與印表機聯絡緊密的頁面的目的之一在於，要通過消除主要頁面內容之外的那些東西，包括導覽列，廣告，工具條等。

　　在輸出中，導航按紐並不起什麼作用；而那些廣告也並沒有點擊進入功能，至於工具條，它為使用者提供一些相關資訊之間的連結，以此讓頁面內容更豐富，不過在列印輸出時，往往會適得其反，造成不必要的混亂。

　　要想將這些因素從該頁面中排除掉，關鍵在於在標記中將它們分隔開來，將它們分成一個個獨立的，但可分辨的div。例如，可以將導覽列分在一個名為navbar的div中，樣式如下：

　　div#navBar{
  margin: 0 79% 0 0;
  padding: 0px;
  background-color: #eeeeee;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}

　　你可以用以下的CSS，在該頁面中隱藏那個div的內容：

　　div#navBar {
  display: none;
}

　　在與印表機相串連的頁面中，你可以用同樣的方法來移動廣告，工具條，頁首，頁尾，動畫，多餘的圖片，以及其它一些不重要的部份。

　　第五步：設定寬度和頁邊空白

　　隱藏了那些不重要的部份之後，就該設計一下餘下的內容了，這樣才能讓它更便於列印。通常，主要內容都在一個div裡面，可能已被設計好了，這樣它就能與其它一些諸如導覽列和工具條的元件和平共處，共同分享一個螢幕了。

　　div#content{
  width: 75%;
  margin: 10px;
  padding: 10px 15px;
}

　　由於該頁面中其它那些元件都已經被排除了，現在我們所要做的，就是設定列印頁面中的div，就像這樣：

　　div#content{
  width: 100%;
  margin: 0pt;
  padding: 0pt;
}

　　設定寬度：100%，這種設定會填充頁面上可以列印的部分。當然，你還可以有其它選擇，你可以設一個特定的寬度（以英寸），然後採用頁邊空白和填料，這樣，你就可以更好地控制列印輸出，不過，如此一來，你就需要仔細考慮，小心測試，以確保你的設定對大多數印表機都有效。

　　第六步：讓內容不可浮動

　　有些瀏覽器列印浮動的div的過程中，會有一個麻煩，需要特別加以注意。例如，基於Gecko的瀏覽器（例如Netscape 6+），當使用者用它來瀏覽一個列印輸出頁面時，它會截去浮動元素中的內容。這些內容就不會被傳送到印表機，下一個頁面也不會有它的蹤影――它消失了。

　　值得慶幸的是，對於這個問題，有一個很方便的工作區。在你的列印頁面中的還保留著一些div，你僅僅只需移走這些div中的浮動物就行了。通常，在移走了工具條和導覽列之後，頁面配置看起來較簡潔，你也就不需要那些浮動物了。你可以使用與下面相類似的方法來移走浮動物：

　　div#content2{
  float: none;
}

　　第七步：檢查一下其它那些需要調整的樣式

　　當你完成了前面那些步驟以後，你要特別當心其中的主要變化，要使一個頁面與印表機緊密聯絡起來的話，這些變化是必須的。儘管如此，可能還是有一些會將使用者引入歧途的樣式，這些應該引起我們的注意。現在，你該啟用你的文檔和樣式表，好好整理一下那些零碎材料了。啟動瀏覽器的Print Preview功能，預覽一下你的列印媒體樣式表的效果。

　　本文作者： Michael Meadhra，自Web問世之初便涉足IT行業，目前已出版了30多本書，其中包括How to Do Everything with Dreamweaver MX（Osborne/McGraw-Hill出版）。