如何用 CSS定義WEB打印樣式

CSS控制網(wǎng)頁(yè)打印樣式：

成都創(chuàng)新互聯(lián)公司長(zhǎng)期為1000+客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為林口企業(yè)提供專業(yè)的成都網(wǎng)站制作、做網(wǎng)站，林口網(wǎng)站改版等技術(shù)服務(wù)。擁有十載豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。

使用CSS控制打印樣式，剛剛使用時(shí)一塌糊涂，根本不知道CSS中的midia的作用是什么，問到別人說(shuō)導(dǎo)入這個(gè)樣式，還傻乎乎的不知所措。

如果你也有這種現(xiàn)象，那么我告訴你吧，在W3school查到CSS的midia的作用。

link rel="stylesheet" media="print" type="text/css" href="print.css" /

style midia="print"http://midia必須聲明，不然無(wú)效了

#my_hidden{display:none;}

/style

如何使用CSS控制網(wǎng)頁(yè)打印頁(yè)面格式?

由于客戶要求，打印時(shí)需把打印的按鈕去掉。這個(gè)時(shí)候就用到了控制打印的樣式表了。 link rel=”stylesheet” type=”text/css” media=”print” href=”print.css” / 正因?yàn)閤html和css是分離的，所以我們可以在print.css里自由書寫需要打印顯示的內(nèi)容和表現(xiàn)形式。那么這也要求我們?cè)跁鴮憍html的時(shí)候更 多考慮到打印顯示效果的需求，良好的擴(kuò)展標(biāo)記和結(jié)構(gòu)嵌套，使得我們輕松的使用display:none將內(nèi)容設(shè)置為不顯示。然后就是去書寫 print.css內(nèi)容的時(shí)候了，你象設(shè)置word一樣去寫你想打印的頁(yè)面吧。 后來(lái)想了想，其實(shí)單獨(dú)寫一個(gè)css增加了請(qǐng)求次數(shù)，就想到了@media print{}的作用，代碼如下 @media print{ .printdesc { right: 0; width: 685px; height: 69px; background-color: #FFFFFF; float:left; overflow:auto; border:0px; } .text{ float:right; width: 688px; margin-top:20px; } .printlink{ height:0px; display:none; width:0px; z-index:-10; } .printlink a{ display:none; } } 后來(lái)想到如果打印頁(yè)面的某一部分，可以使用iframe來(lái)進(jìn)行操作，現(xiàn)在的打印頁(yè)面的局部?jī)?nèi)容基本上就是使用iframe進(jìn)行處理。

寫的css樣式怎么按照尺寸打印出來(lái)

一、添加打印樣式

1. 為屏幕顯示和打印分別準(zhǔn)備一個(gè)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. 直接把屏幕顯示樣式和打印樣式寫在一個(gè)css文件中：

@media print {}{

h1 {

color: black;

}

h2 {}{

color: gray;

}

}

@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è)問題是必須確保打印機(jī)樣式實(shí)際上確實(shí)覆蓋了主樣式表。可以使用！important.

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

1. 打印樣式中不推薦使用背景，因?yàn)闉g覽器默認(rèn)情況下并不能打印出CSS中的背景內(nèi)容，只有當(dāng)瀏覽器被

設(shè)置可以打印背景的情況下才能打印出背（ie的高級(jí)選項(xiàng)中可選）。即使背景可以打印，它也可能蓋過疊在它上面的任何文本。

這是真的，尤其對(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的過程中，會(huì)有一個(gè)麻煩，需要特別加以注意。

不要在打印的樣式表中浮動(dòng)的塊，像這樣：float: none;。例如，基于Gecko的瀏覽器

（例如Netscape 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è)面上的所有文本以黑色打印，就用通配選擇器（見第54頁(yè)）和!important來(lái)創(chuàng)建把每個(gè)

標(biāo)簽都格式化為黑色文本的單個(gè)樣式：

