本節(jié)內(nèi)容：
JQuery、CSS操作打印樣式。

一、添加打印樣式

1，為屏幕顯示和打印分別準(zhǔn)備一個(gè)css文件，如下所示：
  用于屏幕顯示的css：

用于打印的css：

2，import方式：

3，直接把屏幕顯示樣式和打印樣式寫在一個(gè)css文件中：

@media print里面的內(nèi)容只對(duì)打印出來(lái)的內(nèi)容有效，之外的內(nèi)容就是屏幕顯示的樣式。

其他：
創(chuàng)建一個(gè)不指定媒體類型的樣式表通常很有用（或者利用media="all"）。
當(dāng)你準(zhǔn)備好定義一些特別用于打印的規(guī)則時(shí)，可以只創(chuàng)建一個(gè)單獨(dú)的樣式表，使任何在打印時(shí)看起來(lái)不好的樣式都失效。
使用這種方法的一個(gè)問(wèn)題是必須確保打印機(jī)樣式實(shí)際上確實(shí)覆蓋了主樣式表?？梢允褂?！important.

二、打印樣式注意事項(xiàng)：

1，打印樣式中不推薦使用背景，因?yàn)闉g覽器默認(rèn)情況下并不能打印出CSS中的背景內(nèi)容，只有當(dāng)瀏覽器被設(shè)置可以打印背景的情況下才能打印出背（ie的高級(jí)選項(xiàng)中可選）。
即使背景可以打印，它也可能蓋過(guò)疊在它上面的任何文本。
  這是真的，尤其對(duì)于用彩色背景在顯示器上強(qiáng)烈對(duì)比的文本，但是在黑白打印機(jī)上打印時(shí)會(huì)融合這一背景。
  background：none；去掉背景 圖片和顏色。

可以利用background-color屬性設(shè)置背景顏色為白色，像這樣：background-color: white。
使用background的快捷法也可以獲得相同的效果：background: white。因此像background: white;
這樣的聲明不僅設(shè)置了背景顏色為白色，而且消除了所有背景圖片。利用這個(gè)background的快捷屬性， 你實(shí)現(xiàn)了兩個(gè)目的——設(shè)置了一個(gè)白色背景，并消除了圖片——只用很少的代碼。

2，如果需要在打印內(nèi)容中出現(xiàn)圖片，請(qǐng)?jiān)贖TML代碼中加入。

3，打印設(shè)置使用的是物理單位，所以尺寸最好不要用像素(px)，可以用pt也可以用cm；

4，隱藏不需要的或是次要的內(nèi)容。display：none；

5，盡量不要讓內(nèi)容浮動(dòng)，有些瀏覽器打印浮動(dòng)的div的過(guò)程中，會(huì)有一個(gè)麻煩，需要特別加以注意。
不要在打印的樣式表中浮動(dòng)的塊，像這樣：float: none;。

例如，基于Gecko的瀏覽器 （例如Netscap 6+），當(dāng)用戶用它來(lái)瀏覽一個(gè)打印輸出頁(yè)面時(shí)，它會(huì)截去浮動(dòng)元素中的內(nèi)容。
這些內(nèi)容就不會(huì)被傳送到打印機(jī)，下一個(gè)頁(yè)面也不會(huì)有它的蹤影――它消失了。

6，盡可能的在HTML代碼中做好內(nèi)容重要的先后次序，這樣在打印樣式中可以節(jié)省不少的麻煩。

7，打印與網(wǎng)頁(yè)不一樣，打印一定要留下白邊，單位用英寸(in)。

8，要確保頁(yè)面上的所有文本以黑色打印，就用通配選擇器（見(jiàn)第54頁(yè)）和!important來(lái)創(chuàng)建把每個(gè) 標(biāo)簽都格式化為黑色文本的單個(gè)樣式：

9，在打印中顯示鏈接url的信息：
利用一個(gè)高級(jí)的選擇器：after和一個(gè)高級(jí)的CSS屬性稱作content，  把不在屏幕上顯示的文本打印在一個(gè)樣式元素的末端。

存在的問(wèn)題：
after選擇器和content屬性技巧在Internet Explorer 6或更早的版本上不起作用（在IE 7上也不行）。
但是它在Firefox和Safari上的確可以，因此至少可以清楚地說(shuō)明URL以便訪問(wèn)者可以使用他們的瀏覽器。

為了做到這點(diǎn)，給打印樣式表添加一個(gè)樣式，在每個(gè)鏈接后面打印出URL。你甚至可以添加其他文本項(xiàng)目比如圓括號(hào)，使它更好看些：
  a:after {content: " (" attr(href) ") ";}
   然而，這個(gè)CSS不區(qū)分外部或者內(nèi)部的鏈接，因此它也打印出到達(dá)同一個(gè)網(wǎng)站其他頁(yè)面的沒(méi)用的相對(duì)文檔鏈接：“訪問(wèn)主頁(yè)（../../index. html）?！崩靡稽c(diǎn)點(diǎn)CSS 3魔法，就可以強(qiáng)制這個(gè)樣式只打印絕對(duì)的URL（即以http://開(kāi)頭的那些），像這樣：

10，給打印添加分頁(yè)符：兩種被廣泛認(rèn)可的屬性是page-break-before和page-break-after。
  page-break-before告訴網(wǎng)頁(yè)瀏覽器在一個(gè)指定樣式之前插入一個(gè)分頁(yè)符。利用page-break-before屬性使圖片打印在一張新頁(yè)面上，并且適合整張頁(yè)面。
  要使一個(gè)元素作為打印頁(yè)上的最后一個(gè)項(xiàng)目顯示，就給那個(gè)元素的樣式添加：
  page-break-after: always。

創(chuàng)建兩個(gè)類樣式，以類似于.break_after和.break_before的名字來(lái)命名，像這樣：

然后，可以選擇性地把這些樣式應(yīng)用給應(yīng)該打印在網(wǎng)頁(yè)頂部或底部的元素。

三、測(cè)試打印樣式
通常，不可能用打印機(jī)來(lái)進(jìn)行測(cè)試，在IE瀏覽器菜單欄“文件”中有“打印預(yù)覽”，可以通過(guò)這打印預(yù)覽來(lái)做測(cè)試。

最新評(píng)論