《《WEB标准实战》 Chapter 11 打印样式》由会员分享，可在线阅读，更多相关《《WEB标准实战》 Chapter 11 打印样式（7页珍藏版）》请在金锄头文库上搜索。
1、Chapter 11打印样式先前在第10章中，讨论了儿种为文档应用CSS的方法，这一章是要研究打卬样式，指定特别用來打印页而的 CSS规则.只要儿条CSS规则，就能确保结构化标记内容打印到纸上的效果与屏幕上显示的一样好看. 首先來看看media类型，以及它们与提供设备相关CSS的关系.如何指定打印时采用的样式？在冋答这个问题之前，必须熟悉一个概念，那就是我们能为CSS指定媒体类型(media),声明媒体类型将能使 样式针对特定媒体发挥作用.举例來说，如果想使某个链接的样式表专供电脑屏幕使用，那么可以像这样为vlink标签加上media属性： 前面这段代码能保证这个标签所链接的样式只会用于电脑屏
2、幕，或许你想问除了电脑屏幕还能针对那些 媒体？答案是还有不少选择.媒体类型除了上面这个例子使用的screen之外,还有不少媒体类型可供选择，以下是所有能够辨识的媒体类型,W3C 在 CSS2.1 标准中定义的(可在 http:/www.3c.org/TR/CSS21/media.html 找到)： all:适用于所有设备 braille:适用于点字触觉冋馈设备 embossed:适用于点字页打印机 handeld:适用于手持设备(通常具有小屏幕，有限带宽) print:适用于分页内容，以及使用打印预览模式在屏幕上查看的文档 projection:适用于投影简报，举例来说,高射式投影机，请参阅分
3、页内容 (http:/www.w3.org/TR/CSS21/page.html) IU获得更多关于分页媒体的格式信息 screen:主要适用于彩色电脑屏幕 speech:适用于语音合成器留意:CSS2有个功能类似的媒体类型称为aural,请参阅听觉样式表附 录(http:/www.w3.org/TFVCSS21/aural.html)以获得更多信息. tty:适用于使用定宽文字格的媒体(像是电报交换机,终端机或是只具备有限显示能力的手持设备), 开发者不应在tty使用像素长度单位. tv:适用于电视类型的设备(低解析度，低色彩,有限滚动能力，能使用音效).本章会把焦点集小在all,print
4、和screen媒体类型上.指定媒体的两种方法W3C中有两种方法能为CSS制定媒体类型.在本章开头示范了其中一种方法，也就是使用vlink标签与 media属性,接着让我们比较看看这两种方法.方法A:Media属性与稍早的例子类似，方法A里指定只对电脑屏幕使用screenstyles.css,如此应该能避免在打卬，投影，使用手 持设备浏览，使用屏幕阅读器之类的吋候套用screenstyles.css内的规则.部分支持有个重点必须留意，那就是严格支持所有媒体类型有点不切实际,在理想世界里，所有装置与浏览器都应该 严格遵守指定的媒体类型，举例來说，如果写了：那么就会希望只有手持设备(像是PDA,手提
5、电话等)会套用这些样式，不幸的是,标准内容在本文编写的时候 似乎还没有普及到浏览器之外的世界，因此并不是任何设备都支持与其对应的媒体类型.由于这个道理，我们会把焦点放在能够实际应用的媒体类型上比如说打印样式.方法 B:media 或import0import url(Hscreenstyles uss) screen;media print /*打印时使用的样式放置在此*/第二种指定媒体类型的方法是结合mport和media声明举例来说，当我们以mport引入外部样武表 时，能够一并为它指定媒体类型.同样的,media规则能够隔出针对某种特定媒体的规则段落,与方法A类似，以media指定专门用
6、于打印 的样式.放在v head里或者放在外部在方法A里放了vstyle标签作为例子，它应该位于文件的vhead内，但是也能把mport -media放在 以vlink标签引用的外部样式表里惨考第10章的”结合方法B与方法C应用多重样式表”).虽然指定媒体类型时screen是预设值,但没有指定媒体类型时会以all作为预设值.这代表，根据预设,CSS会 应用到所有设备上，屏幕，手持设备，投影机,屏幕朗读程序等等.可以使用多重设定不管使川哪种方法,都能一次指定许多媒体类型，举例來说,如果想以方法A同时为打印，屏幕指定某个样式 表，那么可以这样写： 多重设定值在media属性里要用逗号隔开，同样的，
7、如果我们以方法B指定多种媒体类型时，写法则类似这 样：style type=f,teximport url (11 screenandprint uss”)screen print;media print /*打印时使用的样式放置于此*/在前面的例子中，通过指定多重媒体类型，把screenandprint.css同时给屏幕显示和打印媒体使用，接着再以 media规则隔开打印专用的样式.看过两种指定媒体类型的方法之厉，接着来看看如何实际以它们提供屏幕显示与打卬吋使用的样式.分开屏幕显示与打印的样式假设我们想为同一份文件提供两份css：-个在显示吋使用,另一个在打印时使用.现在以我的个人网站作为
8、示范.我以vlink标签引用密个网站的主体样式表（styles.css）.styles.css的内容只是个简单的import规则，用以 引入另一个外部样式表，这样能够对老旧浏览器（像是Netscape 4.x）隐藏样式设定.在页而的v head里，链接到主体样式表styles.css同时也建立另一个特别针对打印设计的样式表（print.css）.在print.css里，我写了只在页面打印时适用的样 式.然厉,现在要如何确保这些CSS只会针对各白适合的媒体发挥作用呢?标签加上media属性就可以 了 （与方法A 样）.通过为styles.css指定screen,就能确保styles.css包含的
9、样式只会对电脑屏幕使用,同样的，把media属性 设为print就能确保print.css包含的样式只在使用者打印页面吋使用.现在经把屏幕与打印样式分开了，接着让我们看看有哪些样式适合放在打印样式表里头.设计一份打印样式表这份style.css可能包含了排版布局，字体，定位，背景等规则，但是print.css却是一张白纸，筹着我们白定义打 印时应用的样式.设计打印样式要注意的关键就是媒体类型，由于现在正在处理一张纸（而不是浏览器窗口），因此像索长度，人 小并不是最佳选择.用点数指定大小在打印样式表里,用点数制定字体大小是件十分合理的事情在这份打印样式表中，首先就为vbody标签定 义基础字体大
10、小一使用”点”单位.body font-family: nTimes New Romann, serif;font-size: 12pt;实在太简单了，比起用像索单位來说，这个应该更能想彖12点字体会印多大，同吋我们也选用serif字体，这种 字体打印出來比较细致,而且比较容易阅读.隐藏不必要的标签节省墨水网站上或许有不少页而元素在打印版本上完全没有用,像是导航链接，侧边栏,表单以及广告栏之类的元素 在打印时经常只会浪费墨水，我们可以在打印样式表内使用display属性将它们设为不显示使用者经常只想 打印页面的内容.举例来说，如果网站以#nav,#sidebar,#advertising与#s
11、earch分别存放导航条，侧边栏，广告项FI与搜索表 单的话，就能在打印样式表里用以下这段声明把这些内容全部隐藏起来：body font-family: nTimes New Romann, serif;font-size: 12pt;#navz #sidebar, #advertisingz #search display: none;通过在打印样式表里设定display:none;们就能使打印结果隐藏抻这些元索.试着隐藏页面上不必要的元素，很快就能以同一份标记代码轻松为你的网站作出”打印友好”的版本不必在 服务器上用另一份缩减过的模板输出-份完全一样的网站内容-只需要一份额外的CSS文件，
12、指定print 媒体类型,搞定！现在再度证实，以逻辑页面”段落“组织标记结构让未来设计样式更方便如果页面中有个广告横幅，为它指定 id很合理，因为这能把控制权交给CSS.在这个例子中，是在打印时将它隐藏起來去掉背景图片和颜色也是节省墨水，让打印结果更容易阅读的技巧举例来说,如果先前为vbody标签指定了背最图片或是颜色，现在就像这样就能把它去掉：body background: none;当然也能川这个方法去掉其他标签在屏幕样式里指定的背景图片,颜色.揭露链接还有个巧妙的技巧(可惜只能在完整支持CSS2规范的浏览器中产生作用)，那就是揭露链接URLs,让他们在 打印结果中出现在超链接文字厉面.
13、我们能|用:after这个伪类來编写CSS,让支持的浏览器在超连接文字后面打印出它所连接的URU，0前 Mozilla,Safari与Netscape 7.0都支持这个功能，同时，对不支持:after的浏览器使用者來说也不吃亏，他们只 会看到超链接文字本身(Eric Meyer, CSS Design: Going to Print, 止我们为打印样式表加上一-条新规则,凸显内容部分里面的超链接URL:body font-family: nTimes New Roman11 z serif;font-size: 12pt;#navz #sidebar #search display: none;