*{ color: ##000# !important }

9. 在打印中顯示鏈接url的信息：利用一個(gè)高級(jí)的選擇器：after和一個(gè)高級(jí)的CSS屬性稱作content，

把不在屏幕上顯示的文本打印在一個(gè)樣式元素的末端。

不幸的是，:after選擇器和content屬性技巧在Internet Explorer 6或者更早的版本上不起作用

（到編寫本書為止，在IE 7上也不行）。但是它在Firefox和Safari上的確可以，因此你至少可以清楚

地說(shuō)明URL以便訪問者可以使用他們的瀏覽器。

為了做到這點(diǎn)，給打印樣式表添加一個(gè)樣式，在每個(gè)鏈接后面打印出URL。你甚至可以添加其他文本項(xiàng)

目比如圓括號(hào)，使它更好看些：

a:after {content: " (" attr(href) ") ";}

然而，這個(gè)CSS不區(qū)分外部或者內(nèi)部的鏈接，因此它也打印出到達(dá)同一個(gè)網(wǎng)站其他頁(yè)面的沒用的相對(duì)

文檔鏈接：“訪問主頁(yè)（../../index. html）。”利用一點(diǎn)點(diǎn)CSS 3魔法，就可以強(qiáng)制這個(gè)樣式只打

印絕對(duì)的URL（即以http://開頭的那些），像這樣：

a[href^="http://"]:after {content: " (" attr(href) ") ";}

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)命名，像這樣：

.break_before { page-break-before: always; }

.break_after { page-break-after: always; }

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

三、測(cè)試打印樣式

通常來(lái)說(shuō)我們不可能用打印機(jī)來(lái)進(jìn)行測(cè)試，在IE瀏覽器菜單欄“文件”中有“打印預(yù)覽”，可以通過這

打印預(yù)覽來(lái)做測(cè)試。

怎樣使用 css 的@media print控制打印

IE打印設(shè)置中默認(rèn)的頁(yè)眉和頁(yè)腳的含義，而且可以對(duì)上述代碼進(jìn)行組合使用來(lái)設(shè)置自己喜歡的打印設(shè)置。這里我們所要說(shuō)的并不單單是這些，大家設(shè)想一下我們開發(fā)了一個(gè)基于B/S結(jié)構(gòu)的系統(tǒng)，其中有報(bào)表的部分，我們不能讓每個(gè)客戶端都自己去設(shè)置IE的打印設(shè)置，因此我們需要在程序中控制這些設(shè)置。下面我們用VBScript腳本寫一個(gè)函數(shù)通過修改注冊(cè)表鍵值來(lái)達(dá)到控制頁(yè)面設(shè)置的目的，代碼如下：

script language="VBScript"

dim path, reg

'path存放IE打印設(shè)置的注冊(cè)表地址, reg存放WScript.Shell組件的對(duì)象

path = "HKEY_CURRENT_USER\Software\Micro-soft\Internet Explorer\PageSetup"

'通過注冊(cè)表修改打印設(shè)置，只修改頁(yè)眉、頁(yè)腳和各邊界的值

'參數(shù)說(shuō)明：header--頁(yè)眉，footer--頁(yè)腳，margin_left--左邊界

'margin_top--上邊界，margin_right--右邊界，margin_bottom--下邊界

'頁(yè)邊距的設(shè)置中 1對(duì)應(yīng)25.4mm，即margin_left=1表示實(shí)際值的25.4mm

function pagesetup(header, footer, margin_left, margin_top, margin_right, margin_bottom)

On Error Resume Next

Set reg = CreateObject("WScript.Shell")

if err.Number0 then

MsgBox "不能創(chuàng)建WScript.Shell對(duì)象！"

exit function

end if

reg.RegWrite path+"\header", header'設(shè)置頁(yè)眉

reg.RegWrite path+"\footer", footer '設(shè)置頁(yè)腳

reg.RegWrite path+"\margin_left", margin_left'設(shè)置左邊界

reg.RegWrite path+"\margin_top", margin_top'設(shè)置上邊界

reg.RegWrite path+"\margin_right", margin_right'設(shè)置右邊界

reg.RegWrite path+"\margin_bottom", margin_bottom'設(shè)置下邊界

end function

/script

程序中可以再寫一個(gè)函數(shù)（可用VBscript或javascript腳本寫）先調(diào)用該函數(shù)，然后再調(diào)用window.print()實(shí)現(xiàn)打印，這里就不給出代碼了。細(xì)心的讀者一定發(fā)現(xiàn)了這樣打印出來(lái)的頁(yè)面會(huì)有打印按鈕在上面，而且分頁(yè)是IE打印控件根據(jù)紙張大小分出來(lái)的，下面我們介紹一種方法來(lái)控制分頁(yè)和打印按鈕的顯示。該方法是利用CSS樣式表來(lái)控制這些設(shè)置，因?yàn)樵跇邮奖碇杏幸粋€(gè)“media=print”屬性，該屬性只有在打印的時(shí)候才會(huì)起作用，因此可以實(shí)現(xiàn)對(duì)打印按鈕和分頁(yè)的控制，具體做法如下：

