CSS 控制 print 打印样式

Question

一、添加打印样式

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

用于屏幕显示的 css： <link rel="stylesheet" href="css/mainstylesheet.css" media="screen" />
用于打印的 css： <link rel="stylesheet" href="css/printstylesheet.css" media="print" />

2. import 方式：

<style type="text/css">
    @import url("css/printstylesheet.css") print;
</style>

3. 直接把屏幕显示样式和打印样式写在一个 css 文件中：

@media print {}{
  h1 {
    color: black;
  }
  h2 {}{
    color: gray;
  }
}

@media print 里面的内容只对打印出来的内容有效，之外的内容就是屏幕显示的样式。
其他：
创建一个不指定媒体类型的样式表通常很有用（或者利用 media="all" ）。当你准备好定义一些特别用
于打印的规则时，可以只创建一个单独的样式表，使任何在打印时看起来不好的样式都失效。使用这种方法的一个问题是必须确保打印机样式实际上确实覆盖了主样式表。可以使用 ！important .

二、打印样式注意事项：

1. 打印样式中不推荐使用背景，因为浏览器默认情况下并不能打印出 CSS 中的背景内容，只有当浏览器被

设置可以打印背景的情况下才能打印出背（ie 的高级选项中可选）。即使背景可以打印，它也可能盖过叠在它上面的任何文本。

这是真的，尤其对于用彩色背景在显示器上强烈对比的文本，但是在黑白打印机上打印时会融合这一背景。

background：none； 去掉背景图片和颜色。

可以利用 background-color 属性设置背景颜色为白色，像这样： background-color: white 。

使用 background 的快捷法也可以获得相同的效果： background: white 。因此像 background: white;

这样的声明不仅设置了背景颜色为白色，而且消除了所有背景图片。利用这个 background 的快捷属性，
你实现了两个目的——设置了一个白色背景，并消除了图片——只用很少的代码。

2. 如果需要在打印内容中出现图片，请在 HTML 代码中加入。
3. 打印设置使用的是物理单位，所以尺寸最好不要用像素(px)，可以用 pt 也可以用 cm ；
4. 隐藏不需要的或是次要的内容。 display：none
5. 尽量不要让内容浮动，有些浏览器打印浮动的 div 的过程中，会有一个麻烦，需要特别加以注意。
6. 不要在打印的样式表中浮动的块，像这样：float: none;。例如，基于 Gecko 的浏览器 （例如 Netscape 6+），当用户用它来浏览一个打印输出页面时，它会截去浮动元素中的内容。 这些内容就不会被传送到打印机，下一个页面也不会有它的踪影――它消失了。
7. 尽可能的在 HTML 代码中做好内容重要的先后次序，这样在打印样式中可以节省不少的麻烦。
8. 打印与网页不一样，打印一定要留下白边，单位用英寸(in)。
9. 要确保页面上的所有文本以黑色打印，就用通配选择器（见第 54 页）和!important 来创建把每个标签都格式化为黑色文本的单个样式： *{ color: ##000# !important }
10. 在打印中显示链接 url 的信息：利用一个高级的选择器：after 和一个高级的 CSS 属性称作 content，把不在屏幕上显示的文本打印在一个样式元素的末端。

不幸的是， :after 选择器和 content 属性技巧在 Internet Explorer 6 或者更早的版本上不起作用（到编写本书为止，在 IE 7 上也不行）。但是它在 Firefox 和 Safari 上的确可以，因此你至少可以清楚地说明 URL 以便访问者可以使用他们的浏览器。

为了做到这点，给打印样式表添加一个样式，在每个链接后面打印出 URL。你甚至可以添加其他文本项目比如圆括号，使它更好看些：

a:after {content: " (" attr(href) ") ";}

然而，这个 CSS 不区分外部或者内部的链接，因此它也打印出到达同一个网站其他页面的没用的相应文档链接：“访问主页（../../index. html）。”利用一点点 CSS 3 魔法，就可以强制这个样式只打印绝对的 URL（即以 ｀http://｀ 开头的那些），像这样：

a[href^="http://"]:after {content: " (" attr(href) ") ";}

10. 给打印添加分页符：两种被广泛认可的属性是 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; }

然后你可以选择性地把这些样式应用给应该打印在网页顶部或者底部的元素。

三、测试打印样式

通常来说我们不可能用打印机来进行测试，在 IE 浏览器菜单栏 文件 中有 打印预览，可以通过这打印预览来做测试。