面向打印的CSS设置

2007-07

刚刚为blog加了个面向打印的css，大家可以从浏览器的打印预览中看到效果。之所以要加这个css，是因为blog显示的内容中有很多是不需要并且不便于打印的，比如侧边栏、评论输入框等，打印时把这些无用的东西都隐藏掉，对用户比较友好。

总结一下css的要点。参考的原文在这里。

首先要在<head>中添加CSS引用标记以指定打印用的CSS：

<link rel="stylesheet" href="打印用CSS的地址" type="text/css" media="print" />

注意关键在于最后的 media="print" ，这个选项告诉浏览器这个CSS是为打印准备的。因此，你原来的CSS的引用就应当加上 media="screen" 选项。总体代码如下：

<link rel="stylesheet" href="显示用CSS的地址" type="text/css" media="screen" /> 
<link rel="stylesheet" href="打印用CSS的地址" type="text/css" media="print" />

然后书写CSS文件。首先当然是body的属性设置：

body {
  font-family: "lucida sans unicode",georgia;
  font-size: 12pt;
  color: #000000;
  background-color: #FFFFFF;
  background-image: none;
}

为超链接加上下划线，并去掉图片的边缘：

a {
  text-decoration: underline;
  color: #000000;
}

img {
  border: 0;
}

然后隐藏掉不宜打印的部分，如页眉、页脚、侧边栏等：

#header,             /* 页眉 */
#footer,             /* 页脚 */
#sidebar,            /* 侧边栏 */
#commentform,        /* 评论输入表单 */
#navigation {        /* 页面导航 */
	display: none;
}

最后可以通过after伪类显示出文章中出现的超链接的地址（可惜目前IE6和IE7都不支持after伪类）：

a:link:after,
a:visited:after {
  content: " (" attr(href) ") ";
  font-size: 90%;
}

这样打印结果就比原来更容易阅读了。还可以根据实际需要放大标题字体、为引用部分添加边框等等。

看完这篇文章后感觉怎样？如果还需要更多的内容，可以看看下面这些，也许会对你有帮助：

这篇文章有 5 条评论了，快来一起讨论讨论吧！

fcicq
2007-07-28 17:58

看到这样的修改,想到了有人用greasemonkey+自定义的CSS把lifehacker的页面的这些没用的部分都去掉了.呵呵

CARSER
2007-12-29 02:14

叙述的很好！

minchao
2008-01-08 13:28

就在于media=”screen” />

water
2008-01-22 11:28

#header, /* 页眉 */
#footer, /* 页脚 */
#sidebar, /* 侧边栏 */
#commentform, /* 评论输入表单 */
#navigation { /* 页面导航 */
display: none;
}
能否详细介绍下这里是怎么用？
特别是页眉页脚，如果我想设置为空该怎么做？

charlee
2008-01-22 15:47

@water

需要你在HTML代码中，用div括起页眉页脚的部分，然后为div命名为header、footer。例如：

[body]
[div id="header"]这里是页眉[/div]
这里是主体内容
[div id="footer"]这里是页脚[/div]
[/body]

然后在css里面写 #header, #footer { display:none }即可。

添加评论