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

创建打印样式表

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的快捷属性，你实现了两个目的——设置了一个白色背景，并消除了图片——只用很少的代码。

标签：

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