如何设计适用于打印的CSS样式

本篇内容介绍了“如何设计适用于打印的CSS样式”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

张家界ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景，ssl证书未来市场广阔！成为创新互联的ssl证书销售渠道，可以享受市场价格4-6折优惠！如果有意向欢迎电话联系或者加微信：18980820575（备注：SSL证书合作）期待与您的合作！

CSS Code复制内容到剪贴板

  1. /* 样式将只应用于打印 */  

  2. @media print {   

  3.     

  4.     

  5. }  

注＊ 也可通单独的CSS文件, 设置link的 media="print" 属性来指定此样式专用于打印
 

CSS Code复制内容到剪贴板

  1. <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">  

为您的网站重塑整个CSS是没有必要的，整体而言，由打印继承默认样;仅对不同的需要加以限定。为了节省打印时的碳粉，大多数浏览器会自动反转颜色。为了达到最佳效果，应使色彩变化明显：
 

CSS Code复制内容到剪贴板

  1. /*白纸黑字*/  

  2. @media print {   

  3.    body {   

  4.       color: #000;   

  5.       background: #fff;   

  6.    }   

  7. }  

我们不是在创建整个网页的截图,只是为了展现一个设计良好,可读性强的网站:
 
/*去除背景图片, 节约笔黑 */
 

CSS Code复制内容到剪贴板

  1. h2 {   

  2.    color: #fff;   

  3.    background: url(banner.jpg);   

  4. }   

  5.     

  6.     

  7. @media print {   

  8.    h2 {   

  9.       color: #000;   

  10.       background: none;   

  11.    }   

  12.     

  13.     

  14.    nav, aside {   

  15.       display: none;   

  16.    }   

  17. }  

为了使打印机更具效率,应只显示主体内容,去除页眉页脚导航栏 
 

CSS Code复制内容到剪贴板

  1. @media print {   

  2.    h2 {   

  3.       color: #000;   

  4.       background: none;   

  5.    }   

  6.     

  7.     

  8.    nav, aside {   

  9.       display: none;   

  10.    }   

  11.     

  12.     

  13.    body, article {   

  14.       width: 100%;   

  15.       margin: 0;   

  16.       padding: 0;   

  17.    }   

  18.     

  19.     

  20.    @page {   

  21.       margin: 2cm;   

  22.    }   

  23. }   

链接的处理

在打印机上链接是看不到的,应对超链接进行扩展
 
/*在超链接后面添加带<http://XXX>的完整地址*/

CSS Code复制内容到剪贴板

  1. @media print {   

  2.    article a {   

  3.       font-weight: bolder;   

  4.       text-decoration: none;   

  5.    }   

  6.     

  7.     

  8.    article a[href^=http]:after {   

  9.       content:" <" attr(href) "> ";   

  10.    }   

  11. }  

显示效果可能是这样的
如何设计适用于打印的CSS样式

控制打印设置选项

该@page规则允许您指定页面的各个方面。例如，你将要指定页面的尺寸。页边 距,页眉页脚等都是非常重要的。[很多浏览器均己支持]
@PAGE规则纸张大小设置

通过下面这条CSS您可以设置纸张大小,5.5英寸宽,8.5英寸高.
 

CSS Code复制内容到剪贴板

  1. @page {   

  2.   size: 5.5in 8.5in;   

  3. }  

你还可以通过别名控制纸张大小,如"A4"或“legal.”
 

CSS Code复制内容到剪贴板

  1. @page {   

  2.   size: A4;   

  3. }  

你还可以控制打印方向，　portrait： 纵向打印地,  landscape: 横向 
 

CSS Code复制内容到剪贴板

  1. @page {   

  2.   size: A4 landscape;   

  3. }  

PAGE模型　The Page Model

在分页媒体格式模型中，文档被转移到一个或多个页面框。该页框是映射到一个矩形平面。这大致类似于css盒子模型。

注*　支持浏览器较少
如何设计适用于打印的CSS样式 

CSS Code复制内容到剪贴板

  1. @page { width: 50em; }   

  2. PAGE边距模型　 Page-Margin Boxes  

在进一步讨论之前，我们应该了解的页面的盒子模型，因为它的行为跟如何在屏幕上的工作有些不同。

页面模型定义了页面区域，然后划分了16个周边缘盒。可以控制页区域的大小和页区域的边缘和页面本身的端部之间的余量的尺寸。
如何设计适用于打印的CSS样式

左右页边距 
 

CSS Code复制内容到剪贴板

  1. @page :left {   

  2.   margin-left: 30cm;   

  3. }   

  4.     

  5.     

  6. @page :rightright {   

  7.   margin-left: 4cm;   

  8. }  

下面的css将在底部左边显示标题，在右下角的网页计数器，并在右上角显示一章的标题。 
 

CSS Code复制内容到剪贴板

  1. @page:rightright{    

  2.   @bottombottom-left {   

  3.     margin: 10pt 0 30pt 0;   

  4.     border-top: .25pt solid #666;   

  5.     content: "Our Cats";   

  6.     font-size: 9pt;   

  7.     color: #333;   

  8.   }   

  9.     

  10.     

  11.   @bottombottom-rightright {    

  12.     margin: 10pt 0 30pt 0;   

  13.     border-top: .25pt solid #666;   

  14.     content: counter(page);   

  15.     font-size: 9pt;   

  16.   }   

  17.     

  18.     

  19.   @top-rightright {   

  20.     content:  string(doctitle);   

  21.     margin: 30pt 0 10pt 0;   

  22.     font-size: 9pt;   

  23.     color: #333;   

  24.   }   

  25. }  

显示效果如下：
如何设计适用于打印的CSS样式

“如何设计适用于打印的CSS样式”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站，小编将为大家输出更多高质量的实用文章！

网页名称：如何设计适用于打印的CSS样式
文章转载：https://www.cdcxhl.com/article8/iiohop.html

成都网站建设公司_创新互联，为您提供用户体验、网页设计公司、外贸网站建设、企业建站、网站设计公司、品牌网站设计

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

成都网页设计公司

云服务器知识

分类信息网站