建站
咨詢
售后
建站咨詢
新聞中心
CSS 打印
2017-01-31
讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對(duì)這個(gè)行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡(jiǎn)單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：域名注冊(cè)、網(wǎng)絡(luò)空間、營(yíng)銷軟件、網(wǎng)站建設(shè)、蟠龍網(wǎng)站維護(hù)、網(wǎng)站推廣。
本文主要講解如何使用 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 打印無法指定文檔是否為雙面打印 (Duplex Printing)，是否雙面打印應(yīng)該通過用戶代理指定。不管是否雙面打印，CSS 打印總是包含左頁(yè)和右頁(yè) (分別通過 :left , :right 指定) 。（或者說 CSS 打印假定所有文檔是雙面打?。?/p>
和 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 屬性來改變頁(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 屬性來強(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 下使用，使用起來和偽類類似，也包含 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)頁(yè)打印樣式CSS該如何操作
套正常的css網(wǎng)頁(yè)展示的樣式，另一套專門給打印的時(shí)候用的CSS樣式，只要用戶打印，就會(huì)通過媒體查詢自動(dòng)用打印的專門樣式。這樣，既可以在瀏覽器很好展示效果，也不影響具體打印出來的效果。
正常瀏覽器用的樣式
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控制網(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è)面吧。 后來想了想，其實(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; } } 后來想到如果打印頁(yè)面的某一部分，可以使用iframe來進(jìn)行操作，現(xiàn)在的打印頁(yè)面的局部?jī)?nèi)容基本上就是使用iframe進(jìn)行處理。
新聞名稱：網(wǎng)頁(yè)打印css樣式,網(wǎng)頁(yè)打印css樣式選擇
標(biāo)題來源：http://www.dlmjj.cn/article/dsiiese.html
