網(wǎng)頁(yè)打印樣式CSS的技巧和要點(diǎn)
不經(jīng)過(guò)任何處理而直接打印網(wǎng)站上的頁(yè)面會(huì)得到一個(gè)不理想的效果县匠。
我們WEB開(kāi)發(fā)人員可以簡(jiǎn)單采用幾個(gè)要點(diǎn)來(lái)使之達(dá)到較為合適的效果：
- 媒體查詢（media query）
- 打印顏色清晰明了
- 隱藏不相關(guān)內(nèi)容
- 打印邊距設(shè)置
- 打印不被跨頁(yè)
- 添加分頁(yè)符
- 圖片和列表設(shè)置
- 細(xì)節(jié)小問(wèn)題
針對(duì)打印的樣式，而不是屏幕顯示樣式
1、首先，我們需要使用媒體查詢（media query）針對(duì)打印樣式設(shè)置。
@media print { }
重新針對(duì)打印寫(xiě)CSS樣式是沒(méi)有必要的馆纳，我們只需要針對(duì)差異設(shè)置打印的樣式覆蓋掉之前的默認(rèn)樣式敌厘。
大多數(shù)的瀏覽器會(huì)自動(dòng)根據(jù)打印更改顏色滴须，以節(jié)省打印原料缴川，但是我們還是盡可能的手工設(shè)置一下。
2描馅、為了達(dá)到最佳效果把夸，使顏色清晰明了，我們至少需要包含一下基本的打印樣式铭污。
@media print {
body { color: #000; background: #fff; }
}
3恋日、對(duì)于打印，大多數(shù)情況下我們不需要打印整個(gè)頁(yè)面嘹狞，只需要打印一個(gè)簡(jiǎn)潔的能夠突出需要信息的頁(yè)面岂膳，那么我們將不相關(guān)的部分隱藏掉。
實(shí)列一：隱藏導(dǎo)航條磅网、背景圖片
/* Default styles */
h1 {
color: #fff;
background: url(banner.jpg);
}
@media print {
h1 {
color: #000;
background: none;
}
nav, aside {
display: none;
}
}
實(shí)列二：media 屬性針對(duì)兩種不同媒介類(lèi)型的兩種不同的樣式（計(jì)算機(jī)屏幕和打犹附亍）
<html>
<head>
/*網(wǎng)頁(yè)顯示顏色 */
<style type="text/css">
h1 {color:#FF0000;}
p {color:#0000FF;}
body {background-color:#FFEFD6;}
</style>
/*打印顯示顏色 */
<style type="text/css" media="print">
h1 {color:#000000;}
p {color:#000000;}
body {background-color:#FFFFFF;}
</style>
</head>
<body>
<h1>Header 1</h1>
<p>A paragraph.</p>
</body>
</html>
media 屬性用于為不同的媒介類(lèi)型規(guī)定不同的樣式。
如需在一個(gè) style 元素中定義一個(gè)以上的媒介類(lèi)型涧偷，請(qǐng)使用逗號(hào)分隔的列表
例如：<style type="text/css" media="screen,projection">）
4簸喂、為了保證打印樣式有用，寫(xiě)CSS樣式使打印的內(nèi)容距離紙張邊緣燎潮，看起來(lái)更好喻鳄，需要使用 @page 這個(gè)語(yǔ)法：
@media print {
@page {
margin: 2cm;
}
}
5、為了保證不被跨頁(yè)打印
如一個(gè)標(biāo)題和內(nèi)容在頁(yè)面底部被分開(kāi)：
h2, h3 { page-break-after: avoid; }
6确封、給打印添加分頁(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秉剑。
實(shí)列：創(chuàng)建兩個(gè)類(lèi)樣式泛豪，以類(lèi)似于.break_after和.break_before的名字來(lái)命名,然后你可以選擇性地把這些樣式應(yīng)用給應(yīng)該打印在網(wǎng)頁(yè)頂部或者底部的元素。
.break_before { page-break-before: always; }
.break_after { page-break-after: always; }
7秃症、另一中情況是要防止圖片過(guò)寬而超出紙張邊緣：
img {
max-width: 100% !important;
}
8候址、確保 articles 文章標(biāo)簽的內(nèi)容，在新的一頁(yè)開(kāi)始：
article {
page-break-before: always;
}
9种柑、注意列表和圖片不被分開(kāi)在不同的頁(yè)
ul, img {
page-break-inside: avoid;
}
10、注意細(xì)節(jié)問(wèn)題
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" />
- 如果需要在打印內(nèi)容中出現(xiàn)圖片聚请，請(qǐng)?jiān)贖TML代碼中加入；
- 打印設(shè)置使用的是物理單位，所以尺寸最好不要用像素(px)驶赏，可以用pt也可以用cm炸卑；
- 隱藏不需要的或是次要的內(nèi)容。display：none煤傍；
- 盡可能的在HTML代碼中做好內(nèi)容重要的先后次序盖文，這樣在打印樣式中可以節(jié)省不少的麻煩；
- 打印與網(wǎng)頁(yè)不一樣蚯姆，打印一定要留下白邊五续，單位用英寸(in)；
- 要確保頁(yè)面上的所有文本以黑色打印龄恋，就用通配選擇器（見(jiàn)第54頁(yè)）和!important來(lái)創(chuàng)建把每個(gè)標(biāo)簽都格式化為黑色文本的單個(gè)樣式：
*{ color: ##000# !important }
