打印样式的CSS

最新推荐文章于 2025-09-07 22:29:54 发布

转载最新推荐文章于 2025-09-07 22:29:54 发布 · 103 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/karry990921/p/8110910.html

文章标签：

#javascript #ViewUI

本文介绍了一种通过CSS实现的打印样式优化方案，确保网页在打印时能够清晰展示链接及重要信息，同时避免不必要的分页符插入，提高用户体验。

 1 @media print{
 2     *,
 3     *:before,
 4     *:after{
 5         background:transparent !important;
 6         color:#000 !important;
 7         box-shadow: none !important;
 8         text-shadw:none !important;//所有颜色的背景清除
 9     }
10     a,
11     a:visited{
12         text-decoration: underline;//所有的链接加上下划线 一看能知道是链接
13     }
14     a[href]:after{
15         content: '('attr(href)')';//如果一个超链接有内容的话，可以加上这个样式，告诉这个链接是什么
16     }
17     abbr[title]:after{
18         content:'('attr(title)')';
19     }
20     a[href^='#']:after,a[href^="javascript:"]:after{content: '';}//使用#号和JavaScript的超链接不显示href
21   //避免在原始内部插入分页符
22    pre,blockquote{
23        border:1px solid #999;
24        page-break-inside: avoid;//这个属性只有op浏览器起作用
25    }
26    thead{
27        display: table-header-group;
28    }
29    tr,
30    img{max-width: 100% !important;}
31    p,h2,h3{
32        orphans: 3;//当元素发生分页时必须在页面底部保留的最小行数
33        widows: 3;//当元素发生分页时必须在页面顶部保留的最小行数
34    }
35    h2,h3{page-break-after: avoid;}//避免在元素后面插入分页符
36 }