使用jquery+CSS實現控制打印樣式_jquery

1. 為屏幕顯示和打印分別準備一個css文件，如下所示：
用于屏幕顯示的css：
用于打印的css：

2. import方式：

3. 直接把屏幕顯示樣式和打印樣式寫在一個css文件中：
@media print {}{
h1 {
color: black;
}
h2 {}{
color: gray;
}
}
@media print里面的內容只對打印出來的內容有效，之外的內容就是屏幕顯示的樣式。

其他：
創建一個不指定媒體類型的樣式表通常很有用（或者利用media="all"）。當你準備好定義一些特別用
于打印的規則時，可以只創建一個單獨的樣式表，使任何在打印時看起來不好的樣式都失效。使用這種方法的一個問題是必須確保打印機樣式實際上確實覆蓋了主樣式表。可以使用！important.

二、打印樣式注意事項：

1. 打印樣式中不推薦使用背景，因為瀏覽器默認情況下并不能打印出CSS中的背景內容，只有當瀏覽器被
設置可以打印背景的情況下才能打印出背（ie的高級選項中可選）。即使背景可以打印，它也可能蓋過疊在它上面的任何文本。
這是真的，尤其對于用彩色背景在顯示器上強烈對比的文本，但是在黑白打印機上打印時會融合這一背景。
background：none；去掉背景
圖片和顏色。

可以利用background-color屬性設置背景顏色為白色，像這樣： font-family: Arial; line-height: 26px;"> 使用background的快捷法也可以獲得相同的效果：background: white。因此像background: white;
這樣的聲明不僅設置了背景顏色為白色，而且消除了所有背景圖片。利用這個background的快捷屬性，
你實現了兩個目的——設置了一個白色背景，并消除了圖片——只用很少的代碼。

2. 如果需要在打印內容中出現圖片，請在HTML代碼中加入。

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

4. 隱藏不需要的或是次要的內容。display：none；

5. 盡量不要讓內容浮動，有些瀏覽器打印浮動的div的過程中，會有一個麻煩，需要特別加以注意。
不要在打印的樣式表中浮動的塊，像這樣：float: none;。例如，基于Gecko的瀏覽器
（例如Netscape 6+），當用戶用它來瀏覽一個打印輸出頁面時，它會截去浮動元素中的內容。
這些內容就不會被傳送到打印機，下一個頁面也不會有它的蹤影――它消失了。

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

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

8. 要確保頁面上的所有文本以黑色打印，就用通配選擇器（見第54頁）和!important來創建把每個
標簽都格式化為黑色文本的單個樣式：
*{ color: ##000# !important }

9. 在打印中顯示鏈接url的信息：利用一個高級的選擇器：after和一個高級的CSS屬性稱作content，
把不在屏幕上顯示的文本打印在一個樣式元素的末端。
不幸的是，:after選擇器和content屬性技巧在Internet Explorer 6或者更早的版本上不起作用
（到編寫本書為止，在IE 7上也不行）。但是它在Firefox和Safari上的確可以，因此你至少可以清楚
地說明URL以便訪問者可以使用他們的瀏覽器。

為了做到這點，給打印樣式表添加一個樣式，在每個鏈接后面打印出URL。你甚至可以添加其他文本項
目比如圓括號，使它更好看些：
a:after {content: " (" attr(href) ") ";}

然而，這個CSS不區分外部或者內部的鏈接，因此它也打印出到達同一個網站其他頁面的沒用的相對
文檔鏈接：“訪問主頁（../../index. html）。”利用一點點CSS 3魔法，就可以強制這個樣式只打
印絕對的URL（即以http://開頭的那些），像這樣：
a[href^="http://"]:after {content: " (" attr(href) ") ";}

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

創建兩個類樣式，以類似于.break_after和.break_before的名字來命名，像這樣：
.break_before { page-break-before: always; }
.break_after { page-break-after: always; }

然后你可以選擇性地把這些樣式應用給應該打印在網頁頂部或者底部的元素。

三、測試打印樣式

通常來說我們不可能用打印機來進行測試，在IE瀏覽器菜單欄“文件”中有“打印預覽”，可以通過這
打印預覽來做測試。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com