创建打印样式表

Creating Print Style Sheets

在你着手一个特别用于打印的新设计之前，应该看看你网站的页面是如何打印的。通常，打印网页中的所有信息都没有问题，因此你可能不一定要给网站添加一个打印机样式表。但是有些情况下，尤其是利用大量的CSS后，网页打印时看起来很糟糕，就像图13-1中的例子。但是即使一张网页在打印时看起来与它在屏幕上一模一样，你也可以通过添加定制的只对打印机的样式，以多种方法改进打印版本的质量（见图13-2）。

提示：打印网页又不浪费纸张和油墨的一种快速的方法就是使用浏览器的打印预览命令。在Windows上通常来自浏览器的File（文件）→ Print Preview（打印预览）菜单。在Mac上，通常先选择File（文件）→ Print（打印），然后在出现的窗口上单击预览（Preview）。利用打印预览可以检查看看网页是否太宽不适合一个页面，以及网页哪里出现中断。

利用!important来使屏显样式失效

Using !important to Override Onscreen Styling

如前面讲过的，创建一个不指定媒体类型的样式表通常很有用（或者利用media="all"）。当你准备好定义一些特别用于打印的规则时，可以只创建一个单独的样式表，使任何在打印时看起来不好的样式都失效。

假设你有一个<h1>标签，设置样式为在屏幕上以蓝色显示，并且你也已经选择好控制文本间距、字号和文本对齐方式的规则。如果要给打印页面改变的唯一东西就是用黑色代替蓝色，那么你不需要创建一个带有新属性组的新样式，而只要创建一个应用在这两种情况的主样式表，以及使<h1>标签的蓝色失效的一个打印样式表。

使用这种方法的一个问题是必须确保打印机样式实际上确实覆盖了主样式表。要成功地做到这一点，必须小心管理层叠。如第5章所述，样式会以复杂的方式互相作用：几个样式可能应用给同一个元素，那些样式的CSS属性会合并，并且彼此覆盖。有一种万无一失的方法确保该属性胜过所有其他属性——!important声明。

当你在一个CSS声明值的后面添加!important时，这个特殊的属性就覆盖了任何与其他样式冲突的属性。给一个打印样式表添加这个规则，确保所有<h1>标签打印都为黑色：

h1 {

    color: #000 !important ;

}

这个h1样式甚至覆盖了更具体的样式，包括#main h1、h1.title和来自主样式表的#wrapper #main h1。

重写文本样式

Reworking Text Styles

你可能不必使文本在屏幕上看起来与打印时一样。创建打印机样式表的一个良好开端是修改font-size（字号）和color（颜色）属性。给文本使用pixel尺寸对于打印机没有什么意义。它是否应该把12px当成12点打印？如果你有一台600DPI的打印机，这个文本将会小到难以辨认。而且虽然亮绿色的文本可能在屏幕上看起来很好，但它在打印时可能出现一种难以阅读的暗灰色。

Pixel和em（见第104页）对于屏幕上的文本有意义，但是用于打印的度量单位是点（point）。点是Word和其他文字处理程序用来测量字号的单位，并且它们也是打印机想要的单位。实际上，大部分网页浏览器把pixel和em解读为一些更适合打印机的单位。大部分浏览器的基础屏显字号——16px——打印出来是12点。但是没有一致的方法来预测每个浏览器将调整的文本尺寸，因此为了最大限度的打印控制，就在打印样式表中特别设置字号为点。要使所有段落以12点的大小打印（用于打印的一个常用尺寸），就用下列规则：

p {

    font-size: 12pt;

}

注意：就像使用em一样，当设置字体为一个点尺寸时，不要添加“s”：是12pt而不是12pts。

同样地，在一台黑白的镭射打印机上打印时，屏幕颜色通常解读得不太好。例如，白纸上的黑色文本比浅灰色字母更易于阅读。而且，如你将在下一节中所见，黑色背景上的白色文本——虽然在屏幕上非常清晰易读，但是打印时的效果经常不好。要使文本在纸上最便于阅读，把所有文本都打印成黑色是个好主意。要使所有段落文本为黑色，给你的打印样式表添加这个样式：

p {

    color: #000;

}

如第369页中提到的，如果你的打印样式表与来自另一个所附样式表的样式竞争，那么使用!important来确保你的打印机样式胜出：

p {

    font-size: 12pt !important;

    color: #000 !important;

}

