位置：首页>> 网络编程>> 网页设计>> [翻译]标记语言和样式手册 Chapter 11 打印样式（4）

[翻译]标记语言和样式手册 Chapter 11 打印样式（4）

作者：zhaozy　来源：3user.com　发布时间：2008-02-11 18:44:00　

标签：样式,标记,css,手册,打印

现在已经把屏幕与打印样式分开了,接着让我们看看有哪些样式适合放在打印样式表里头.

设计一份打印样式表

这份style.css可能包含了排版布局,字体,定位,背景等规则,但是print.css却是一张白纸,等着我们自定义打印时应用的样式.

设计打印样式要注意的关键就是媒体类型,由于现在正在处理一张纸(而不是浏览器窗口),因此像素长度,大小并不是最佳选择.

用点数指定大小

在打印样式表里,用点数制定字体大小是件十分合理的事情.在这份打印样式表中,首先就为<body>标签定义基础字体大小 -- 使用"点"单位.

body {
  font-family: "Times New Roman", serif;
  font-size: 12pt;
  }

实在太简单了,比起用像素单位来说,这个应该更能想象12点字体会印多大,同时我们也选用serif字体,这种字体打印出来比较细致,而且比较容易阅读.

隐藏不必要的标签节省墨水

网站上或许有不少页面元素在打印版本上完全没有用,像是导航链接,侧边栏,表单以及广告栏之类的元素在打印时经常只会浪费墨水,我们可以在打印样式表内使用display属性将它们设为不显示.使用者经常只想打印页面的内容.

举例来说,如果网站以#nav,#sidebar,#advertising与#search分别存放导航条,侧边栏,广告项目与搜索表单的话,就能在打印样式表里用以下这段声明把这些内容全部隐藏起来:

body {
  font-family: "Times New Roman", serif;
  font-size: 12pt;
  }
#nav, #sidebar, #advertising, #search {
  display: none;
  }

通过在打印样式表里设定display:none;我们就能使打印结果隐藏掉这些元素.

试着隐藏页面上不必要的元素,很快就能以同一份标记代码轻松为你的网站作出"打印友好"的版本.不必在服务器上用另一份缩减过的模板输出一份完全一样的网站内容 -- 只需要一份额外的CSS文件,指定print媒体类型,搞定!

现在再度证实,以逻辑页面"段落"组织标记结构让未来设计样式更方便.如果页面中有个广告横幅,为它指定id很合理,因为这能把控制权交给CSS.在这个例子中,是在打印时将它隐藏起来.

去掉背景图片和颜色也是节省墨水,让打印结果更容易阅读的技巧之一.

举例来说,如果先前为<body>标签指定了背景图片或是颜色,现在就像这样就能把它去掉:

body {
background: none;
}

当然也能用这个方法去掉其他标签在屏幕样式里指定的背景图片,颜色.

投稿

猜你喜欢