大多數(shù)Web設(shè)計(jì)師對打印控制還不是很熟悉，他們往往更迷戀像素，而不是打印機(jī)。在現(xiàn)實(shí)世界中，很多人依賴從網(wǎng)站上打印網(wǎng)頁來參考： 在這個(gè)數(shù)字時(shí)代, 在一些特殊的場合，很多人手中還會(huì)拿著紙張。Web開發(fā)人員可以采取一些措施來彌補(bǔ)打印機(jī)和液晶屏之間的差距。
為打印機(jī)而不是屏幕設(shè)計(jì)的樣式
/* 樣式將只應(yīng)用于打印 */
@media print {
}
注＊ 也可通單獨(dú)的CSS文件, 設(shè)置link的 media="print" 屬性來指定此樣式專用于打印
<link type="text/css" rel="stylesheet" href="css/print.css" media="print">
為您的網(wǎng)站重塑整個(gè)CSS是沒有必要的，整體而言，由打印繼承默認(rèn)樣;僅對不同的需要加以限定。為了節(jié)省打印時(shí)的碳粉，大多數(shù)瀏覽器會(huì)自動(dòng)反轉(zhuǎn)顏色。為了達(dá)到最佳效果，應(yīng)使色彩變化明顯：
/*白紙黑字*/
@media print {
body {
color: #000;
background: #fff;
}
}
我們不是在創(chuàng)建整個(gè)網(wǎng)頁的截圖,只是為了展現(xiàn)一個(gè)設(shè)計(jì)良好,可讀性強(qiáng)的網(wǎng)站:
/*去除背景圖片, 節(jié)約筆黑 */
h1 {
color: #fff;
background: url(banner.jpg);
}
@media print {
h1 {
color: #000;
background: none;
}
nav, aside {
display: none;
}
}
為了使打印機(jī)更具效率,應(yīng)只顯示主體內(nèi)容,去除頁眉頁腳導(dǎo)航欄
@media print {
h1 {
color: #000;
background: none;
}
nav, aside {
display: none;
}
body, article {
width: 100%;
margin: 0;
padding: 0;
}
@page {
margin: 2cm;
}
}
鏈接的處理
在打印機(jī)上鏈接是看不到的,應(yīng)對超鏈接進(jìn)行擴(kuò)展
/*在超鏈接后面添加帶<http://XXX>的完整地址*/
@media print {
article a {
font-weight: bolder;
text-decoration: none;
}
article a[href^=http]:after {
content:" <" attr(href) "> ";
}
}
顯示效果可能是這樣的
控制打印設(shè)置選項(xiàng)
該@page規(guī)則允許您指定頁面的各個(gè)方面。例如，你將要指定頁面的尺寸。頁邊 距,頁眉頁腳等都是非常重要的。[很多瀏覽器均己支持]
@PAGE規(guī)則紙張大小設(shè)置
通過下面這條CSS您可以設(shè)置紙張大小,5.5英寸寬,8.5英寸高.
@page {
size: 5.5in 8.5in;
}
你還可以通過別名控制紙張大小,如"A4"或“l(fā)egal.”
@page {
size: A4;
}
你還可以控制打印方向， portrait： 縱向打印地, landscape: 橫向
@page {
size: A4 landscape;
}
PAGE模型 The Page Model
在分頁媒體格式模型中，文檔被轉(zhuǎn)移到一個(gè)或多個(gè)頁面框。該頁框是映射到一個(gè)矩形平面。這大致類似于css盒子模型。
注* 支持瀏覽器較少
@page { width: 50em; }
PAGE邊距模型 Page-Margin Boxes
在進(jìn)一步討論之前，我們應(yīng)該了解的頁面的盒子模型，因?yàn)樗男袨楦绾卧谄聊簧系墓ぷ饔行┎煌?
頁面模型定義了頁面區(qū)域，然后劃分了16個(gè)周邊緣盒?？梢钥刂祈搮^(qū)域的大小和頁區(qū)域的邊緣和頁面本身的端部之間的余量的尺寸。
左右頁邊距
@page :left {
margin-left: 30cm;
}
@page :right {
margin-left: 4cm;
}
下面的css將在底部左邊顯示標(biāo)題，在右下角的網(wǎng)頁計(jì)數(shù)器，并在右上角顯示一章的標(biāo)題。
@page:right{
@bottom-left {
margin: 10pt 0 30pt 0;
border-top: .25pt solid #666;
content: "Our Cats";
font-size: 9pt;
color: #333;
}
@bottom-right {
margin: 10pt 0 30pt 0;
border-top: .25pt solid #666;
content: counter(page);
font-size: 9pt;
}
@top-right {
content: string(doctitle);
margin: 30pt 0 10pt 0;
font-size: 9pt;
color: #333;
}
}
顯示效果如下：
注* 此文整理自:Tips And Tricks For Print Style Sheets 和 Designing For Print With CSS 和 css3 page 規(guī)范
哈爾濱品用軟件有限公司致力于為哈爾濱的中小企業(yè)制作大氣、美觀的優(yōu)秀網(wǎng)站，并且能夠搭建符合百度排名規(guī)范的網(wǎng)站基底，使您的網(wǎng)站無需額外費(fèi)用，即可穩(wěn)步提升排名至首頁。歡迎體驗(yàn)最佳的哈爾濱網(wǎng)站建設(shè)。