通過重定義CSS實現(xiàn)網(wǎng)頁內(nèi)容完美打印輸出

　　考試吧軟考站整理：雖說已是互聯(lián)網(wǎng)無所不能的時代，但還是會需要將網(wǎng)頁內(nèi)容打印出來閱讀。對于網(wǎng)生的電子報、電子期刊這些更適合于在網(wǎng)絡(luò)環(huán)境中閱讀的內(nèi)容，怎樣通過打印輸出生成適當(dāng)?shù)募埫巾撁婺�？長時間來，這一直是一個課題。為了寫如下這篇博文，對相關(guān)問題進(jìn)行了深入思考，并為Bits O‘ NewMedia網(wǎng)站編寫了適于打印輸出的樣式表，現(xiàn)將相關(guān)經(jīng)驗分享給大家。

　　設(shè)定適于打印輸出的樣式表

　　這并不象想象中那么難，第一步要做的是復(fù)制原用的CSS文件，將其命名為print_style.css，接下來，就是要在其首行加入語句

　　<link rel="stylesheet" type="text/css" media="print" href="print_style.css" />

　　我們看到，這一條語句惟一特別的地方在于，media參數(shù)被賦值為"print"。而如果在頁面內(nèi)加入了這樣的一條語句，那么再執(zhí)行file>>print（文件>>打�。┲噶顣r，print_style.css樣式表就會替代原有的樣式表被調(diào)用。

　　注意：如果是IE6或是Firefox用戶，就一定要將網(wǎng)絡(luò)鏈接標(biāo)記樣式中的media參數(shù)賦值為 "screen"，否則，打印出來的頁面內(nèi)容會發(fā)生出血的問題，以及其他一些問題。IE7用戶就不用擔(dān)心了。

　　完善頁面的主體部分

　　現(xiàn)在，我們來調(diào)整一下頁面主體相關(guān)的參數(shù)。一般情況下，網(wǎng)頁的主體部分都會有背景色或是背景圖案。我們現(xiàn)在就要將背景去除，以確保打印出來的頁面相對整潔。當(dāng)然，多數(shù)瀏覽器默認(rèn)支持在打印時自動去除背景，但還是要手動調(diào)整一下來得保險。

　　同時，還要考慮為將打印樣式表中的color參數(shù)賦值為#000或"black"。彩色的文字在網(wǎng)頁上看起來固然很眩，但要輸出如此色彩眩麗的頁面，就會耗費相當(dāng)昂貴的墨水。

　　接下來，我們要調(diào)整的就是margin參數(shù)了，系統(tǒng)默認(rèn)的頁邊距設(shè)置一般都會比較小，我們現(xiàn)在試著為左、右邊距各增加3em，可以通過語句margin 0em 3em 0em 3em來實現(xiàn)。

　　調(diào)整分欄版式參數(shù)

　　我們都知道，并不是所有的網(wǎng)頁內(nèi)容都有必要打印出來的，比如說導(dǎo)航條，在網(wǎng)頁上是必要信息，但打印出來就純屬浪費頁面了。這時，我們就需要在打印樣式表中對那些沒有必要打印出來的選項，添加屬性"display: none"。

　　同時，為了讓所有的內(nèi)容都完美地垂直排列在打印出的頁面上，而不是一個接一個地堆在頁面上，就需要對每一個必打項的float參數(shù)賦數(shù)為"none"，或干脆直接將float參數(shù)項刪去。

　　還要為每一個必打項的width參數(shù)賦值為"auto"。這樣，對于利用div標(biāo)記對頁面進(jìn)行了分欄的時候，就可以確保分欄的內(nèi)容能夠自動填滿頁面。以下為打印樣式表的編寫內(nèi)容示例

　　div.template_fill_wrapper_top{

　　display: none;

　　}

　　div.template_fill_wrapper_middle{

　　margin: 0;

　　width: auto;

　　text-align: center;

　　clear: both;

　　} |||　　In the web stylesheet

　　div.template_fill_wrapper_top{

　　overflow:hidden;

　　text-align:center;

　　background-color: #313131;

　　height: 48px;

　　overflow: hidden;

　　}

　　div.template_fill_wrapper_middle{

　　margin: 0 auto;

　　text-align: left;

　　padding-top:10px;

　　clear:both;

　　}

　　PX參數(shù)下課，Em及PT上位

　　一般情況下，在為網(wǎng)頁編寫樣式表時，針對間距、寬、高、頁邊距及字體大小等參數(shù)，我們習(xí)慣用pixel或em度量單位。這主要是由于數(shù)碼顯示器一般是采用像素及字符寬度為顯示單位的。而對于打印機來說，像素單位就不好使了，需要將原來使用像素單位的間距、寬、高、頁邊距等值轉(zhuǎn)換為em單位值；而字體大小則需被轉(zhuǎn)換為磅值（建議將字體大小設(shè)置在9pt～11pt之間）。

　　以下即為Bits O‘ NewMedia網(wǎng)站的打印樣式表示例

　　body {

　　margin: 0em 3em 0em 3em;

　　padding: 0;

　　border: 0;

　　color: black;

　　background: white;

　　font: normal 10pt "Bakersville Old Face", "Times New Roman", Times, serif;

　　text-align: left;

　　}

　　成果驗收

　　要使每一位網(wǎng)站用戶都有一個好的體驗，作為力求完美的網(wǎng)站建設(shè)者，就要經(jīng)歷無數(shù)次的試驗、失敗、調(diào)整、再試驗......我們堅信這樣做的結(jié)果一定會為你帶來無限成就感。

　　如下所示為Bits O‘ NewMedia網(wǎng)站中某一篇文章的打印效果預(yù)覽截圖，你也可以通過以上的打印樣式表調(diào)整步驟，打印出理想的頁面來。

　　Wish you every success!