点击这里返回网页教学网 HTML教程 栏目．想浏览CSS教程请点这里。
上文：标记语言——网页应用CSS样式。
Chapter 11 打印样式
先前在第10章中,讨论了几种为文档应用CSS的方法,这一章是要研究打印样式,指定特别用来打印页面的CSS规则.只要几条CSS规则,就
点击这里返回本站 HTML教程 栏目．想浏览CSS教程请点这里。
上文：标记语言——网页应用CSS样式。
Chapter 11 打印样式
先前在第10章中,讨论了几种为文档应用CSS的方法,这一章是要研究打印样式,指定特别用来打印页面的CSS规则.只要几条CSS规则,就能确保结构化标记内容打印到纸上的效果与屏幕上显示的一样好看.
首先来看看media类型,以及它们与提供设备相关CSS的关系.
如何指定打印时采用的样式?
在回答这个问题之前,必须熟悉一个概念,那就是我们能为CSS指定媒体类型(media),声明媒体类型将能使样式针对特定媒体发挥作用.
举例来说,如果想使某个链接的样式表专供电脑屏幕使用,那么可以像这样为<link>标签加上media属性:
<link rel="stylesheet" type="text/css" media="screen" href="screenstyles.css" />
前面这段代码能保证这个标签所链接的样式只会用于电脑屏幕,或许你想问:"除了电脑屏幕还能针对那些媒体?"答案是...还有不少选择.
媒体类型
除了上面这个例子使用的screen之外,还有不少媒体类型可供选择,以下是所有能够辨识的媒体类型,W3C在CSS2.1标准中定义的(可在http://www.php.cn/找到):
all: 适用于所有设备
braille: 适用于点字触觉回馈设备
embossed: 适用于点字页打印机
handeld: 适用于手持设备(通常具有小屏幕,有限带宽)
print: 适用于分页内容,以及使用打印预览模式在屏幕上查看的文档
projection: 适用于投影简报,举例来说,高射式投影机,请参阅分页内容(http://www.php.cn/)以获得更多关于分页媒体的格式信息
screen: 主要适用于彩色电脑屏幕
speech: 适用于语音合成器.留意:CSS2有个功能类似的媒体类型称为 aural,请参阅听觉样式表附录(http://www.php.cn/)以获得更多信息.
tty: 适用于使用定宽文字格的媒体(像是电报交换机,终端机或是只具备有限显示能力的手持设备),开发者不应在tty使用像素长度单位.
tv: 适用于电视类型的设备(低解析度,低色彩,有限滚动能力,能使用音效).
本章会把焦点集中在all,print和screen媒体类型上.
#p#
指定媒体的两种方法
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,手提电话等)会套用这些样式,不幸的是,标准内容在本文编写的时候似乎还没有普及到浏览器之外的世界,因此并不是任何设备都支持与其对应的媒体类型.
由于这个道理,我们会把焦点放在能够实际应用的媒体类型上,比如说打印样式.
<style type="text/css">
@import url("screenstyles.css") screen;
@media print {
/*打印时使用的样式放置在此 */
}
</style>
<link rel="stylesheet" type="text/css" media="screen, print" href="screenstyles.css" />
<style type="text/css">
@import url("screenandprint.css") screen, print;
@media print {
/*打印时使用的样式放置于此 */
}
</style>
<link rel="stylesheet" type="text/css" href="/css/style.css" />
<link rel="stylesheet" type="text/css" href="/css/style.css" />
<link rel="stylesheet" type="text/css" href="/css/print.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/css/styles.css" />
<link rel="stylesheet" type="text/css" media="print" href="/css/print.css" />
body {
font-family: "Times New Roman", serif;
font-size: 12pt;
}
body {
font-family: "Times New Roman", serif;
font-size: 12pt;
}
#nav, #sidebar, #advertising, #search {
display: none;
}
body {
background: none;
}
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) ") ";
}
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-2 SimpleBits打印版
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
808
收藏
