設(shè)計(jì)適用于打印的CSS樣式
我要評(píng)論大多數(shù)Web設(shè)計(jì)師對(duì)打印控制還不是很熟悉，他們往往更迷戀像素，而不是打印機(jī)。在現(xiàn)實(shí)世界中，很多人依賴從網(wǎng)站上打印網(wǎng)頁(yè)來(lái)參考： 在這個(gè)數(shù)字時(shí)代, 在一些特殊的場(chǎng)合，很多人手中還會(huì)拿著紙張。Web開發(fā)人員可以采取一些措施來(lái)彌補(bǔ)打印機(jī)和液晶屏之間的差距。
為打印機(jī)而不是屏幕設(shè)計(jì)的樣式
- /* 樣式將只應(yīng)用于打印 */
- @media print {
- }
注＊ 也可通單獨(dú)的CSS文件, 設(shè)置link的 media="print" 屬性來(lái)指定此樣式專用于打印
- <link type="text/<span style="width: auto; height: auto; float: none;" id="8_nwp"><a style="text-decoration: none;" mpid="8" target="_blank" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=5871c731969a47e&k=css&k0=css&kdi0=0&luki=10&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=7ea46919731c8705&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F5933%2Ehtml&urlid=0" id="8_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">css</span></a></span>" rel="<span style="width: auto; height: auto; float: none;" id="9_nwp"><a style="text-decoration: none;" mpid="9" target="_blank" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=5871c731969a47e&k=style&k0=style&kdi0=0&luki=4&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=7ea46919731c8705&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F5933%2Ehtml&urlid=0" id="9_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">style</span></a></span>sheet" href="css/print.css" media="print">
為您的網(wǎng)站重塑整個(gè)CSS是沒(méi)有必要的，整體而言，由打印繼承默認(rèn)樣;僅對(duì)不同的需要加以限定。為了節(jié)省打印時(shí)的碳粉，大多數(shù)瀏覽器會(huì)自動(dòng)反轉(zhuǎn)顏色。為了達(dá)到最佳效果，應(yīng)使色彩變化明顯：
- /*白紙黑字*/
- @media print {
- body {
- color: #000;
- background: #fff;
- }
- }
我們不是在創(chuàng)建整個(gè)網(wǎng)頁(yè)的截圖,只是為了展現(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)容,去除頁(yè)眉頁(yè)腳導(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)對(duì)超鏈接進(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ī)則允許您指定頁(yè)面的各個(gè)方面。例如，你將要指定頁(yè)面的尺寸。頁(yè)邊 距,頁(yè)眉頁(yè)腳等都是非常重要的。[很多瀏覽器均己支持]
@PAGE規(guī)則紙張大小設(shè)置
通過(guò)下面這條CSS您可以設(shè)置紙張大小,5.5英寸寬,8.5英寸高.
- @page {
- size: 5.5in 8.5in;
- }
你還可以通過(guò)別名控制紙張大小,如"A4"或“legal.”
- @page {
- size: A4;
- }
你還可以控制打印方向， portrait： 縱向打印地, landscape: 橫向
- @page {
- size: A4 landscape;
- }
PAGE模型 The Page Model
在分頁(yè)媒體格式模型中，文檔被轉(zhuǎn)移到一個(gè)或多個(gè)頁(yè)面框。該頁(yè)框是映射到一個(gè)矩形平面。這大致類似于css盒子模型。
注* 支持瀏覽器較少
- @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è)邊距
- @page :left {
- margin-left: 30cm;
- }
- @page :rightright {
- margin-left: 4cm;
- }
下面的css將在底部左邊顯示標(biāo)題，在右下角的網(wǎng)頁(yè)計(jì)數(shù)器，并在右上角顯示一章的標(biāo)題。
- @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;
- }
- }
顯示效果如下：
相關(guān)文章
- 網(wǎng)頁(yè)打印效果的實(shí)現(xiàn)并不難，下面為大家介紹下如何通過(guò)css控制漂亮的網(wǎng)頁(yè)打印效果，感興趣的朋友不要錯(cuò)過(guò)2013-10-12
將XHTML CSS頁(yè)面轉(zhuǎn)換為打印機(jī)頁(yè)面
在以前，為Web頁(yè)面創(chuàng)建一個(gè)打印機(jī)友好的版本意味著要設(shè)計(jì)一個(gè)布局和格式都經(jīng)過(guò)修改的單獨(dú)頁(yè)面，這樣才能夠在打印的時(shí)候獲得令人滿意的效果?，F(xiàn)在，通過(guò)使用結(jié)構(gòu)化的XHTML和2009-04-02CSS實(shí)現(xiàn)強(qiáng)制瀏覽器分頁(yè)
網(wǎng)頁(yè)制作Webjx文章簡(jiǎn)介：CSS相對(duì)比較弱，例如： 自動(dòng)分頁(yè)， 就基本沒(méi)啥實(shí)際用途。我們通常需要自己在需要的時(shí)候，強(qiáng)制瀏覽器分頁(yè). 雖然webjx.com向大家2009-04-02將XHTML CSS頁(yè)面轉(zhuǎn)換為打印機(jī)頁(yè)面
在以前，為Web頁(yè)面創(chuàng)建一個(gè)打印機(jī)友好的版本意味著要設(shè)計(jì)一個(gè)布局和格式都經(jīng)過(guò)修改的單獨(dú)頁(yè)面，這樣才能夠在打印的時(shí)候獲得令人滿意的效果?，F(xiàn)在，通過(guò)使用結(jié)構(gòu)化的XHT2008-10-17- 這篇文章主要介紹了詳解CSS3中@media的實(shí)際使用,是CSS3入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-08-04
- 這篇文章主要介紹了CSS3的media query學(xué)習(xí)攻略,media query的媒體查詢經(jīng)常被用于設(shè)計(jì)響應(yīng)式網(wǎng)頁(yè),需要的朋友可以參考下2015-07-21
詳解CSS3中Media Queries的相關(guān)使用
這篇文章主要介紹了詳解CSS3中Media Queries的相關(guān)使用,是CSS3入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-07-17- 最近在做一些頁(yè)面打印時(shí)的特殊處理接觸到了media queries，想系統(tǒng)學(xué)習(xí)一下，在MOZILLA DEVELOPER NETWORK看到一篇文章講的很不錯(cuò)，結(jié)合自己的使用總結(jié)一下2013-08-29
CSS3 Media Queries(響應(yīng)式布局可以讓你定制不同的分辨率和設(shè)備)
Media Queries這功能是非常強(qiáng)大的，他可以讓你定制不同的分辨率和設(shè)備，并在不改變內(nèi)容的情況下，讓你制作的web頁(yè)面在不同的分辨率和設(shè)備下都能顯示正常，并且不會(huì)因此而丟2013-06-06徹底弄明白CSS3的Media Queries(跨平臺(tái)設(shè)計(jì))
CSS3的Media Queries 完美解決網(wǎng)站與手機(jī)跨平臺(tái)設(shè)計(jì).2010-07-27