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

2018-02-04 本文已影响0人漠然_Sun

网页打印样式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 属性针对两种不同媒介类型的两种不同的样式（计算机屏幕和打印）

<html>
<head>
/*网页显示颜色 */
<style type="text/css">
h1 {color:#FF0000;}
p {color:#0000FF;}
body {background-color:#FFEFD6;}
</style>

/*打印显示颜色 */
<style type="text/css" media="print">
h1 {color:#000000;}
p {color:#000000;}
body {background-color:#FFFFFF;}
</style>
</head>

<body>
<h1>Header 1</h1>
<p>A paragraph.</p>
</body>
</html>

media 属性用于为不同的媒介类型规定不同的样式。
如需在一个 style 元素中定义一个以上的媒介类型，请使用逗号分隔的列表
例如：<style type="text/css" media="screen,projection">）

4、为了保证打印样式有用，写CSS样式使打印的内容距离纸张边缘，看起来更好，需要使用 @page 这个语法：

@media print {
  @page {
      margin: 2cm;
   }
}

5、为了保证不被跨页打印

如一个标题和内容在页面底部被分开：

h2, h3 { page-break-after: avoid; }

6、给打印添加分页符：两种被广泛认可的属性是page-break-before和page-break-after。

page-break-before告诉网页浏览器在一个指定样式之前插入一个分页符。利用page-break-before
属性使图片打印在一张新页面上，并且适合整张页面。
要使一个元素作为打印页上的最后一个项目显示，就给那个元素的样式添加page-break-after: always。

实列：创建两个类样式，以类似于.break_after和.break_before的名字来命名,然后你可以选择性地把这些样式应用给应该打印在网页顶部或者底部的元素。

.break_before { page-break-before: always; }
.break_after { page-break-after: always; }

7、另一中情况是要防止图片过宽而超出纸张边缘：

img {
   max-width: 100% !important;
}

8、确保 articles 文章标签的内容，在新的一页开始：

article {
   page-break-before: always;
}

9、注意列表和图片不被分开在不同的页

ul, img {
   page-break-inside: avoid;
}

10、注意细节问题

1.为屏幕显示和打印分别准备一个css文件，如下所示：
用于屏幕显示的css：

<link rel="stylesheet" href="css/mainstylesheet.css" media="screen" />

用于打印的css：

<link rel="stylesheet" href="css/printstylesheet.css" media="print" />

如果需要在打印内容中出现图片，请在HTML代码中加入；
打印设置使用的是物理单位，所以尺寸最好不要用像素(px)，可以用pt也可以用cm；
隐藏不需要的或是次要的内容。display：none；
尽可能的在HTML代码中做好内容重要的先后次序，这样在打印样式中可以节省不少的麻烦；
打印与网页不一样，打印一定要留下白边，单位用英寸(in)；
要确保页面上的所有文本以黑色打印，就用通配选择器（见第54页）和!important来创建把每个标签都格式化为黑色文本的单个样式：

*{ color: ##000# !important }