【01期】网页打印样式CSS的技巧和要点

网页打印样式CSS的技巧和要点

不经过任何处理而直接打印网站上的页面会得到一个不理想的效果。
我们WEB开发人员可以简单采用几个要点来使之达到较为合适的效果：

• 媒体查询（media query）
• 打印颜色清晰明了
• 隐藏不相关内容
• 打印边距设置
• 打印不被跨页
• 添加分页符
• 图片和列表设置
• 细节小问题

针对打印的样式，而不是屏幕显示样式

1、首先，我们需要使用媒体查询（media query）针对打印样式设置。

@media print { }

重新针对打印写CSS样式是没有必要的，我们只需要针对差异设置打印的样式覆盖掉之前的默认样式。

大多数的浏览器会自动根据打印更改颜色，以节省打印原料，但是我们还是尽可能的手工设置一下。

2、为了达到最佳效果，使颜色清晰明了，我们至少需要包含一下基本的打印样式。

@media print {
body { color: #000; background: #fff; }
}

3、对于打印，大多数情况下我们不需要打印整个页面，只需要打印一个简洁的能够突出需要信息的页面，那么我们将不相关的部分隐藏掉。

实列一：隐藏导航条、背景图片

/* Default styles */
h1 {
   color: #fff;
   background: url(banner.jpg);
}
 
@media print {
   h1 {
      color: #000;
      background: none;
   }
 
   nav, aside {
      display: none;
   }
}

实列二：media 属性针对两种不同媒介类型的两种不同的样式（计算机屏幕和打印）

/*网页显示颜色 */


/*打印显示颜色 */




Header 1
A paragraph.

media 属性用于为不同的媒介类型规定不同的样式。
如需在一个 style 元素中定义一个以上的媒介类型，请使用逗号分隔的列表
例如：