这里和大家分享一个例子，它演示如何使用层叠样式表（CSS）媒体类型，面向屏幕和打印机来格式化一个HTML文件。
媒体类型说明
利用CSS的@media规则，可根据显示页面的设备类型来指派具体样式。没必要为每个设备都单独创建HTML文件，只需在一个CSS文件中创建单独的@media规则。另外，不必向Web服务器发送单独的请求，因为媒体类型切换在客户端完成。
CSS支持的部分设备包括计算机屏幕、打印机、电视机、手持设备、语音合成器以及盲人触摸反馈设备。但目前大多数浏览器只支持少量可用的媒体类型。Internet Explorer 4.5+和Netscape 4.7+支持屏幕和打印，而Opera 3.67+支持屏幕、打印和投影机。
HTML文件
第一步是打开一个现成的HTML页。图A是本例要使用的不适合打印的网页的一个屏幕截图。清单A提供了代码。注意为便于演示，我们嵌入了样式信息。
图A
一个不适合打印的页
| 为屏幕显示而格式化 |
|
为屏幕显示而格式化 由于所有屏幕特有样式信息都已包含在原始HTML中，所以惟一要做的就是将样式放到一个@media屏幕规则中。该规则指示浏览器在计算机屏幕上显示网页时使用这些样式，如清单B所示。 |
为打印机而格式化
要使原始的HTML更适合打印，需要在同一个样式表中创建@media打印规则。然后，要创建打印机特有的样式，使页面在打印时能正确显示。
首先，我要改变标题条的呈现方式。原来的页在深色背景上使用白色文本。现在要把文本变成黑色，并完全去掉背景色。然后，要围绕标题条显示1个像素粗细的灰色边框，使其仍然能突出显示。这些改动节省了墨水；而且即使用户不允许自己的打印机打印背景色，也能确保文本清晰易读。我还将字号从像素改成磅，这是标准打印单位。具体代码参见清单C。
现在，我要将正文的字号从像素变成磅，如清单 D所示。
我将.ad样式的display属性设为none（清单E），从正文中删除大幅广告。这会隐藏广告，并允许文本抵满右边界。
最后，我删除了显示电子邮件、保存和讨论选项的工具栏，因为它们在打印版本上是不适用的。最终的样式表如清单F所示。
在目标设备上测试
这个例子最令人满意的就是它极易测试。只需用浏览器打开最终的HTML页，然后选择【文件】|【打印预览】。随后应该使用样式表中指定的@media打印规则来显示页面，如图B所示。
图B
“打印预览”中适合打印的页
[从此长大]