本文探讨了如何为HTML文档应用CSS打印样式，确保打印内容与屏幕显示一致。通过理解媒体类型如`screen`和`print`，可以指定针对不同设备的样式。在打印样式中，可以选择合适的字体大小，隐藏不必要的元素，去掉背景，以及通过`:after`伪类揭示链接URL，以提高打印版的可读性。此外，预览打印功能有助于检查样式效果，实现节省墨水的目标。
讨论了几种为文档应用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内的规则.
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
