版权声明：可以任意转载，但转载时必须标明原作者charlee、原始链接http://tech.idv2.com/2007/07/28/css-for-printing/以及本声明。
刚刚为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%;
}
这样打印结果就比原来更容易阅读了。还可以根据实际需要放大标题字体、 为引用部分添加边框等等。
2007-12-29 02:14
叙述的很好！
2008-01-08 13:28
就在于media=”screen” />
2008-01-22 11:28
#header, /* 页眉 */
#footer, /* 页脚 */
#sidebar, /* 侧边栏 */
#commentform, /* 评论输入表单 */
#navigation { /* 页面导航 */
display: none;
}
能否详细介绍下这里是怎么用？
特别是页眉页脚，如果我想设置为空该怎么做？
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 }即可。
2007-07-28 17:58
看到这样的修改,想到了有人用greasemonkey+自定义的CSS把lifehacker的页面的这些没用的部分都去掉了.呵呵