网页制作教程:CSS打印样式技巧
日期：2014-04-24 浏览次数：21412 次
| 文章简介：针对打印的样式，而不是屏幕显示样式. |
不经过任何处理而直接打印网站上的页面会得到一个不理想的效果。
我们WEB开发人员可以简单的采用几个要点来使之达到较为合适的效果：
- 使用响应式布局设置打印的效果
- 打印背景图片和颜色，在合适的时候
- 添加显示的网址或页面链接，以供参考
- 使用css filter 提高打印的图形效果
针对打印的样式，而不是屏幕显示样式
首先，我们需要使用媒体查询（media query）针对 打印样式设置。
| @media print { } |
重新针对打印写CSS样式是没有必要的，我们只需要针对差异设置打印的样式覆盖掉之前的默认样式。
大多数的浏览器会自动根据打印更改颜色，以节省打印原料，但是我们还是尽可能的手工设置一下。
为了达到最佳效果，使颜色清晰明了，我们至少需要包含一下基本的打印样式。
| @media print { body { color: #000; background: #fff; } } |
对于打印，大多数情况下我们不需要打印整个页面，只需要打印一个简洁的能够突出需要信息的页面，那么我们将不相关的部分隐藏掉（如：导航条、背景图片）。
| /* Default styles */ h1 { color: #fff; background: url(banner.jpg); } @media print { h1 { color: #000; background: none; } nav, aside { display: none; } } |
在编写打印样式表的时候，你要注意要使用厘米或者英寸作为单位而不是屏幕像素单位，实际的单位对打印非常有用。
为了保证打印样式有用，写CSS样式使打印的内容距离纸张边缘，看起来更好，需要使用 @page 这个语法：
| @media print { h1 { color: #000; background: none; } nav, aside { display: none; } body, article { width: 100%; margin: 0; padding: 0; } @page { margin: 2cm; } } |
为了保证不被跨页打印，如一个标题和内容在页面底部被分开：
| h2, h3 { page-break-after: avoid; } |
另一中情况是要防止图片过宽而超出纸张边缘：
|
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
|
