在以前
![](/icons/92646dou.gif)
为Web页面创建
![](/icons/92646yi.gif)
个打印机友好
![](/icons/92646de.gif)
版本意味着要设计
![](/icons/92646yi.gif)
个布局和格式都经过修改
![](/icons/92646de.gif)
单独页面
![](/icons/92646dou.gif)
这样才能够在打印
![](/icons/92646de.gif)
时候获得令人满意
![](/icons/92646de.gif)
效果
![](/icons/92646dou2.gif)
现在
![](/icons/92646dou.gif)
通过使用结构化
![](/icons/92646de.gif)
XHTML和CSS
![](/icons/92646dou.gif)
你可以实现同样
![](/icons/92646de.gif)
效果而只用花费少得多
![](/icons/92646de.gif)
精力
从屏幕显示到打印效果大多数
![](/icons/92646de.gif)
Web页面都是设计适用于在计算机屏幕上观看
![](/icons/92646de.gif)
![](/icons/92646dou2.gif)
然而
![](/icons/92646dou.gif)
有
![](/icons/92646de.gif)
时候用户需要将某些页面打印出来
![](/icons/92646dou.gif)
也许就是为了保留
![](/icons/92646yi.gif)
个长期
![](/icons/92646de.gif)
记录
![](/icons/92646dou.gif)
或者将其用作方便
![](/icons/92646de.gif)
离线参考资料
![](/icons/92646dou2.gif)
现在
![](/icons/92646de.gif)
麻烦是
![](/icons/92646dou.gif)
让Web页面在计算机彩色屏幕上看起来引人注目和 5彩缤纷
![](/icons/92646de.gif)
很多特性
![](/icons/92646dou.gif)
都无法在打印版
![](/icons/92646de.gif)
Web页面上表现出相同
![](/icons/92646de.gif)
效果——尤其当打印机是黑白
![](/icons/92646de.gif)
时候
![](/icons/92646dou2.gif)
在被降级为灰度打印
![](/icons/92646de.gif)
时候
![](/icons/92646dou.gif)
彩色
![](/icons/92646de.gif)
组合会失去(原有
![](/icons/92646de.gif)
)对比效果;图形会看起来失真
![](/icons/92646dou.gif)
而且耗费太长
![](/icons/92646de.gif)
打印时间;在Web页面上起着重要作用
![](/icons/92646de.gif)
导航按钮在打印页面上也毫无用处
![](/icons/92646dou2.gif)
为了克服这些问题
![](/icons/92646dou.gif)
Web
![](/icons/92646de.gif)
创建者常常会为页面专门设计
![](/icons/92646yi.gif)
个打印机友好
![](/icons/92646de.gif)
版本
![](/icons/92646dou.gif)
这样访问者就有打印
![](/icons/92646de.gif)
欲望
![](/icons/92646dou2.gif)
打印机友好
![](/icons/92646de.gif)
版本通常都包括有和主要Web页面相同
![](/icons/92646de.gif)
内容
![](/icons/92646dou.gif)
但是会省略掉大多数
![](/icons/92646de.gif)
图形、背景和导航元素
![](/icons/92646dou2.gif)
页面还会把彩色转换成某种形式
![](/icons/92646dou.gif)
以便生成能够让人接受
![](/icons/92646de.gif)
灰度图像
CSS
解决方案使用结构化
![](/icons/92646de.gif)
XHTML标示和CSS格式将内容和表示分离开来
![](/icons/92646de.gif)
![](/icons/92646yi.gif)
个优势在于
![](/icons/92646dou.gif)
通过更改CSS样式
![](/icons/92646dou.gif)
你可以很轻易就把内容重新格式化
![](/icons/92646dou2.gif)
因此
![](/icons/92646dou.gif)
创建
![](/icons/92646yi.gif)
个打印机友好
![](/icons/92646de.gif)
页面就是把
![](/icons/92646yi.gif)
个区别
![](/icons/92646de.gif)
CSS文件链接到相同
![](/icons/92646de.gif)
XHTML页面上
![](/icons/92646dou2.gif)
你可以同时把屏幕样式表和打印样式表链接到同
![](/icons/92646yi.gif)
个XHTML文件里
![](/icons/92646dou.gif)
所以就没有必要单独创建
![](/icons/92646yi.gif)
个打印机友好
![](/icons/92646de.gif)
页面
![](/icons/92646dou.gif)
只需要
![](/icons/92646yi.gif)
个打印机友好
![](/icons/92646de.gif)
样式表就行了
![](/icons/92646dou2.gif)
当你在链接代码里加入多媒体类型
![](/icons/92646de.gif)
文件时
![](/icons/92646dou.gif)
这就是在告诉浏览器为了进行屏幕输出要遵循或者忽略哪些CSS
![](/icons/92646de.gif)
规则
![](/icons/92646dou.gif)
而为了打印输出要使用哪些规则
下面是链接到
对CSS文件
例子:<link rel=\"stylesheet\" type=\"text/css\" media=\"screen\" href=\"mysite-screen.css\"
/>
<link rel=\"stylesheet\" type=\"text/css\" media=\"pr
![](/icons/92646int.gif)
\" href=\"mysite-pr
![](/icons/92646int.gif)
.css\" />
如果需要支持老版本
![](/icons/92646de.gif)
浏览器
![](/icons/92646dou.gif)
那你就必须坚持使用CSS1
![](/icons/92646de.gif)
媒体描述符screen和pr
![](/icons/92646int.gif)
![](/icons/92646dou2.gif)
它们是相互排斥
![](/icons/92646de.gif)
![](/icons/92646dou.gif)
因此在为屏幕显示而生成页面
![](/icons/92646de.gif)
时候
![](/icons/92646dou.gif)
浏览器会忽略掉打印样式表
![](/icons/92646dou.gif)
反的亦然
![](/icons/92646dou2.gif)
所以
![](/icons/92646dou.gif)
每个样式表都需要包含相同
![](/icons/92646de.gif)
样式选择器
![](/icons/92646dou.gif)
但是有区别
![](/icons/92646de.gif)
规则声明
![](/icons/92646dou.gif)
以便为区别
![](/icons/92646de.gif)
输出设备分别生成页面样式