为打印页面提供专用CSS

曾经探讨过要怎么为打印一个网页提供专门的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属性就可以为不同终端提供不同的呈现方式,非常方便。