style media=print

.noprint{display:none;}

.pagenext{page-break-after: always;}

/style

只要在打印按鈕中加入代碼class="noprint"，而在需要分頁(yè)的地方加入代碼 div class="pagenext" /div就可以了。到目前為止我們的打印功能已經(jīng)比較完善了，但是還沒有打印預(yù)覽和直接打印的功能，一般用戶在打印之前都會(huì)預(yù)覽一下，如果沒有問題就直接打印了。下面我們通過IEWebBrowser組件來(lái)實(shí)現(xiàn)這兩個(gè)功能。

首先創(chuàng)建IEWebBrowser對(duì)象：

object id=WebBrowser classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 width=0 height=0 /object

然后通過不同參數(shù)調(diào)用ExecWB方法實(shí)現(xiàn)打印預(yù)覽和直接打印功能：

WebBrowser.ExecWB(6,1); //打印

WebBrowser.ExecWB(6,6); //直接打印

WebBrowser.ExecWB(7,1); //打印預(yù)覽

網(wǎng)頁(yè)打印樣式CSS該如何操作

套正常的css網(wǎng)頁(yè)展示的樣式，另一套專門給打印的時(shí)候用的CSS樣式，只要用戶打印，就會(huì)通過媒體查詢自動(dòng)用打印的專門樣式。這樣，既可以在瀏覽器很好展示效果，也不影響具體打印出來(lái)的效果。

正常瀏覽器用的樣式

link rel="stylesheet" type="text/css" media="screen" href="/css/styles.css" /專門打印用的樣式link rel="stylesheet" type="text/css" media="print" href="/css/print.css" /

其中media指定的屬性就是設(shè)備，顯示器上就是screen，打印機(jī)則是print，電視是tv，投影儀是projection。

CSS 打印

2017-01-31

本文主要講解如何使用 CSS 控制打印樣式。

使用 CSS 可以控制文檔如何正確的顯示在不同的媒介 (Media) 上。其中分頁(yè)媒介 (Paged Media) ，不同于連續(xù)媒介 (Continuous Media)，它可以控制文檔內(nèi)容，將其分隔至一個(gè)或多個(gè)不相關(guān)聯(lián)的頁(yè)面 (如：書、幻燈片)。

頁(yè)面 (Page Sheet) 是物理介質(zhì) (如：紙張) 的表面，它包含可打印區(qū)域 (Printable Areas) 和不可打印區(qū)域 (Non-printable Areas)。用戶代理可以調(diào)整文檔內(nèi)容的格式，使其顯示在可打印區(qū)域。

頁(yè)面盒子 (Page Box) 是一個(gè)由長(zhǎng)邊 (Long Edge) 和短邊 (Short Edge) 組成的矩形。長(zhǎng)邊的方向決定了頁(yè)面朝向 (Page Orientation)，長(zhǎng)邊是垂直方向，則頁(yè)面朝向?yàn)榭v向 (Portrait Orientation)，反之為橫向 (Landscape Orientation)。

CSS 打印無(wú)法指定文檔是否為雙面打印 (Duplex Printing)，是否雙面打印應(yīng)該通過用戶代理指定。不管是否雙面打印，CSS 打印總是包含左頁(yè)和右頁(yè) (分別通過 :left , :right 指定) 。（或者說(shuō) CSS 打印假定所有文檔是雙面打印）

和 CSS 盒子模型一樣，頁(yè)面盒子模型由外邊距 (margin)、邊框 (border)、內(nèi)邊距 (padding) 和 內(nèi)容區(qū)域 (content area) 構(gòu)成。

其中內(nèi)容區(qū)域和外邊距有著特殊的功能：

頁(yè)面進(jìn)度 (Page Progression)方向 是文檔被分隔后的頁(yè)面的排列方向。比如：現(xiàn)代中文頁(yè)面進(jìn)度多是從左至右；而古代中文的頁(yè)面進(jìn)度則相反。可以通過設(shè)置根元素 (root element) 的 direction 和 writing-mode 屬性來(lái)改變頁(yè)面進(jìn)度。

