看起来如何

在我的个人网站上使用打印样式表与先前我们一同制作的示例十分类似,你能比较一下图11-1和11-2,看看我是怎么设计打印样式的,去掉导航,侧边栏,同时揭露链接内容,调整字体和字体大小让本文更容易阅读.

图11-1 SimpleBits 以浏览器查看,使用屏幕样式表

图11-2 SimpleBits打印版

从图11-1和11-2可以清楚的发现,只要一个小小的CSS文档,就能为任何页面提供专门用来打印的特殊版本.这是个任何项目都很容易加入的功能,同时能在使用者尝试打印你的页面时增加体验.

下次如果你的老板说:"我们需要为网站建立一份打印友好的新模板,而且还要完全一样的目录结构",你就能从后口袋中(或其他放得下这本书的地方)抽出这个小技巧了.

如果你想知道更多打印样式的设计技巧,一定要阅读CSS大师 Eric Meyer的文章 " CSS Design: Going to Print " (http://www.alistapart.com/articles/goingtoprint) 以及 " Print Different " ( http://www.meyerweb.com/eric/articles/webrev/200001.html ).

归纳

我们稍微讨论了打印样式表里面能包含的规则.由于可以指定媒体类型,将打印,屏幕显示所有的样式分开,因此为每种媒体调整细节变得十分简单,容易维护与管理.不再需要为整个网站建立一份打印友好的副本,因为你可以使用相同的标记源代码,配上一份打印专用的CSS文档完成相同的功能.

未来我希望其他设备也能支持更多媒体类型,如果为特定设备设计CSS样式就能让PDA,手提电话与屏幕阅读器正常读取同一份XHTML的话,我们的工作便可以轻松不少.

经典论坛交流：
http://bbs.blueidea.com/thread-2824466-1-1.html

下文：Chapter 12 CSS布局

本文链接：http://www.blueidea.com/tech/web/2008/6037.asp　

出处：蓝色理想
责任编辑：moby

上一页 标记语言——打印样式 [4] 下一页

◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。