JQuery結合CSS操作列印樣式的方法

JQuery結合CSS操作列印樣式的方法

 這篇文章主要介紹了JQuery結合CSS操作列印樣式的方法，有需要的朋友可以參考一下

本節內容：

JQuery、CSS操作列印樣式。

 

一、添加列印樣式

 

1，為螢幕顯示和列印分別準備一個css檔案，如下所示：

  用於螢幕顯示的css：

 

 代碼如下:

<link rel="stylesheet" href="css/mainstylesheet.css" media="screen" />

 

 

用於列印的css：

 

 代碼如下:

<link rel="stylesheet" href="css/printstylesheet.css" media="print" />

 

 

2，import方式：

 

 代碼如下:

 <style type="text/css">

      @import url("css/printstylesheet.css") print;

  </style>

 

 

3，直接把螢幕顯示樣式和列印樣式寫在一個css檔案中：

 

 

複製代碼 代碼如下:

@media print {}{

    h1 {

      color: black;

    }

    h2 {}{

      color: gray;

    }

  }

 

 

@media print裡面的內容只對列印出來的內容有效，之外的內容就是螢幕顯示的樣式。

 

其他：

建立一個不指定媒體類型的樣式表通常很有用（或者利用media="all"）。

當你準備好定義一些特別用於列印的規則時，可以只建立一個單獨的樣式表，使任何在列印時看起來不好的樣式都失效。

使用這種方法的一個問題是必須確保印表機樣式實際上確實覆蓋了主樣式表。可以使用！important.

 

二、列印樣式注意事項：

 

1，列印樣式中不推薦使用背景，因為瀏覽器預設情況下並不能列印出CSS中的背景內容，只有當瀏覽器被設定可以列印背景的情況下才能列印出背（ie的進階選項中可選）。

即使背景可以列印，它也可能蓋過疊在它上面的任何文本。

  這是真的，尤其對於用彩色背景在顯示器上強烈對比的文本，但是在黑白印表機上列印時會融合這一背景。

  background：none；去掉背景 圖片和顏色。

 

可以利用background-color屬性設定背景顏色為白色，像這樣：background-color: white。

使用background的快捷法也可以獲得相同的效果：background: white。因此像background: white;

這樣的聲明不僅設定了背景顏色為白色，而且消除了所有背景圖片。利用這個background的快捷屬性， 你實現了兩個目的——設定了一個白色背景，並消除了圖片——只用很少的代碼。 

 

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

 

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

 

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

 

5，盡量不要讓內容浮動，有些瀏覽器列印浮動的div的過程中，會有一個麻煩，需要特別加以注意。

不要在列印的樣式表中浮動的塊，像這樣：float: none;。

 

例如，基於Gecko的瀏覽器 （例如Netscap 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瀏覽器功能表列“檔案”中有“預覽列印”，可以通過這預覽列印來做測試。