要确保页面上的所有文本以黑色打印，就用通配选择器（见第54页）和!important来创建把每个标签都格式化为黑色文本的单个样式：

*{ color: ##000# !important }

当然，这个建议仅当你的网站以黑白打印时才得以应用。如果你认为大部分登录你网站的访问者都使用彩色打印机，那么你可能要保留所有文本的颜色，或者使打印时的颜色变得更加鲜明。

为打印定义背景样式

Styling Backgrounds for Print

添加背景图片和颜色给导航按钮、工具条以及其他网页元素，给网页增加了对比和视觉刺激。但是无法确定那些网页在打印时这种背景是否可行。由于彩色背景要消耗打印机的油墨和调色剂，大部分浏览器一般不打印背景，并且即使浏览器具备这一特性，大部分上网者打印时也不会开启背景打印。

此外，即使背景可以打印，它也可能盖过叠在它上面的任何文本。这是真的，尤其对于用彩色背景在显示器上强烈对比的文本，但是在黑白打印机上打印时会融合这一背景。

注意：白色文本黑色背景常常引起的最大问题——访问者将会得到一张空无一物的白纸。幸运的是，大部分当前的网页浏览器在打印没有背景的网页时，都会聪明地把白色文本变成黑色（或者灰色）。

去除背景元素

处理背景最容易的方法是在打印样式表中简单地去除背景。假设把一个标题翻转一下，使得文本为白色而背景为深色，如果创建这种效果的样式以.headHighlight命名，那么复制这个样式名到只对打印的样式表中：

.headHighlight {

    color: #000;

    background: white;

}

这个样式把背景设为白色——纸张的颜色。此外，为得到明晰的打印文本，这个样式把字体颜色设成了黑色。

精华概述

可以利用background-color属性设置背景颜色为白色，像这样：background-color: white。使用background的快捷法也可以获得相同的效果：background: white。记住这个背景属性也可以指定背景图片、图片如何重复以及它的位置。但是当你使用这个快捷法并省略了值时，网页浏览器会恢复它的正常值。换句话说，通过省略背景图片值，网页浏览器就把这个值设成了它的正常设置——none。因此像background: white;这样的声明不仅设置了背景颜色为白色，而且消除了所有背景图片。利用这个background的快捷属性，你实现了两个目的——设置了一个白色背景，并消除了图片——只用很少的代码。

保留背景元素

如果不想去除背景，可以保留它，并且希望访问者把他们的浏览器设置为打印背景。如果在打印样式表中保留了背景元素，并且把保留文本显示在上面，那么要确保文本在有和没有背景时都是清晰的。

在使用背景图片时要考虑的另一件事是：你需要打印出图片吗？假设你把一个公司的logo当作<div>标签的一张背景图片用在网页的横幅上。由于这个logo是在背景上，它可能不会被打印。当从你公司或者客户的网站上打印出来的页面中都缺少logo时，他们可能都不会高兴。既然这样，你就有几种选择。一种是可以把logo当作一个普通的<img>标签而不是背景图片来插入。这种方法可以，但是如果logo在一台全色显示器上看起来很棒而在黑白打印机上打印时一点也不好该怎么办？另一种方法就是保留logo为背景图片，并用<img>标签添加另一个对打印机更友好的logo，然后在屏幕上隐藏<img>标签但打印时显示对打印机友好的那个logo。你将在第380页的教程上学到这第二种方法。

提示：如果你想要绝对确保背景图片可以打印，有另一个技巧性的权宜之计可以用来克服浏览器不打印背景图片的问题。你可以在这个网站上找到：http://web-graphics.com/mtarchive/001703.php。

高级用户的诊所

在打印中显示链接

想象一下你的搭档交给你一篇她在网上找到的精彩论文的打印件。你往前读着然后见到这么一段话：“并且这就是我在此处找到永生的秘密的时候。”下画线告诉你有一个可点击的链接揭示了这个秘密。但是在一张纸上，当然，你无法追踪链接引向的地方。

为了在你自己的页面上防止这种困扰，你可以使链接的URL与剩下的文本一起打印：“此处就是永生的秘密（http://www.pyramind_scam. com/）。”利用一个高级的选择器：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) ") ";

}

由于这个样式利用了尚未完成的CSS 3规则，它只适用于较新的浏览器比如Firefox和Safari，连CSS检验器（见第32页）也对它一无所知。因此如果你在网站上使用了相对根目录的链接，可以用另一种方法来打印正确、完整的URL。更多信息请见这篇文章：www.alistapart.com/articles/ goingtoprint/。

