本節內容:
JQuery、CSS操作列印樣式。
一、新增列印樣式
1,為螢幕顯示和列印分別準備一個css文件,如下所示:
用於螢幕顯示的css:
用於列印的css:
2,import方式:
@media print裡面的內容只對列印出來的內容有效,以外的內容就是螢幕顯示的樣式。
其他:
建立一個不指定媒體類型的樣式表通常很有用(或利用media="all")。
當你準備好定義一些特別用於列印的規則時,可以只建立一個單獨的樣式表,使任何在列印時看起來不好的樣式都失效。
二、列印樣式註意事項:
1,列印樣式中不建議使用背景,因為瀏覽器預設並不能列印出CSS中的背景內容,只有當瀏覽器被設定可以列印背景的情況下才能列印出背面(ie的進階選項中可選)。
即使背景可以列印,它也可能蓋過疊在它上面的任何文字。
這是真的,尤其對於用彩色背景在顯示器上強烈對比的文本,但是在黑白印表機上列印時會融合這一背景。
可以利用background-color屬性設定背景顏色為白色,像這樣:background-color: white。
使用background的快捷法也可以獲得相同的效果:background: white。因此像background: white;
2,如果需要在列印內容中出現圖片,請在HTML程式碼中加入。
3,列印設定使用的是實體單位,所以尺寸最好不要用像素(px),可以用pt也可以用cm;
4,隱藏不需要的或是次要的內容。 display:none;
5,盡量不要讓內容浮動,有些瀏覽器列印浮動的div的過程中,會有一個麻煩,需要特別加以注意。
例如,基於Gecko的瀏覽器 (例如Netscap 6 ),當使用者用它來瀏覽一個列印輸出頁面時,它會截去浮動元素中的內容。
6,盡可能的在HTML程式碼中做好內容重要的先後序,這樣在列印樣式中可以節省不少的麻煩。
7,列印與網頁不一樣,列印一定要留下白邊,單位用英吋(in)。
8,要確保頁面上的所有文字以黑色列印,請使用通配選擇器(請參閱第54頁)和!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://開頭的那些),像這樣:
10,為列印加入分頁符號:兩個廣為認可的屬性是page-break-before和page-break-after。
page-break-before告訴網頁瀏覽器在一個指定樣式之前插入一個分頁符號。利用page-break-before屬性讓圖片列印在一張新頁面上,並且適合整張頁面。
要讓一個元素作為列印頁面上的最後一個項目顯示,就為那個元素的樣式加入:
page-break-after: always。
創建兩個類樣式,以類似於.break_after和.break_before的名字來命名,像這樣:
然後,可以選擇性地把這些樣式應用給應該印在網頁頂部或底部的元素。
三、測試列印樣式
通常,不可能用印表機來進行測試,在IE瀏覽器選單列“文件”中有“列印預覽”,可以透過這列印預覽來做測試。