讨论了几种为文档应用CSS的方法,这一章是要研究打印样式,指定特别用来打印页面的CSS规则.只要几条CSS规则,就能确保结构化标记内容打印到纸上的效果与屏幕上显示的一样好看. 网页教学网
首先来看看media类型,以及它们与提供设备相关CSS的关系.
如何指定打印时采用的样式?
在回答这个问题之前,必须熟悉一个概念,那就是我们能为CSS指定媒体类型(media),声明媒体类型将能使样式针对特定媒体发挥作用.
举例来说,如果想使某个链接的样式表专供电脑屏幕使用,那么可以像这样为<link>标签加上media属性:
<link rel="stylesheet" type="text/css" media="screen" href="screenstyles.css" /> Webjx.Com
前面这段代码能保证这个标签所链接的样式只会用于电脑屏幕,或许你想问:"除了电脑屏幕还能针对那些媒体?"答案是...还有不少选择.
媒体类型
除了上面这个例子使用的screen之外,还有不少媒体类型可供选择,以下是所有能够辨识的媒体类型,W3C在CSS2.1标准中定义的(可在http://www.3c.org/TR/CSS21/media.html找到):
- all: 适用于所有设备
- braille: 适用于点字触觉回馈设备
- embossed: 适用于点字页打印机
- handeld: 适用于手持设备(通常具有小屏幕,有限带宽)
- print: 适用于分页内容,以及使用打印预览模式在屏幕上查看的文档
- projection: 适用于投影简报,举例来说,高射式投影机,请参阅分页内容(http://www.w3.org/TR/CSS21/page.html)以获得更多关于分页媒体的格式信息
- screen: 主要适用于彩色电脑屏幕
- speech: 适用于语音合成器.留意:CSS2有个功能类似的媒体类型称为 aural,请参阅听觉样式表附录(http://www.w3.org/TR/CSS21/aural.html)以获得更多信息.
- tty: 适用于使用定宽文字格的媒体(像是电报交换机,终端机或是只具备有限显示能力的手持设备),开发者不应在tty使用像素长度单位.
- tv: 适用于电视类型的设备(低解析度,低色彩,有限滚动能力,能使用音效).
本章会把焦点集中在all,print和screen媒体类型上.
指定媒体的两种方法
W3C中有两种方法能为CSS制定媒体类型.在本章开头示范了其中一种方法,也就是使用<link>标签与media属性,接着让我们比较看看这两种方法.
方法A:Media属性
<link rel="stylesheet" type="text/css" media="screen" href="screenstyles.css" />
与稍早的例子类似,方法A里指定只对电脑屏幕使用screenstyles.css,如此应该能避免在打印,投影,使用手持设备浏览,使用屏幕阅读器之类的时候套用screenstyles.css内的规则.
部分支持
有个重点必须留意,那就是严格支持所有媒体类型有点不切实际,在理想世界里,所有装置与浏览器都应该严格遵守指定的媒体类型,举例来说,如果写了:
<link rel="stylesheet" type="text/css" media="handheld" href="screenstyles.css" />
那么就会希望只有手持设备(像是PDA,手提电话等)会套用这些样式,不幸的是,标准内容在本文编写的时候似乎还没有普及到浏览器之外的世界,因此并不是任何设备都支持与其对应的媒体类型.
由于这个道理,我们会把焦点放在能够实际应用的媒体类型上,比如说打印样式.
方法B:@media或@import
<style type="text/css">
@import url("screenstyles.css") screen;
@media print {
/* 打印时使用的样式放置在此 */
}
</style>
第二种指定媒体类型的方法是结合@import和@media声明.举例来说,当我们以@import引入外部样式表时,能够一并为它指定媒体类型.
同样的,@media规则能够隔出针对某种特定媒体的规则段落,与方法A类似,以@media指定专门用于打印的样式.
放在<head>里或者放在外部
在方法A里放了<style>标签作为例子,它应该位于文件的<head>内,但是也能把@import与@media放在以<link>标签引用的外部样式表里(参考第10章的"结合方法B与方法C应用多重样式表").
虽然指定媒体类型时screen是预设值,但没有指定媒体类型时会以all作为预设值.这代表,根据预设,CSS会应用到所有设备上,屏幕,手持设备,投影机,屏幕朗读程序等等.
可以使用多重设定
不管使用哪种方法,都能一次指定许多媒体类型,举例来说,如果想以方法A同时为打印,屏幕指定某个样式表,那么可以这样写:
<link rel="stylesheet" type="text/css" media="screen, print" href="screenstyles.css" />
多重设定值在media属性里要用逗号隔开,同样的,如果我们以方法B指定多种媒体类型时,写法则类似这样:
<style type="text/css">
@import url("screenandprint.css") screen, print;
@media print {
/* 打印时使用的样式放置于此 */
}
</style> Webjx.Com
在前面的例子中,通过指定多重媒体类型,把screenandprint.css同时给屏幕显示和打印媒体使用,接着再以@media规则隔开打印专用的样式.
看过两种指定媒体类型的方法之后,接着来看看如何实际以它们提供屏幕显示与打印时使用的样式.
分开屏幕显示与打印的样式
假设我们想为同一份文件提供两份CSS:一个在显示时使用,另一个在打印时使用.现在以我的个人网站作为示范.
我以<link>标签引用整个网站的主体样式表(styles.css).styles.css的内容只是个简单的@import规则,用以引入另一个外部样式表,这样能够对老旧浏览器(像是Netscape 4.x)隐藏样式设定.
新建一个前端学习qun438905713，在群里大多数都是零基础学习者，大家相互帮助，相互解答，并且还准备很多学习资料，欢迎零基础的小伙伴来一起交流。
在页面的<head>里,链接到主体样式表styles.css
<link rel="stylesheet" type="text/css" href="/css/style.css" />
同时也建立另一个特别针对打印设计的样式表(print.css).在print.css里,我写了只在页面打印时适用的样式. Webjx.Com
<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;
} Webjx.Com
通过在打印样式表里设定display:none;我们就能使打印结果隐藏掉这些元素.
试着隐藏页面上不必要的元素,很快就能以同一份标记代码轻松为你的网站作出"打印友好"的版本.不必在服务器上用另一份缩减过的模板输出一份完全一样的网站内容 -- 只需要一份额外的CSS文件,指定print媒体类型,搞定!
现在再度证实,以逻辑页面"段落"组织标记结构让未来设计样式更方便.如果页面中有个广告横幅,为它指定id很合理,因为这能把控制权交给CSS.在这个例子中,是在打印时将它隐藏起来.
去掉背景图片和颜色也是节省墨水,让打印结果更容易阅读的技巧之一.
举例来说,如果先前为<body>标签指定了背景图片或是颜色,现在就像这样就能把它去掉:
body {
background: none;
} Webjx.Com
当然也能用这个方法去掉其他标签在屏幕样式里指定的背景图片,颜色.
揭露链接
还有个巧妙的技巧(可惜只能在完整支持CSS2规范的浏览器中产生作用),那就是揭露链接URLs,让他们在打印结果中出现在超链接文字后面.
我们能用:after 这个伪类来编写CSS,让支持的浏览器在超连接文字后面打印出它所连接的URL,目前Mozilla,Safari与Netscape 7.0都支持这个功能,同时,对不支持:after 的浏览器使用者来说也不吃亏,他们只会看到超链接文字本身(Eric Meyer, "CSS Design: Going to Print" , http://www.alistapart.com/articles/goingtoprint/). Webjx.Com
让我们为打印样式表加上一条新规则,凸显内容部分里面的超链接URL:
body {
font-family: "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区域发生作用.虽然可以编写一条通用规则揭露所有超链接,但在这里我们选择只揭露内容部分里的超链接 -- 排除页首,页尾与其他区域的链接.
再次提醒,虽然这个功能目前只有少数几个浏览器支持,但是对不支持: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:after, #content a:visited:after {
content: " (" attr(href) ") ";
}
当然,也可以在此任意选择颜色,现在我是用预设的蓝色并加上下划线,因为一般人一眼就能将它看成超链接,对黑白打印来说,能够试验出某种灰色,让链接与一般文字产生足够的对比.
预览打印节省墨水
另一个节省墨水的技巧,是以浏览器的预览打印功能试着显示页面的打印效果,而不是真的把整份页面印到纸上.
在大多数浏览器里,文件 - 打印 对话框对有个预览选项,让你查看页面的打印效果,你能在这里好好观察一下打印样式表的效果.
看起来如何
在我的个人网站上使用打印样式表与先前我们一同制作的示例十分类似,你能比较一下图11-1和11-2,看看我是怎么设计打印样式的,去掉导航,侧边栏,同时揭露链接内容,调整字体和字体大小让本文更容易阅读.
图11-1 SimpleBits 以浏览器查看,使用屏幕样式表
图11-2 SimpleBits打印版
从图11-1和11-2可以清楚的发现,只要一个小小的CSS文档,就能为任何页面提供专门用来打印的特殊版本.这是个任何项目都很容易加入的功能,同时能在使用者尝试打印你的页面时增加体验.
下次如果你的老板说:"我们需要为网站建立一份打印友好的新模板,而且还要完全一样的目录结构",你就能从后口袋中(或其他放得下这本书的地方)抽出这个小技巧了.
新建一个前端学习qun438905713，在群里大多数都是零基础学习者，大家相互帮助，相互解答，并且还准备很多学习资料，欢迎零基础的小伙伴来一起交流。
归纳
我们稍微讨论了打印样式表里面能包含的规则.由于可以指定媒体类型,将打印,屏幕显示所有的样式分开,因此为每种媒体调整细节变得十分简单,容易维护与管理.不再需要为整个网站建立一份打印友好的副本,因为你可以使用相同的标记源代码,配上一份打印专用的CSS文档完成相同的功能.
未来我希望其他设备也能支持更多媒体类型,如果为特定设备设计CSS样式就能让PDA,手提电话与屏幕阅读器正常读取同一份XHTML的话,我们的工作便可以轻松不少
