网页制作经验分享：创建打印样式表(2)

保留背景元素

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

在使用背景图片时要考虑的另一件事是：你需要打印出图片吗？假设你把一个公司的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告诉网页浏览器在一个指定样式之前插入一个分页符。假设你要某些标题始终显

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有