《WEB标准实战》 Chapter 11 打印样式.doc

1、 Chapter 11 打印样式 先前在第 10 章中 ,讨论了几种为文档应用 CSS 的方法,这一章是要研究打印样式,指定特别用来打印页面的CSS 规则.只要几条 CSS 规则 ,就能确保结构化标记内容打印到纸上的效果与屏幕上显示的一样好看.首先来看看 media 类型,以及它们与提供设备相关 CSS 的关系.如何指定打印时采用的样式?在回答这个问题之前,必须熟悉一个概念,那就是我们能为 CSS 指定媒体类型(media), 声明媒体类型将能使样式针对特定媒体发挥作用.举例来说,如果想使某个链接的样式表专供电脑屏幕使用,那么可以像这样为标签加上 media 属性:前面这段代码能保证这个标签所

2、链接的样式只会用于电脑屏幕,或许你想问:“ 除了电脑屏幕还能针对那些媒体?“答案是.还有不少选择.媒体类型除了上面这个例子使用的 screen 之外, 还有不少媒体类型可供选择 ,以下是所有能够辨识的媒体类型,W3C在 CSS2.1 标准中定义的 (可在 http:/www.3c.org/TR/CSS21/media.html 找到): all: 适用于所有设备 braille: 适用于点字触觉回馈设备 embossed: 适用于点字页打印机 handeld: 适用于手持设备(通常具有小屏幕,有限带宽 ) print: 适用于分页内容,以及使用打印预览模式在屏幕上查看的文档 projectio

3、n: 适用于投影简报,举例来说,高射式投影机,请参阅分页内容(http:/www.w3.org/TR/CSS21/page.html)以获得更多关于分页媒体的格式信息 screen: 主要适用于彩色电脑屏幕 speech: 适用于语音合成器.留意:CSS2 有个功能类似的媒体类型称为 aural,请参阅听觉样式表附录(http:/www.w3.org/TR/CSS21/aural.html)以获得更多信息. tty: 适用于使用定宽文字格的媒体(像是电报交换机,终端机或是只具备有限显示能力的手持设备),开发者不应在 tty 使用像素长度单位 . tv: 适用于电视类型的设备(低解析度, 低色彩

4、,有限滚动能力, 能使用音效).本章会把焦点集中在 all,print 和 screen 媒体类型上.指定媒体的两种方法W3C 中有两种方法能为 CSS 制定媒体类型. 在本章开头示范了其中一种方法, 也就是使用标签与media 属性 ,接着让我们比较看看这两种方法.方法 A:Media 属性与稍早的例子类似,方法 A 里指定只对电脑屏幕使用 screenstyles.css,如此应该能避免在打印, 投影,使用手持设备浏览,使用屏幕阅读器之类的时候套用 screenstyles.css 内的规则.部分支持有个重点必须留意,那就是严格支持所有媒体类型有点不切实际 ,在理想世界里,所有装置与浏览器

5、都应该严格遵守指定的媒体类型,举例来说,如果写了:那么就会希望只有手持设备(像是 PDA,手提电话等) 会套用这些样式,不幸的是, 标准内容在本文编写的时候似乎还没有普及到浏览器之外的世界,因此并不是任何设备都支持与其对应的媒体类型 .由于这个道理,我们会把焦点放在能够实际应用的媒体类型上 ,比如说打印样式.方法 B:media 或importimport url(“screenstyles.css“) screen;media print /* 打印时使用的样式放置在此 */第二种指定媒体类型的方法是结合import 和media 声明 .举例来说,当我们以import 引入外部样式表时,能

6、够一并为它指定媒体类型.同样的,media 规则能够隔出针对某种特定媒体的规则段落,与方法 A 类似,以media 指定专门用于打印的样式.放在 里或者放在外部在方法 A 里放了 标签作为例子 ,它应该位于文件的内,但是也能把import 与media 放在以 标签引用的外部样式表里(参考第 10 章的“结合方法 B 与方法 C 应用多重样式表“).虽然指定媒体类型时 screen 是预设值, 但没有指定媒体类型时会以 all 作为预设值.这代表, 根据预设,CSS会应用到所有设备上,屏幕,手持设备,投影机,屏幕朗读程序等等.可以使用多重设定不管使用哪种方法,都能一次指定许多媒体类型,举例来说

