面向打印的CSS设置

刚刚为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%;
}

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

charlee.li