JQuery結(jié)合CSS操作打印樣式的方法
本節(jié)內(nèi)容:
JQuery、CSS操作打印樣式。
一、添加打印樣式
1,為屏幕顯示和打印分別準(zhǔn)備一個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里面的內(nèi)容只對打印出來的內(nèi)容有效,之外的內(nèi)容就是屏幕顯示的樣式。
其他:
創(chuàng)建一個不指定媒體類型的樣式表通常很有用(或者利用media="all")。
當(dāng)你準(zhǔn)備好定義一些特別用于打印的規(guī)則時,可以只創(chuàng)建一個單獨(dú)的樣式表,使任何在打印時看起來不好的樣式都失效。
使用這種方法的一個問題是必須確保打印機(jī)樣式實(shí)際上確實(shí)覆蓋了主樣式表。可以使用!important.
二、打印樣式注意事項(xiàng):
1,打印樣式中不推薦使用背景,因?yàn)闉g覽器默認(rèn)情況下并不能打印出CSS中的背景內(nèi)容,只有當(dāng)瀏覽器被設(shè)置可以打印背景的情況下才能打印出背(ie的高級選項(xiàng)中可選)。
即使背景可以打印,它也可能蓋過疊在它上面的任何文本。
這是真的,尤其對于用彩色背景在顯示器上強(qiáng)烈對比的文本,但是在黑白打印機(jī)上打印時會融合這一背景。
background:none;去掉背景 圖片和顏色。
可以利用background-color屬性設(shè)置背景顏色為白色,像這樣:background-color: white。
使用background的快捷法也可以獲得相同的效果:background: white。因此像background: white;
這樣的聲明不僅設(shè)置了背景顏色為白色,而且消除了所有背景圖片。利用這個background的快捷屬性, 你實(shí)現(xiàn)了兩個目的——設(shè)置了一個白色背景,并消除了圖片——只用很少的代碼。
2,如果需要在打印內(nèi)容中出現(xiàn)圖片,請?jiān)贖TML代碼中加入。
3,打印設(shè)置使用的是物理單位,所以尺寸最好不要用像素(px),可以用pt也可以用cm;
4,隱藏不需要的或是次要的內(nèi)容。display:none;
5,盡量不要讓內(nèi)容浮動,有些瀏覽器打印浮動的div的過程中,會有一個麻煩,需要特別加以注意。
不要在打印的樣式表中浮動的塊,像這樣:float: none;。
例如,基于Gecko的瀏覽器 (例如Netscap 6+),當(dāng)用戶用它來瀏覽一個打印輸出頁面時,它會截去浮動元素中的內(nèi)容。
這些內(nèi)容就不會被傳送到打印機(jī),下一個頁面也不會有它的蹤影――它消失了。
6,盡可能的在HTML代碼中做好內(nèi)容重要的先后次序,這樣在打印樣式中可以節(jié)省不少的麻煩。
7,打印與網(wǎng)頁不一樣,打印一定要留下白邊,單位用英寸(in)。
8,要確保頁面上的所有文本以黑色打印,就用通配選擇器(見第54頁)和!important來創(chuàng)建把每個 標(biāo)簽都格式化為黑色文本的單個樣式:
*{ color: ##000# !important }
9,在打印中顯示鏈接url的信息:
利用一個高級的選擇器:after和一個高級的CSS屬性稱作content, 把不在屏幕上顯示的文本打印在一個樣式元素的末端。
存在的問題:
after選擇器和content屬性技巧在Internet Explorer 6或更早的版本上不起作用(在IE 7上也不行)。
但是它在Firefox和Safari上的確可以,因此至少可以清楚地說明URL以便訪問者可以使用他們的瀏覽器。
為了做到這點(diǎn),給打印樣式表添加一個樣式,在每個鏈接后面打印出URL。你甚至可以添加其他文本項(xiàng)目比如圓括號,使它更好看些:
a:after {content: " (" attr(href) ") ";}
然而,這個CSS不區(qū)分外部或者內(nèi)部的鏈接,因此它也打印出到達(dá)同一個網(wǎng)站其他頁面的沒用的相對文檔鏈接:“訪問主頁(../../index. html)?!崩靡稽c(diǎn)點(diǎn)CSS 3魔法,就可以強(qiáng)制這個樣式只打印絕對的URL(即以http://開頭的那些),像這樣:
a[href^="http://"]:after {content: " (" attr(href) ") ";}
10,給打印添加分頁符:兩種被廣泛認(rèn)可的屬性是page-break-before和page-break-after。
page-break-before告訴網(wǎng)頁瀏覽器在一個指定樣式之前插入一個分頁符。利用page-break-before屬性使圖片打印在一張新頁面上,并且適合整張頁面。
要使一個元素作為打印頁上的最后一個項(xiàng)目顯示,就給那個元素的樣式添加:
page-break-after: always。
創(chuàng)建兩個類樣式,以類似于.break_after和.break_before的名字來命名,像這樣:
.break_before { page-break-before: always; }
.break_after { page-break-after: always; }
然后,可以選擇性地把這些樣式應(yīng)用給應(yīng)該打印在網(wǎng)頁頂部或底部的元素。
三、測試打印樣式
通常,不可能用打印機(jī)來進(jìn)行測試,在IE瀏覽器菜單欄“文件”中有“打印預(yù)覽”,可以通過這打印預(yù)覽來做測試。
相關(guān)文章
Tab切換組件(選項(xiàng)卡功能)實(shí)例代碼
這篇文章主要介紹了一個簡單的Tab切換組件實(shí)例,大家可以參考使用2013-11-11
jquery中map函數(shù)遍歷數(shù)組用法實(shí)例
這篇文章主要介紹了jquery中map函數(shù)遍歷數(shù)組用法,實(shí)例分析了jQuery中map函數(shù)遍歷數(shù)組的相關(guān)技巧,并提供了一個自定義遍歷數(shù)組函數(shù)供參考之用,需要的朋友可以參考下2015-05-05
基于Datatables跳轉(zhuǎn)到指定頁的簡單實(shí)例
下面小編就為大家?guī)硪黄贒atatables跳轉(zhuǎn)到指定頁的簡單實(shí)例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
jQuery插件ImageDrawer.js實(shí)現(xiàn)動態(tài)繪制圖片動畫(附源碼下載)
ImageDrawer.js是一款可以實(shí)現(xiàn)動態(tài)繪制圖片動畫的jQuery插件,接下來通過本文給大家介紹jQuery插件ImageDrawer.js實(shí)現(xiàn)動態(tài)繪制圖片動畫(附源碼下載),需要的朋友參考下2016-02-02
jquery實(shí)現(xiàn)通用的內(nèi)容漸顯Tab選項(xiàng)卡效果
這篇文章主要介紹了jquery實(shí)現(xiàn)通用的內(nèi)容漸顯Tab選項(xiàng)卡效果,涉及jquery通過時間函數(shù)定時觸發(fā)頁面元素樣式變換的功能,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09
jquery實(shí)現(xiàn)可自動收縮的TAB網(wǎng)頁選項(xiàng)卡代碼
這篇文章主要介紹了jquery實(shí)現(xiàn)可自動收縮的TAB網(wǎng)頁選項(xiàng)卡代碼,涉及jquery鼠標(biāo)事件及頁面元素樣式變換的實(shí)現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09
從JavaScript 到 JQuery (1)學(xué)習(xí)小結(jié)
本人使用JavaScript 已經(jīng)有2年左右的時間了,一直被它簡潔優(yōu)雅的代碼所吸引, 近期接觸了 JQuery這個庫 , 感覺還不錯, 但是并不意味著要舍棄 JavaScript , 而是更宣揚(yáng)結(jié)合使用 .2009-02-02

