A Print Preview Sample

简单叙述一下 print.css 里都该有什么，总结的可能并不全，写的也比较幼稚，欢迎补充

如何嵌入 print.css

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

根据大纲 W3C 的要求，我们可以像上面那样引入一个用于打印的 css，重点在于 media="print"，这里不多说

重置页边距

打印的页面通常需要一个上下左右的页边距，个人习惯上/​下页边距大于或等于左右页边距，但 IE7 本身就可完全忽视 css 中定义的页边距，在打印预览中通过滑块调整。因此无特殊需求的话也可不定义

白纸黑字

出于节省成本的考虑，打印文档的话最好以白纸黑字输出。那么我们最好把一些喜怒无常的元素定义上固定样式

body{color:#000000; background:#ffffff;}
a:link, a:visited {color: #000000;}

统一单位

印刷通常没用拿像素做单位的，所以最好把 css 中的单位转换成点 (point)，用 pt 表示，例如 p{font-size:12pt;}

隐藏不必要元素

对于打印的人来说，它们需要的一般是正文内容，所以对于正文以外的互动内容可以隐藏掉。拿 Word­Press 举例的话，通常来说包括：

  • Logo
  • 子标题，如 This is my motherf*ckin weblog
  • 全站导航
  • 分页导航，如 wp-​​pagenavi 插件
  • single.php 中的侧栏
  • 搜索框
  • 评论内容
  • 回复评论的输入框
  • 页脚

如果 Logo 短小精悍并且就是想显示的，可以显示；子标题想强制显示的，可以显示；评论语句优美内容精辟的，可以显示；页脚有版权保护需要的，也可以显示。其它内容不建议显示，那么我们得到下面这段 css

#search, #respond, #sideinfo, #header, #post-in-this-cat, .wp-pagenavi, .commentlink{display:none;}

重定义链接

既然前面已经把文档弄成了黑白，那么我们无法通过颜色区分链接，那么打印出来的链接有两种方法让他醒目出来，一是加粗，二是加下划线，二是在连接后显示 URL，前两种方法我们可以这样实现：

a:link, a:visited{font-weight:700;}
a:link, a:visited{text-decoration:underline;}

字体粗细可以简单定义为 bold 来加粗，也可以设置精确值，如果效果不明显的话，请用精确值加粗，并且推荐使用 OpenType 字体。

但是有时加粗和有下划线的字体并不代表它就是连接，也可能是作者的注释和强调，或者有人本身就不喜欢下划线，比如我，那么可以用第三种方法，实际效果差不多是这样的：点击下载 [/cgx.flv]，代码如下

#content a[href^="http"]:after, a[href^="ftp:"]:after{content:" [" attr(href) "] "; font-weight:lighter;}
#content a[href^="/"]:after{content:" [" attr(href) "] "; font-weight:lighter;}

这种方法本身需要浏览器的支持，否则打印不出 URL。第一条会将所有 http 与 ftp 开头的 URL 显示出来，如果你的页面中包含 mailto，也可以这么定义，第二条会将所有本站缩略的链接先加上本站地址再打印出来，比如 <a href="/about/">About</a> 就会像 About [/​about/​] 这样呈现。font-weight:lighter; 看个人喜好，定义其它样式也没问题

有时你只想显示正文中的 URL，那么像上面的例子套入指定层/类中就可以了

美化标题

对于标题，可以稍加美化，让它看起来分段清晰，比如重定义其大小、字体、粗细，颜色就免了。个人比较喜欢在标题下面画一条淡色分割线，示例请回 文章顶部 看图，代码看下面

h1, h2, h4, h5{border-bottom:#dddddd 1px solid; padding:15pt 0 10pt 0;}

根据自己网站的需要选择要显示分割线的标题，注意控制好上下 padding 即可。这里的分割线不建议使用恶心又难控制的 hr 来代替

其它细节

常用样式可以定义，比如 code、blockquote 之类，特殊浮动的图片也可以简单定义下，脚本嵌入的 Flash、视频等多媒体内容必要时也需要用 display 属性隐藏掉，并用显示 URL 的方法用文字显示替换内容

参考文献

«

»

Related Entries