7、,如果想以方法 A 同时为打印,屏幕指定某个样式表,那么可以这样写:多重设定值在 media 属性里要用逗号隔开,同样的,如果我们以方法 B 指定多种媒体类型时, 写法则类似这样:import url(“screenandprint.css“) screen, print;media print /* 打印时使用的样式放置于此 */在前面的例子中,通过指定多重媒体类型,把 screenandprint.css 同时给屏幕显示和打印媒体使用,接着再以media 规则隔开打印专用的样式.看过两种指定媒体类型的方法之后,接着来看看如何实际以它们提供屏幕显示与打印时使用的样式 .分开屏幕显示与打印的样

8、式假设我们想为同一份文件提供两份 CSS:一个在显示时使用 ,另一个在打印时使用.现在以我的个人网站作为示范.我以 标签引用整个网站的主体样式表(styles.css).styles.css 的内容只是个简单的import 规则,用以引入另一个外部样式表,这样能够对老旧浏览器(像是 Netscape 4.x)隐藏样式设定.在页面的里,链接到主体样式表 styles.css同时也建立另一个特别针对打印设计的样式表(print.css).在 print.css 里,我写了只在页面打印时适用的样式.然后,现在要如何确保这些 CSS 只会针对各自适合的媒体发挥作用呢?为 标签加上 media 属性就可

9、以了(与方法 A 一样).通过为 styles.css 指定 screen,就能确保 styles.css 包含的样式只会对电脑屏幕使用, 同样的,把 media 属性设为 print 就能确保 print.css 包含的样式只在使用者打印页面时使用.现在已经把屏幕与打印样式分开了,接着让我们看看有哪些样式适合放在打印样式表里头 .设计一份打印样式表这份 style.css 可能包含了排版布局,字体,定位,背景等规则, 但是 print.css 却是一张白纸,等着我们自定义打印时应用的样式.设计打印样式要注意的关键就是媒体类型,由于现在正在处理一张纸 (而不是浏览器窗口),因此像素长度,大小并

10、不是最佳选择.用点数指定大小在打印样式表里,用点数制定字体大小是件十分合理的事情 .在这份打印样式表中,首先就为标签定义基础字体大小 - 使用“ 点“单位.body font-family: “Times New Roman“, serif;font-size: 12pt;实在太简单了,比起用像素单位来说,这个应该更能想象 12 点字体会印多大, 同时我们也选用 serif 字体, 这种字体打印出来比较细致,而且比较容易阅读.隐藏不必要的标签节省墨水网站上或许有不少页面元素在打印版本上完全没有用,像是导航链接 ,侧边栏,表单以及广告栏之类的元素在打印时经常只会浪费墨水,我们可以在打印样式表内使

11、用 display 属性将它们设为不显示. 使用者经常只想打印页面的内容.举例来说,如果网站以#nav,#sidebar,#advertising 与#search 分别存放导航条, 侧边栏,广告项目与搜索表单的话,就能在打印样式表里用以下这段声明把这些内容全部隐藏起来 :body font-family: “Times New Roman“, serif;font-size: 12pt;#nav, #sidebar, #advertising, #search display: none;通过在打印样式表里设定 display:none;我们就能使打印结果隐藏掉这些元素.试着隐藏页面上不必要

12、的元素,很快就能以同一份标记代码轻松为你的网站作出 “打印友好“的版本. 不必在服务器上用另一份缩减过的模板输出一份完全一样的网站内容 - 只需要一份额外的 CSS 文件,指定 print媒体类型,搞定!现在再度证实,以逻辑页面“段落“ 组织标记结构让未来设计样式更方便. 如果页面中有个广告横幅,为它指定id 很合理,因为这能把控制权交给 CSS.在这个例子中,是在打印时将它隐藏起来.去掉背景图片和颜色也是节省墨水,让打印结果更容易阅读的技巧之一 .举例来说,如果先前为标签指定了背景图片或是颜色, 现在就像这样就能把它去掉:body background: none;当然也能用这个方法去掉其他

