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
参考链接：
大多浏览器默认的字号是16px,或是12pt,1em。我们在定义网页字体的大小的时候可以根据布局来选择合适的单位。这里有一个单位之间的相互换算:12px=0.75em,10px=0..能用CCS? 我想用浏览器打印网页，但是碰到分页的问题 是否能在html中插一个分页符，让程序可以控制分页？ 如没有.除非是按打印纸大小编的页面.其实这个问题应该不关HTML事,而是IE打印功能太弱啦,没有分页,只有自己写控件了.
有分页的，需要使用css 这是有关打印的一些css属性
属性 版本 兼容性 继承性 简介
page CSS2 IE5.5+ 有 检索或指定显示对象容器时使用的页面类型（pagetype）。参阅@page规则
page-break-after CSS2 IE4+ 无 检索或设置对象后出现的页分割符
page-break-before CSS2 IE4+ 无 检索或设置对象前出现的页分割符
page-break-inside CSS2 NONE 有 检索或设置对象容器中出现的页分割符
marks CSS2 NONE 无 设置或检索什么样的标志是应该在页容器外边被给予
orphans CSS2 NONE 有 设置或检索对象内容内一定要留在一页范围底端以内的行的最少数量
size CSS2 NONE 有 检索或指定页面规格的调整
widows CSS2 NONE 有 检索或指定一定要留在页面顶部的行数
---------------------------------------------------------------
分页的时候一般用到page-break-after和page-break-before
page-break-after版本：CSS2 兼容性：IE4+ 继承性：无
语法：
page-break-after : auto | always | avoid | left | right | null
参数：
auto : 假如需要在对象之后插入页分割符
always : 始终在对象之后插入页分割符
avoid : 避免在对象后面插入页分割符
left : 在对象后面插入页分割符直到它到达一个空白的左页边
right : 在对象后面插入页分割符直到它到达一个空白的右页边
null : 空值。IE5用来取消页分割符设置
说明：
检索或设置对象后出现的页分割符。
IE5仅支持always值和空白值（null）。
在IE4中此属性不作用于br对象，但是IE5作用。
对应的脚本特性为pageBreakAfter。请参阅我编写的其他书目。
示例：
p { page-break-after: always}
page-break-before版本：CSS2 兼容性：IE4+ 继承性：无
语法：
page-break-before : auto | always | avoid | left | right | null
参数：
auto : 假如需要在对象之前插入页分割符
always : 始终在对象之前插入页分割符
avoid : 避免在对象前面插入页分割符
left : 在对象前面插入页分割符直到它到达一个空白的左页边
right : 在对象前面插入页分割符直到它到达一个空白的右页边
null : 空值。IE5用来取消页分割符设置
说明：
检索或设置对象前出现的页分割符。
IE5仅支持always值和空白值（null）。
在IE4中此属性不作用于br对象，但是IE5作用。
对应的脚本特性为pageBreakBefore。请参阅我编写的其他书目。
示例：
p { page-break-after: always}
---------------------------------------------------------------
举一个例子吧：
<HTML>
<HEAD>
<STYLE>
P {page-break-after: always}
</STYLE>
</HEAD>
<BODY>
<P>这是第一页的内容</P>
<P>这是第二页的内容</P>
剩下是第三页的内容
</BODY>
</HTML>
你在打印预览的时候就能看出效果了。
