脚本之家 服务器常用软件
快捷导航
您的位置：主页 > 网页制作 > CSS > CSS布局实例 >

设计适用于打印的CSS样式

WEB开发者   发布时间：2015-07-09 15:44:59   作者：佚名   我要评论
这篇文章主要介绍了设计适用于打印的CSS样式,特别适用于生成文件类型的页面直接打印使用,需要的朋友可以参考下

大多数Web设计师对打印控制还不是很熟悉，他们往往更迷恋像素，而不是打印机。在现实世界中，很多人依赖从网站上打印网页来参考： 在这个数字时代, 在一些特殊的场合，很多人手中还会拿着纸张。Web开发人员可以采取一些措施来弥补打印机和液晶屏之间的差距。
　　为打印机而不是屏幕设计的样式
 

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. h1 {   
  2.    color: #fff;   
  3.    background: url(banner.jpg);   
  4. }   
  5.     
  6.     
  7. @media print {   
  8.    h1 {   
  9.       color: #000;   
  10.       background: none;   
  11.    }   
  12.     
  13.     
  14.    nav, aside {   
  15.       display: none;   
  16.    }   
  17. }  

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

CSS Code复制内容到剪贴板
  1. @media print {   
  2.    h1 {   
  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. }  

　　显示效果可能是这样的
201579155328162.png (468×101)

控制打印设置选项

　　该@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盒子模型。

　　注*　支持浏览器较少
201579155351141.png (267×266) 

CSS Code复制内容到剪贴板
  1. @page { width: 50em; }   
  2. 　　PAGE边距模型　 Page-Margin Boxes  

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

　　页面模型定义了页面区域，然后划分了16个周边缘盒。可以控制页区域的大小和页区域的边缘和页面本身的端部之间的余量的尺寸。
201579155410022.jpg (1200×893)

左右页边距 
 

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. }  

　　显示效果如下：
201579155443002.jpg (500×773)

相关文章

  • CSS控制漂亮的网页打印效果示例代码

    网页打印效果的实现并不难，下面为大家介绍下如何通过css控制漂亮的网页打印效果，感兴趣的朋友不要错过
    2013-10-12

  • 将XHTML CSS页面转换为打印机页面

    在以前，为Web页面创建一个打印机友好的版本意味着要设计一个布局和格式都经过修改的单独页面，这样才能够在打印的时候获得令人满意的效果。现在，通过使用结构化的XHTML和
    2009-04-02

  • CSS实现强制浏览器分页

    网页制作Webjx文章简介：CSS相对比较弱，例如： 自动分页， 就基本没啥实际用途。我们通常需要自己在需要的时候，强制浏览器分页. 　虽然webjx.com向大家
    2009-04-02

  • 将XHTML CSS页面转换为打印机页面

    　　在以前，为Web页面创建一个打印机友好的版本意味着要设计一个布局和格式都经过修改的单独页面，这样才能够在打印的时候获得令人满意的效果。现在，通过使用结构化的XHT
    2008-10-17

  • 详解CSS3中@media的实际使用

    这篇文章主要介绍了详解CSS3中@media的实际使用,是CSS3入门学习中的基础知识,需要的朋友可以参考下
    2015-08-04

  • CSS3的media query学习攻略

    这篇文章主要介绍了CSS3的media query学习攻略,media query的媒体查询经常被用于设计响应式网页,需要的朋友可以参考下
    2015-07-21

  • 详解CSS3中Media Queries的相关使用

    这篇文章主要介绍了详解CSS3中Media Queries的相关使用,是CSS3入门学习中的基础知识,需要的朋友可以参考下
    2015-07-17

  • CSS media queries

    最近在做一些页面打印时的特殊处理接触到了media queries，想系统学习一下，在MOZILLA DEVELOPER NETWORK看到一篇文章讲的很不错，结合自己的使用总结一下
    2013-08-29

  • CSS3 Media Queries(响应式布局可以让你定制不同的分辨率和设备)

    Media Queries这功能是非常强大的，他可以让你定制不同的分辨率和设备，并在不改变内容的情况下，让你制作的web页面在不同的分辨率和设备下都能显示正常，并且不会因此而丢
    2013-06-06

  • 彻底弄明白CSS3的Media Queries(跨平台设计)

    CSS3的Media Queries 完美解决网站与手机跨平台设计.
    2010-07-27

最新评论

关注微信公众号

扫一扫