2017-01-31

本文主要讲解如何使用 CSS 控制打印样式。

使用 CSS 可以控制文档如何正确的显示在不同的媒介 (Media) 上。其中分页媒介 (Paged Media) ，不同于连续媒介 (Continuous Media)，它可以控制文档内容，将其分隔至一个或多个不相关联的页面 (如：书、幻灯片)。

页面 (Page Sheet) 是物理介质 (如：纸张) 的表面，它包含可打印区域 (Printable Areas) 和不可打印区域 (Non-printable Areas)。用户代理可以调整文档内容的格式，使其显示在可打印区域。

页面盒子 (Page Box) 是一个由长边 (Long Edge) 和短边 (Short Edge) 组成的矩形。长边的方向决定了页面朝向 (Page Orientation)，长边是垂直方向，则页面朝向为纵向 (Portrait Orientation)，反之为横向 (Landscape Orientation)。

CSS 打印无法指定文档是否为双面打印 (Duplex Printing)，是否双面打印应该通过用户代理指定。不管是否双面打印，CSS 打印总是包含左页和右页 (分别通过 :left , :right 指定) 。（或者说 CSS 打印假定所有文档是双面打印）

和 CSS 盒子模型一样，页面盒子模型由外边距 (margin)、边框 (border)、内边距 (padding) 和 内容区域 (content area) 构成。

其中内容区域和外边距有着特殊的功能：

页面进度 (Page Progression)方向 是文档被分隔后的页面的排列方向。比如：现代中文页面进度多是从左至右；而古代中文的页面进度则相反。可以通过设置根元素 (root element) 的 direction 和 writing-mode 属性来改变页面进度。

页面的“第一页”是左页还是右页，可以由页面进度的方向决定，当页面进度方向为从左至右时，第一页是右页；反之为左页。（事实上也可以通过设置根元素的 break-before 属性来强制改变第一页是左页还是右页）

在 CSS 中使用 @media print

在 CSS 中使用 @import

在 HTML 中使用 <link> 标签

在 @media print 或 my-print-style.css 中，可以自由的修改大部分样式。

使用打印媒介查询可以自定义很多样式，当希望改变页面大小、边距等，就需要用到 @page 了。页面上下文 (Page Context) 中仅支持部分 CSS 属性，支持的属性有： margin 、 size 、 marks 、 bleed 以及页面外边距盒子等，不支持的属性将会被忽略。

注：常见浏览器都不支持该属性，推荐使用 Prince

页面的外边距被分成了 16 个页面外边距盒子。每个外边距盒子都有自己的外边距、边框、内边距和内容区域。页面外边距盒子用于创建页眉和页脚，页眉和页脚是页面的一部分，用于补充信息，如页码或标题。

页面外边距盒子需要在 @page 下使用，使用起来和伪类类似，也包含 content 属性。

margin 系列属性（ margin-top 、 margin-right 、 margin-bottom 、 margin-left 和 margin ）用于指定页面外边距大小。

在 CSS2.1 中，页面上下文中只支持 margin 系列属性。而且因为 CSS2.1 的页面上下文中没有字体的概念， margin 系列属性的值的单位不支持 em 和 ex 。

size 属性支持 auto 、 landscape 、 portrait 、 <length>{1,2} 和 <page-size>。

页面上下文也支持使用伪类，其中支持的伪类有： :left 、 :right 、 :first 和 :blank 。

需要双面打印时，通常需要将左页和右页设置不同的样式（如页边距、页码位置）。这时左页和右页可以分别用 :left 和 :right 表示。再次强调， 通过 :left 和 :right 设置左右页面不同样式，并不代表用户代理会将页面双面打印

伪类 :first 用于匹配到文档的第一页。

伪类 :blank 用于匹配文档的空白页。

注意，空白页既可能是左页，又可能是右页，设置左页或右页的样式也会显示在空白页上，如果不希望显示在空白页上，可以清除这些样式。

用于控制元素之前、之后或之中是否分页， 没有生成盒子的块元素不会生效 。

page-break-before 、 page-break-after 属性支持 auto 、 always 、 avoid 、 left 、 right 、 recto 和 verso 。

page-break-inside 属性仅支持 auto 和 avoid ，表示在元素内允许或禁止分页。

orphans 和 windows 用于指定在页面的底部或顶部，元素中允许剩余的最少行数，默认为 2 行。

示例：

https://lon.im/post/css-print.html

参考链接：

一、添加打印样式

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的过程中，会有一个麻烦，需要特别加以注意。

不要在打印的样式表中浮动的块，像这样：float: none。例如，基于Gecko的浏览器

（例如Netscape 6+），当用户用它来浏览一个打印输出页面时，它会截去浮动元素中的内容。

这些内容就不会被传送到打印机，下一个页面也不会有它的踪影――它消失了。

6. 尽可能的在HTML代码中做好内容重要的先后次序，这样在打印样式中可以节省不少的麻烦。

7. 打印与网页不一样，打印一定要留下白边，单位用英寸(in)。

8. 要确保页面上的所有文本以黑色打印，就用通配选择器（见第54页）和!important来创建把每个

标签都格式化为黑色文本的单个样式：

*{ color: ##000# !important }

9. 在打印中显示链接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浏览器菜单栏“文件”中有“打印预览”，可以通过这

打印预览来做测试。

由于客户要求，打印时需把打印的按钮去掉。这个时候就用到了控制打印的样式表了。 <link rel=”stylesheet” type=”text/css” media=”print” href=”print.css” />正因为xhtml和css是分离的，所以我们可以在print.css里自由书写需要打印显示的内容和表现形式。那么这也要求我们在书写xhtml的时候更 多考虑到打印显示效果的需求，良好的扩展标记和结构嵌套，使得我们轻松的使用display:none将内容设置为不显示。然后就是去书写 print.css内容的时候了，你象设置word一样去写你想打印的页面吧。 后来想了想，其实单独写一个css增加了请求次数，就想到了@media print{}的作用，代码如下 @media print{ .printdesc { right: 0width: 685pxheight: 69pxbackground-color: #FFFFFFfloat:leftoverflow:autoborder:0px} .text{ float:rightwidth: 688pxmargin-top:20px} .printlink{ height:0pxdisplay:nonewidth:0pxz-index:-10} .printlink a{ display:none} } 后来想到如果打印页面的某一部分，可以使用iframe来进行操作，现在的打印页面的局部内容基本上就是使用iframe进行处理。

---