摆动工坊 SwingWorks Studio

曾经探讨过要怎么为打印一个网页提供专门的CSS，结论是要用js，于是放弃了。昨天因为机缘巧合重新研究了这个问题，发现单纯的CSS就可以搞定，不过还是有些值得注意的地方，写在这里与各位分享。

废话不多说，直接进入正题。使用CSS为网页提供样式一般来说有3种方法：关联外部css文件，内部style元素，以及内联样式（即使用元素的style属性）。为了实现向打印页面提供专用的样式表，我们必须采用前面两种方式。

使用外部css文件的做法很简单。假设你有一个名为style.css的文件需要关联到当前的页面，通常的做法是使用下面这条语句:

<link rel="stylesheet" type="text/css" href="style.css" />

如果你需要将print.css这个文件用于该页面的打印，你需要做得仅仅是在其后面添加下面的语句（注意红色的部分）：

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

但是请注意，style.css这个样式表仍然对打印的页面起作用，因为浏览器判定它是全局的。如果你提供的是独立的样式表，那么可以在引用style.css的语句里加上:

media="screen"

使用media属性就可以为不同终端提供不同的呈现方式，非常方便。

再来说说使用style元素的方法，只要像下面这样插入相应的代码即可：

<style>
@media screen {
/* 此处代码为屏幕显示提供样式 */
}
@media print {
/* 此处代码为页面打印提供样式 */
}
@media screen,print {
/* 此处代码提供共用的样式 */
}
</style>

为了打印的特殊需求，CSS还提供了一些专门用于打印的属性，见下表：

最后来看一下CSS一共支持多少种media类型。

本文部分内容参考w3schools

ni_hy

国内某理工学校(?)医学专业85后。爱好广泛，从电影、音乐、旅游、小说、美剧，到哲学、神学、医学、数学、物理学，再到电脑、手机、网络、应用、写代码，均有不同程度涉猎。经常关注Apple, Google, 以及各种IT资讯。平时喜欢研究和折腾。本来跟鱼尾童鞋彼此独立建站，现受其诚邀与其合作，力争使得工坊逐渐具有更大的读者群。

More Posts