标记语言——打印样式(3)
分开屏幕显示与打印的样式
假设我们想为同一份文件提供两份CSS:一个在显示时使用,另一个在打印时使用.现在以我的个人网站作为示范.
我以<link>标签引用整个网站的主体样式表(styles.css).styles.css的内容只是个简单的@import规则,用以引入另一个外部样式表,这样能够对老旧浏览器(像是Netscape 4.x)隐藏样式设定.
在页面的<head>里,链接到主体样式表styles.css
<link rel="stylesheet" type="text/css" href="/css/style.css" />
同时也建立另一个特别针对打印设计的样式表(print.css).在print.css里,我写了只在页面打印时适用的样式.
<link rel="stylesheet" type="text/css" href="/css/style.css" />
<link rel="stylesheet" type="text/css" href="/css/print.css" />
然后,现在要如何确保这些CSS只会针对各自适合的媒体发挥作用呢?为<link>标签加上media属性就可以了(与方法A一样).
<link rel="stylesheet" type="text/css" media="screen" href="/css/styles.css" />
<link rel="stylesheet" type="text/css" media="print" href="/css/print.css" />
通过为styles.css指定screen,就能确保styles.css包含的样式只会对电脑屏幕使用,同样的,把media属性设为print就能确保print.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;
}
当然也能用这个方法去掉其他标签在屏幕样式里指定的背景图片,颜色.