web打印(print css).docxVIP

打印样式设计 编辑推荐：? HYPERLINK http://juejin.im/?utm_source=w3cplusutm_medium=wordutm_campaign=q1_website \t _blank 掘金是一个高质量的技术社区，从 CSS 到 Vue.js，性能优化到开源类库，让你不错过前端开发的每一个技术干货。 HYPERLINK http://juejin.im/?utm_source=w3cplusutm_medium=wordutm_campaign=q1_website \t _blank 点击链接查看最新前端内容，或到各大应用市场搜索「? HYPERLINK http://juejin.im/?utm_source=w3cplusutm_medium=wordutm_campaign=q1_website \t _blank 掘金」下载APP，技术干货尽在掌握中。 如果你对许多从事网页开发的人提起打印样式，他们第一反映会想到使用打印CSS。当网页文档需要被打印时，我们已经习惯于创建一个打印样式表。这些样式表确保打印版本清晰并且保证用户不会打印出巨幅图像。然而，CSS也被用来排版图书，商品目录以及宣传册 - 这些内容在以前可能从来没有被设计成网页。 在这篇文章里，我们将探索一些已有的CSS模块，它们不是在网页浏览器中使用，而是为了解决打印和分页的问题。我将解释选择器，属性和值的作用。最后我会提供一个实际例子，你可以把它作为自己试验的基础。对于这个例子，我们需要支持这些特殊CSS。我正在用的是Prince，它是一个商业软件。然而，Prince有针对非商业使用的免费版本，是实验这些例子的好工具。 为什么HTML和CSS对印刷有意义 非要用HTML去维护和用CSS去排版那些不是特意为网页设计的内容似乎有点奇怪。但是当你意识到流行的电子阅读格式例如EPUB和MOBI在底层是由HTML和CSS组成时就没那么奇怪了。另外，即便手稿或目录没有被整个发布到网页上，一些类似的东西可能会。HTML成为了一个方便的格式化标准，比起把所有东西都放在一个Word文档或者传统的桌面出版包中更容易处理。 网页CSS和打印CSS的区别 最大的区别和观念的转变在于印刷文档需要一个固定大小的页面模型。在网页上我们不断被提醒我们不知道视窗尺寸，在印刷中每个固定尺寸的页面承载了我们所有的东西。因为页面尺寸固定，我们需要把文档考虑成网页的集合，即分页媒体，而不是连续媒体即网页。 分页媒体的内容在网页上毫无意义。例如，你需要能生成页码，给章节标题添加边距，适当划分内容并保证图形和说明不脱钩。也许你要创建交叉参考和脚注，索引和文档目录。你可以把文档引入桌面发布包并且手动创建这些内容，然而，当你下次更新复本时需要重复这些工作。这时候CSS就起到作用，它的规则是为创建分页媒体而设计。 因为规则是为分页媒体而设计，在这篇文章里我们不考虑浏览器兼容性 - 这没多大意义。稍后，我们会看一个被设计成使用特定规则把HTML和CSS转换成PDF的用户代理。 规则 你已知的大多数CSS在印刷品排版中有效。在印刷品中比较特别的是，我们有“ HYPERLINK /TR/css3/ \t _blank CSS分页媒体模块”和“ HYPERLINK /TR/css-gcpm-3/ \t _blank CSS分页媒体模块生成内容”规则。让我们看一下这些规则如何生效。 @PAGE 规则 @page规则允许你指定页面盒子的许多方面。例如，你想要指定页面尺寸。下面这条规则指定默认页面尺寸是5.5*8.5英尺。如果你想打印一本书，也许通过按需打印，找到可用尺寸很重要。 @page { size: 5.5in 8.5in; } 除了可以用长度值声明尺寸，你还可以使用纸质尺寸关键字，例如A4或““legal”。 @page { size: A4; } 你也可以使用关键字来指定页面方向 - ““portrait””或“landscape”。 @page { size: A4 landscape; } 理解页面模块 进一步讨论前，我们需要理解分页媒体运行的页面模块，因为它和运行在屏幕上的内容表现上有一些不同。 页面模块定义了一块页面区域和16个环绕的 HYPERLINK /TR/css3/ \l margin-boxes \t _blank 边距盒。你可以控制页面区域的尺寸以及页面区域边界与页面自身结尾之间边距的尺寸。规范中的表格很好得解释了如何定义这些盒子尺寸。 页面区域是页面上一块页面内容流动的空间。当超出了它的容纳范围，就会创建另一个页面。边界盒只在CSS生成的内容上使用。 页面左边距和右边距 页面模块的另一方面是它定义了伪类选择器来