您现在的位置是：网站首页> 编程资料编程资料

设计适用于打印的CSS样式CSS控制漂亮的网页打印效果示例代码将XHTML CSS页面转换为打印机页面CSS实现强制浏览器分页将XHTML CSS页面转换为打印机页面详解CSS3中@media的实际使用CSS3的media query学习攻略详解CSS3中Media Queries的相关使用CSS media queries CSS3 Media Queries(响应式布局可以让你定制不同的分辨率和设备)彻底弄明白CSS3的Media Queries(跨平台设计)

2021-09-05 875人已围观

简介 这篇文章主要介绍了设计适用于打印的CSS样式,特别适用于生成文件类型的页面直接打印使用,需要的朋友可以参考下

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

CSS Code复制内容到剪贴板
  1. /* 样式将只应用于打印 */  
  2. @media print {   
  3.     
  4.     
  5. }  

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

CSS Code复制内容到剪贴板
  1. "text/width: auto; height: auto; float: none;" id="8_nwp">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">color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">css" rel="width: auto; height: auto; float: none;" id="9_nwp">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">color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">stylesheet" 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. }   

　　链接的处理

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

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、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！

上一篇：CSS中使用clearfix清除浮动的方法CSS3 清除浮动的方法示例CSS清除浮动float的三种方法小结清除css浮动的三种方法小结详解css清除浮动float的七种常用方法总结和兼容性处理CSS清除浮动方法小结CSS清除浮动的常用方法优缺点分析html+css 清除浮动的相关技巧心得浅谈CSS中overflow清除浮动的用法css 盒模型 文档流 几种清除浮动的方法实例详解

下一篇：更改上传按钮的样式示例jquery实现的随机显示不同样式的网站右下角广告窗口带关闭按钮悬浮特效五款漂亮的纯CSS3动画按钮的实例教程

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网