13、标签在屏幕样式里指定的背景图片,颜色.揭露链接还有个巧妙的技巧(可惜只能在完整支持 CSS2 规范的浏览器中产生作用),那就是揭露链接 URLs,让他们在打印结果中出现在超链接文字后面.我们能 用:after 这个伪类来编写 CSS,让支持的浏览器在超连接文字后面打印出它所连接的 URL,目前Mozilla,Safari 与 Netscape 7.0 都支持这个功能,同时,对不支持:after 的浏览器使用者来说也不吃亏,他们只会看到超链接文字本身(Eric Meyer, “CSS Design: Going to Print“ , http:/ URL:body font-family: “

14、Times New Roman“, serif;font-size: 12pt;#nav, #sidebar, #search display: none;#content a:link:after, #content a:visited:after content: “ ( “attr(href)“ ) “;这条规则会使打印出来的页面在超链接文字后面加上 URL.URL 会被放在一组括号里面,前后各留一个空格, 这只会在页面的#content 区域发生作用.虽然可以编写一条通用规则揭露所有超链接,但在这里我们选择只揭露内容部分里的超链接 - 排除页首,页尾与其他区域的链接 .再次提醒,虽然这

15、个功能目前只有少数几个浏览器支持,但是对不支持:after 伪类的浏览器完全无害,他们只会直接忽略这项规则.链接文字刚刚我们对连接 URL 动了些巧妙的手脚, 但是也别忘了以独特的方式强调链接文字, 让读者能在阅读一般内容时,轻易辨别夹杂在内的超链接.body font-family: “Times New Roman“, serif;font-size: 12pt;#nav, #sidebar, #search display: none;a:link, a:visited color: blue;text-decoration: underline;#content a:link:afte

16、r, #content a:visited:after content: “ (“ attr(href) “) “;当然,也可以在此任意选择颜色,现在我是用预设的蓝色并加上下划线,因为一般人一眼就能将它看成超链接,对黑白打印来说,能够试验出某种灰色,让链接与一般文字产生足够的对比.预览打印节省墨水另一个节省墨水的技巧,是以浏览器的预览打印功能试着显示页面的打印效果 ,而不是真的把整份页面印到纸上.在大多数浏览器里,文件 - 打印 对话框对有个预览选项,让你查看页面的打印效果,你能在这里好好观察一下打印样式表的效果.看起来如何在我的个人网站上使用打印样式表与先前我们一同制作的示例十分类似,你能比

17、较一下图 11-1 和 11-2,看看我是怎么设计打印样式的,去掉导航,侧边栏,同时揭露链接内容, 调整字体和字体大小让本文更容易阅读.图 11-1 SimpleBits 以浏览器查看,使用屏幕样式表图 11-2 SimpleBits 打印版从图 11-1 和 11-2 可以清楚的发现 ,只要一个小小的 CSS 文档, 就能为任何页面提供专门用来打印的特殊版本.这是个任何项目都很容易加入的功能,同时能在使用者尝试打印你的页面时增加体验.下次如果你的老板说:“我们需要为网站建立一份打印友好的新模板, 而且还要完全一样的目录结构“, 你就能从后口袋中(或其他放得下这本书的地方) 抽出这个小技巧了

18、.如果你想知道更多打印样式的设计技巧,一定要阅读 CSS 大师 Eric Meyer 的文章 “ CSS Design: Going to Print “ (http:/ 以及 “ Print Different “ ( http:/ ).归纳我们稍微讨论了打印样式表里面能包含的规则.由于可以指定媒体类型 ,将打印,屏幕显示所有的样式分开,因此为每种媒体调整细节变得十分简单,容易维护与管理.不再需要为整个网站建立一份打印友好的副本,因为你可以使用相同的标记源代码,配上一份打印专用的 CSS 文档完成相同的功能.未来我希望其他设备也能支持更多媒体类型,如果为特定设备设计 CSS 样式就能让 PDA,手提电话与屏幕阅读器正常读取同一份 XHTML 的话,我们的工作便可以轻松不少.