最近评论
正在载入评论列表...
教程：创建一个打印样式表
Tutorial: Building a Print Style Sheet
在这个教程中，你将创建一个打印样式表。为了使网页的打印版本更美观，你将添加样式来去除不需要的网页元素和背景，改变文本格式，添加一个可打印的logo，并在页面上打印附了URL的所有链接。
开始之前，你需要到本书的配套网站www.sawmac.com/css/上下载教程文件。点击tutorial链接，下载文件。所有文件附在一个ZIP文档里面，因此你要先给它解压缩（详细的关于解压缩的说明也在该网站上）。用于本次教程的文件包含在名为chapter_13的文件夹里。
去除不需要的网页元素
Remove Unneeded Page Elements
开始前，你首先需要理解网页是如何布局的，以便你能决定要打印哪些元素。
1. 启动一个网页浏览器，并打开chapter_13 → cosmo.html。
这个CosmoFarmer网页是一个基于浮动的布局，由几个<div>标签组成（见图13-4）。十有八九，打印这张网页的人最感兴趣的都是主内容——Bathtub Hydroponics（浴缸水栽培）的故事。打印Subscribe和Contact链接、导航栏以及新闻链接都只是浪费调色剂，因此你的打印样式表应该隐藏页面的这些部分。
2. 在文本编辑器中，创建一个新文件命名为print.css，并把它保存在chapter_13文件夹中。
在你的新打印样式表中，首要任务就是隐藏导航栏和不需要打印的网页其他部分。
3. 利用display属性，创建一个新的群选择器来隐藏网站工具、导航栏和新闻工具条，像这样：
#sitetools, #nav, #news {
display: none;
}
随着display属性设为none，网页浏览器隐藏了那些元素，因此它们不会被打印出来。但是你首先要给网页附上这个外部样式表，以便浏览器可以找到它。
4. 在文本编辑器中，打开chapter_13 → cosmo.html。
这张网页已经附了一个样式表——global.css。这个外部样式表给网页提供了在浏览器中显示的所有格式。而且，由于这个样式表是利用没有指定媒体属性的<link>标签附上的，它也应用在网页打印的时候。然后，打印样式表要覆盖那些在打印中不好看的来自global.css文件的任何样式。这个过程的第一步是在这张网页的HTML中把打印样式表附在global.css文件之后。
5. 在页头找到惯常附加global.css文件的<link>标签。在这个标签后面插入一个空白的行，然后添加以下内容：
<link href="print.css" rel="stylesheet" type="text/css" media="print" />
如果两个样式的属性有同名的冲突，那么来自最后在网页中链接的样式表中的属性胜出，因此这个<link>必须处在另一个<link>之后。这样，如果global.css文件有一个类命名为.copyright，创建黑色背景、白色文本、10px字号，你可以在打印样式表中创建另一个样式命名为.copyright，设置白色背景、黑色文本、12点字号。即使这两个样式共用相同的名字，但来自打印样式表的属性胜出，因为它是最后一个链接的。（有关层叠规则的更多细节请见第87页。）
6. 保存print.css和cosmo.html文件，然后在网页浏览器上预览cosmo.html。
这张网页应该看起来与上面第1步时没有区别。这是因为你还没有打印。你可以通过网页浏览器的打印预览命令看到这个打印样式表的效果。
7. 如果你正使用Windows，选择File（文件）→ Print Preview（打印预览）。Mac爱好者们应该选择File（文件）→ Print（打印），然后在出现的打印窗口中点击预览（Preview）按钮。
在打印预览窗口中，你还将看到左右两边的工具条以及在横幅区域的两个链接已经不见了。但是这个设计看起来仍然不太好，主内容没有如愿地填满网页。你将在接下来的步骤中修复这一点以及一些其他东西。
去除背景并调整布局
Removing Backgrounds and Adjusting the Layout
有时候背景图片和颜色被打印出来了，但是大多数时候没有打印出来。这取决于浏览器和访问者的设置。有些浏览器根本不打印背景元素，其他的浏览器则可以打印，但是给人们提供打开或者关闭的选择。当打印页面一定要和屏幕版本一模一样时，打印背景就很有用。但是当你的背景只会使人分心并且浪费油墨时，就帮访问者一个忙把它们去除。
1. 返回到文本编辑器和print.css文件。添加两个新样式来去除背景颜色和横幅：
body {
background: #FFF;
}
#banner {
background: #FFF;
}
在屏幕上观看时，这张网页有一个灰色背景和在内容左右两边产生阴影效果的一张图片。横幅有张包括了网站logo的图片。这两个样式设置网页和横幅的背景颜色为白色，并去除了图片。（关于背景图片也消失的缘由请见第183页。）
现在来稍微调整一下布局，以便文本填满整张打印页面。从改变设置网页内容区域完整宽度为760px的#wrapper ID样式开始。
2. 给print.css样式表添加另一种样式：
#wrapper {
background: #FFF;
border-style: none;
width: auto;
}
这个样式中的第一个声明的作用就像前一个步骤一样：设置背景为白色，并去除所有背景图片。第二个属性去除了显示在包装左右两边的黑色边线。
最后一个声明——width:auto——影响了网页的整体布局。它覆盖了global.css文件中760px宽的设置，并使精确宽度达到网页浏览器窗口的宽度。Auto简单地使<div>填满整个可用的宽度，因此不论纸张尺寸大小——letter、A4或者任何其它一种——内容都会填满打印页面的宽度。
下一个问题是包含文章的网页部分。这是一个称作#main的<div>标签，如图13-4所示。
3. 给print.css文件添加一个新样式：
#main {
border: none;
padding: 0;
width: auto;
}
头两个属性在网页的屏显版本中消除了边框和额外可见的空白空间。第3个声明使文本填满页面的宽度，就像你在第2步中给#wrapper添加的这个width: auto设置一样。
现在要精益求精一点。处在网页底部的版权提示用一个大大的padding-left值向左缩进了。如果这个元素与网页的其他文本整齐地排列在左边看起来可能会更好些。
4. 给网页的版权提示区域添加一个样式：
#legal {
padding-left: 0px;
}
放心保存这个文件，在网页浏览器上预览cosmo.html文件，并用打印预览功能看看出现的打印版本是怎样的。
重设文本格式
Reformatting the Text
虽然彩色文本和以像素为单位的字号在屏幕上可能可行，但是镭射打印机更识别以点为单位的尺寸。而且，实心的黑色文本在白色纸张上看起来会更好些。在本节中，你将相应地调整文本使它在打印时也好看些。
1. 在print.css文件中，添加以下CSS规则：
* {
color: #000000 !important;
}
这个样式是个有力的CSS等式。它本质上告诉每个标签使用黑色文本，无论什么标签。这个*（通配选择器）是给网页中的每个单一元素指定样式的一种快速方式（见第54页），虽然!important声明取消了层叠导致的任何冲突。
因此即使*不是一个非常具体的样式，这里的color属性还是胜过在更具体的样式比如#main h1或者#nav #mainNav a中的同一属性。
接下来将给文本设置新的字号。
2. 添加以下3个样式：
h1 {
font-size: 18pt !important;
}
h2 {
font-size: 14pt !important;
font-weight: bold !important;
}
p {
font-size: 10pt !important;
}
这些样式使这些标签中的每一个都使用一种对打印机更友好的字号。新增的!important使这些字号始终应用给那些标签，不管与global.css样式表冲突的任何样式是怎样定义的。
注意：在这个例子中，h1、h2和p是从cosmo.html网页打印的唯一标签。你的网页可能要求给其他标签比如list、blockquote等重新定义文本字号。
显示logo
Displaying the Logo
由于横幅上的logo是一张背景图片，所以并非所有浏览器都会把它打印出来。因为CosmoFarmer国际总部的掌权者不想失去宣扬他们品牌的机会，他们已经想出了另一种让他们的logo留在打印页面上的方法。在cosmo.html网页的HTML中是包括了一个更小的黑白版logo的一个<img>标签。然而，它不显示在屏幕上，因为global.css文件利用display: none的技巧把它隐藏了，就像第376页中的第3步一样。现在要使它变成可见。
1. 在print.css文件中，添加一个样式使logo显示出来：
#logo {
display: block;
}
Block是要用来对抗display属性的none值作用的一个值，这就是它的职责所在。现在当访问者打印网页时，简化的logo就会显示出来了。
显示URL
Displaying URLs
为了更完美一些，将再添加一个样式，使得在网页的每个链接文本后面打印出URL。这样，屏显文本“点击此处发现更多内容”将打印成“点击此处发现更多
内容（http://www.outmore.com/）”，以便阅读打印版的人们可以参考链接地址访问网站。这种方法使用了一些Internet Explorer 6（到编写本书为止包括IE 7）不识别的高级的CSS，但是它也不会对那些浏览器造成任何伤害，并且对于用Firefox和Safari从你网站打印的访问者来说，这是一个很大的改进。
1. 给print.css样式表添加最后一个样式：
a:after {
content: " (" attr(href) ") ";
}
在content: 列中，这个样式在每个链接末端（a:after部分）增加了URL（attr（href）部分）。
2. 保存print.css文件。在网页浏览器上打开cosmo.html并打印。
这张打印页面应该看起来有点像图13-5——一张简洁、干练，且只有实际内容的网页。
你会在chapter_13_finished文件夹中找到这张网页的完成版本。
图书导读