頁(yè)面的“第一頁(yè)”是左頁(yè)還是右頁(yè)，可以由頁(yè)面進(jìn)度的方向決定，當(dāng)頁(yè)面進(jìn)度方向?yàn)閺淖笾劣視r(shí)，第一頁(yè)是右頁(yè)；反之為左頁(yè)。（事實(shí)上也可以通過設(shè)置根元素的 break-before 屬性來(lái)強(qiáng)制改變第一頁(yè)是左頁(yè)還是右頁(yè)）

在 CSS 中使用 @media print

在 CSS 中使用 @import

在 HTML 中使用 link 標(biāo)簽

在 @media print 或 my-print-style.css 中，可以自由的修改大部分樣式。

使用打印媒介查詢可以自定義很多樣式，當(dāng)希望改變頁(yè)面大小、邊距等，就需要用到 @page 了。頁(yè)面上下文 (Page Context) 中僅支持部分 CSS 屬性，支持的屬性有： margin 、 size 、 marks 、 bleed 以及頁(yè)面外邊距盒子等，不支持的屬性將會(huì)被忽略。

注：常見瀏覽器都不支持該屬性，推薦使用 Prince

頁(yè)面的外邊距被分成了 16 個(gè)頁(yè)面外邊距盒子。每個(gè)外邊距盒子都有自己的外邊距、邊框、內(nèi)邊距和內(nèi)容區(qū)域。頁(yè)面外邊距盒子用于創(chuàng)建頁(yè)眉和頁(yè)腳，頁(yè)眉和頁(yè)腳是頁(yè)面的一部分，用于補(bǔ)充信息，如頁(yè)碼或標(biāo)題。

頁(yè)面外邊距盒子需要在 @page 下使用，使用起來(lái)和偽類類似，也包含 content 屬性。

margin 系列屬性（ margin-top 、 margin-right 、 margin-bottom 、 margin-left 和 margin ）用于指定頁(yè)面外邊距大小。

在 CSS2.1 中，頁(yè)面上下文中只支持 margin 系列屬性。而且因?yàn)?CSS2.1 的頁(yè)面上下文中沒有字體的概念， margin 系列屬性的值的單位不支持 em 和 ex 。

size 屬性支持 auto 、 landscape 、 portrait 、 length{1,2} 和 page-size 。

頁(yè)面上下文也支持使用偽類，其中支持的偽類有： :left 、 :right 、 :first 和 :blank 。

需要雙面打印時(shí)，通常需要將左頁(yè)和右頁(yè)設(shè)置不同的樣式（如頁(yè)邊距、頁(yè)碼位置）。這時(shí)左頁(yè)和右頁(yè)可以分別用 :left 和 :right 表示。再次強(qiáng)調(diào)， 通過 :left 和 :right 設(shè)置左右頁(yè)面不同樣式，并不代表用戶代理會(huì)將頁(yè)面雙面打印

偽類 :first 用于匹配到文檔的第一頁(yè)。

偽類 :blank 用于匹配文檔的空白頁(yè)。

注意，空白頁(yè)既可能是左頁(yè)，又可能是右頁(yè)，設(shè)置左頁(yè)或右頁(yè)的樣式也會(huì)顯示在空白頁(yè)上，如果不希望顯示在空白頁(yè)上，可以清除這些樣式。

用于控制元素之前、之后或之中是否分頁(yè)， 沒有生成盒子的塊元素不會(huì)生效 。

page-break-before 、 page-break-after 屬性支持 auto 、 always 、 avoid 、 left 、 right 、 recto 和 verso 。

page-break-inside 屬性僅支持 auto 和 avoid ，表示在元素內(nèi)允許或禁止分頁(yè)。

orphans 和 windows 用于指定在頁(yè)面的底部或頂部，元素中允許剩余的最少行數(shù)，默認(rèn)為 2 行。

示例：

參考鏈接：

網(wǎng)站名稱：css控制打印樣式,css打印設(shè)置
鏈接分享：http://chinadenli.net/article36/dsiigpg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、關(guān)鍵詞優(yōu)化、響應(yīng)式網(wǎng)站、網(wǎng)站建設(shè)、搜索引擎優(yōu)化、網(wǎng)站營(yíng)銷

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)