本篇內(nèi)容介紹了“如何設(shè)計(jì)適用于打印的CSS樣式”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！
張家界ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景，ssl證書未來(lái)市場(chǎng)廣闊！成為創(chuàng)新互聯(lián)的ssl證書銷售渠道，可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：18980820575（備注：SSL證書合作）期待與您的合作！
CSS Code復(fù)制內(nèi)容到剪貼板
/* 樣式將只應(yīng)用于打印 */
@media print {
}
注＊ 也可通單獨(dú)的CSS文件, 設(shè)置link的 media="print" 屬性來(lái)指定此樣式專用于打印
CSS Code復(fù)制內(nèi)容到剪貼板
為您的網(wǎng)站重塑整個(gè)CSS是沒(méi)有必要的，整體而言，由打印繼承默認(rèn)樣;僅對(duì)不同的需要加以限定。為了節(jié)省打印時(shí)的碳粉，大多數(shù)瀏覽器會(huì)自動(dòng)反轉(zhuǎn)顏色。為了達(dá)到最佳效果，應(yīng)使色彩變化明顯：
CSS Code復(fù)制內(nèi)容到剪貼板
/*白紙黑字*/
@media print {
body {
color: #000;
background: #fff;
}
}
我們不是在創(chuàng)建整個(gè)網(wǎng)頁(yè)的截圖,只是為了展現(xiàn)一個(gè)設(shè)計(jì)良好,可讀性強(qiáng)的網(wǎng)站:
/*去除背景圖片, 節(jié)約筆黑 */
CSS Code復(fù)制內(nèi)容到剪貼板
h2 {
color: #fff;
background: url(banner.jpg);
}
@media print {
h2 {
color: #000;
background: none;
}
nav, aside {
display: none;
}
}
為了使打印機(jī)更具效率,應(yīng)只顯示主體內(nèi)容,去除頁(yè)眉頁(yè)腳導(dǎo)航欄
CSS Code復(fù)制內(nèi)容到剪貼板
@media print {
h2 {
color: #000;
background: none;
}
nav, aside {
display: none;
}
body, article {
width: 100%;
margin: 0;
padding: 0;
}
@page {
margin: 2cm;
}
}
鏈接的處理
在打印機(jī)上鏈接是看不到的,應(yīng)對(duì)超鏈接進(jìn)行擴(kuò)展
/*在超鏈接后面添加帶
CSS Code復(fù)制內(nèi)容到剪貼板
@media print {
article a {
font-weight: bolder;
text-decoration: none;
}
article a[href^=http]:after {
content:" <" attr(href) "> ";
}
}
顯示效果可能是這樣的
控制打印設(shè)置選項(xiàng)
該@page規(guī)則允許您指定頁(yè)面的各個(gè)方面。例如，你將要指定頁(yè)面的尺寸。頁(yè)邊 距,頁(yè)眉頁(yè)腳等都是非常重要的。[很多瀏覽器均己支持]
@PAGE規(guī)則紙張大小設(shè)置
通過(guò)下面這條CSS您可以設(shè)置紙張大小,5.5英寸寬,8.5英寸高.
CSS Code復(fù)制內(nèi)容到剪貼板
@page {
size: 5.5in 8.5in;
}
你還可以通過(guò)別名控制紙張大小,如"A4"或“l(fā)egal.”
CSS Code復(fù)制內(nèi)容到剪貼板
@page {
size: A4;
}
你還可以控制打印方向， portrait： 縱向打印地, landscape: 橫向
CSS Code復(fù)制內(nèi)容到剪貼板
@page {
size: A4 landscape;
}
PAGE模型 The Page Model
在分頁(yè)媒體格式模型中，文檔被轉(zhuǎn)移到一個(gè)或多個(gè)頁(yè)面框。該頁(yè)框是映射到一個(gè)矩形平面。這大致類似于css盒子模型。
注* 支持瀏覽器較少
CSS Code復(fù)制內(nèi)容到剪貼板
@page { width: 50em; }
PAGE邊距模型 Page-Margin Boxes
在進(jìn)一步討論之前，我們應(yīng)該了解的頁(yè)面的盒子模型，因?yàn)樗男袨楦绾卧谄聊簧系墓ぷ饔行┎煌?/p>
頁(yè)面模型定義了頁(yè)面區(qū)域，然后劃分了16個(gè)周邊緣盒?？梢钥刂祈?yè)區(qū)域的大小和頁(yè)區(qū)域的邊緣和頁(yè)面本身的端部之間的余量的尺寸。
左右頁(yè)邊距
CSS Code復(fù)制內(nèi)容到剪貼板
@page :left {
margin-left: 30cm;
}
@page :rightright {
margin-left: 4cm;
}
下面的css將在底部左邊顯示標(biāo)題，在右下角的網(wǎng)頁(yè)計(jì)數(shù)器，并在右上角顯示一章的標(biāo)題。
CSS Code復(fù)制內(nèi)容到剪貼板
@page:rightright{
@bottombottom-left {
margin: 10pt 0 30pt 0;
border-top: .25pt solid #666;
content: "Our Cats";
font-size: 9pt;
color: #333;
}
@bottombottom-rightright {
margin: 10pt 0 30pt 0;
border-top: .25pt solid #666;
content: counter(page);
font-size: 9pt;
}
@top-rightright {
content: string(doctitle);
margin: 30pt 0 10pt 0;
font-size: 9pt;
color: #333;
}
}
顯示效果如下：
“如何設(shè)計(jì)適用于打印的CSS樣式”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！
重慶分公司
重慶分公司