隐藏不要的页面区域

Hiding Unwanted Page Areas

网页经常加载对信息提供和对导航有帮助的东西，比如导航栏、充满有用链接的工具条、搜索框，等等。这些元素对于浏览网页很棒，但在纸上没什么用处。你的网页也可能包含广告、电影和其他人们不喜欢浪费昂贵的油墨和调色剂在上面的小摆设。你可以帮访问者一个忙，把这些屏显的虚饰从他们真正想要打印的内容上去掉。

就如你在本书第1部分中学过的，布局网页的一种方法是围绕不同的布局元素包上<div>标签——横幅、主导航、内容、版权提示，等等。通过使用浮动或者绝对定位给每个<div>定义样式，可以把不同的网页元素正确地放在你要它们呆的地方。可以用相同的结构来创建一个只对打印有效的样式表，利用display属性来隐藏不要的元素（见第141页）。

通过设置display值为none，可以使网页浏览器从网页中去除一个样式元素。因此为了防止打印出工具条，只要重新定义打印样式表中的样式，并设置它的display属性为none：

#sidebar {

    display: none;

}

对于大部分网页，要打印样式表只显示最基本的信息元素——比如logo、主内容和一个版权提示，并隐藏其他的一切。你可以用一个群选择器轻松地隐藏多个元素，像这样：

#banner, #mainNav, #sidebar, #ads, #newsLinks {

    display: none;

}

记住，要把这些样式加入你的打印样式表中，而不是主样式表。否则，你在屏幕上永远也看不到导航、横幅或者网页中的其他重要区域。然而，有时你想要从主样式表中隐藏一些东西，只在打印时把它显示出来。

假设把网站的logo当作网页横幅区域里面的一张背景图片。你可能要这么做，让文本或者链接显示在logo图片一个空白区域的上方。你（或者你的老板和客户）当然要logo显示在所有打印页面上，但是由于并非所有浏览器都能打印背景图片，所以你无法确保打印时logo会显示。一种解决办法是插入一个包含修改过的、对打印机友好的logo图片版本，给这张图片添加一个ID。在display属性设置为none的主样式表中创建一个ID样式；然后给打印样式表中的同一个ID样式设置display属性为block。瞧！logo只在打印时出现了。你会在第380页的教程中看到这种技巧的一个实例。

提示：如果你正使用基于浮动的布局（见第12章），那么可能要修复一个Firefox的bug，它困扰着长段的浮动文本——比如包含主故事或者文章的网页部分的文本。打印时，Firefox被很长的浮动块的位置搞糊涂了。既然如此，你应该不要只在打印的样式表中浮动的这个块，像这样：float: none;。

给打印添加分页符

Adding Page Breaks for Printing

层叠样式表标准2.1版本中包括许多旨在更好地格式化打印网页的CSS属性：从设置网页的方向来定义边距和纸张尺寸（你可以在www.w3.org/TR/CSS21/ page.html上看到全部清单）。不幸的是，当今的网页浏览器只认可这些打印样式中的几种。

两种被广泛认可的属性是page-break-before和page-break-after。page-break-before告诉网页浏览器在一个指定样式之前插入一个分页符。假设你要某些标题始终显

示在网页的顶部，比如一个长文档中不同部分的标题（见图13-3），可以给用于格式化那些标题的样式添加page-break-before: always。同样地，要使一个元素作为打印页上的最后一个项目显示，就给那个元素的样式添加page-break-after: always。

page-break-before属性对于大图片也有用，由于有些浏览器使图片横跨两页打印，就很难立即看到整张图片。如果你有一张带有3个文本段落的网页，后面带有一张图片，然后浏览器把一部分图片打印在一页上，另一部分打印在第2页上。你不想访问者需要用玻璃纸来把图片拼回到一起，因此利用page-break-before属性使图片打印在一张新页面上，并且适合整张页面。

这里是利用这些属性的一种快速的方法。创建两个类样式，以类似于.break_after和.break_before的名字来命名，像这样：

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

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

然后你可以选择性地把这些样式应用给应该打印在网页顶部或者底部的元素。如果你要一个特定的标题打印在页面的顶部，然后使用一个像这样的样式：<h1 class="break_before">。即使这个元素已经应用了一个类，仍可以添加一个另外的类像这样：<h1 class="sectionTitle break_before">。（你将在第385页的下一章中学到这种有用的方法。）