通过重定义CSS实现网页内容完美打印输出

【 tulaoshi.com - Web开发 】

　　虽说已是互联网无所不能的时代，但还是会需要将网页内容打印出来阅读。对于网生的电子报、电子期刊这些更适合于在网络环境中阅读的内容，怎样通过打印输出生成适当的纸媒页面呢？长时间来，这一直是一个课题。为了写如下这篇博文，作者对相关问题进行了深入思考，并为Bits O' NewMedia网站编写了适于打印输出的样式表，现将相关经验分享给大家。

　　设定适于打印输出的样式表

　　这并不象想象中那么难，第一步要做的是复制原用的CSS文件，将其命名为print_style.css，接下来，就是要在其首行加入语句：

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

　　我们看到，这一条语句惟一特别的地方在于，media参数被赋值为"print"。而如果在页面内加入了这样的一条语句，那么再执行fileprint（文件打印）指令时，print_style.css样式表就会替代原有的样式表被调用。

　　注意：如果是IE6或是Firefox用户，就一定要将网络链接标记样式中的media参数赋值为 "screen"，否则，打印出来的页面内容会发生出血的问题，以及其他一些问题。IE7用户就不用担心了。

　　完善页面的主体部分

　　现在，我们来调整一下页面主体相关的参数。一般情况下，网页的主体部分都会有背景色或是背景图案。我们现在就要将背景去除，以确保打印出来的页面相对整洁。当然，多数浏览器默认支持在打印时自动去除背景，但还是要手动调整一下来得保险。

　　同时，还要考虑为将打印样式表中的color参数赋值为#000或"black"。彩色的文字在网页上看起来固然很眩，但要输出如此色彩眩丽的页面，就会耗费相当昂贵的墨水。

　　接下来，我们要调整的就是margin参数了，系统默认的页边距设置一般都会比较小，我们现在试着为左、右边距各增加3em，可以通过语句margin 0em 3em 0em 3em来实现。

　　调整分栏版式参数

　　我们都知道，并不是所有的网页内容都有必要打印出来的，比如说导航条，在网页上是必要信息，但打印出来就纯属浪费页面了。这时，我们就需要在打印样式表中对那些没有必要打印出来的选项，添加属性"display: none"。

　　同时，为了让所有的内容都完美地垂直排列在打印出的页面上，而不是一个接一个地堆在页面上，就需要对每一个必打项的float参数赋数为"none"，或干脆直接将float参数项删去。

　　还要为每一个必打项的width参数赋值为"auto"。这样，对于利用div标记对页面进行了分栏的时候，就可以确保分栏的内容能够自动填满页面。以下为打印样式表的编写内容示例：

div.template_fill_wrapper_top{
    display: none;
}
div.template_fill_wrapper_middle{
    margin: 0;
    width: auto;
    text-align: center;
    clear: both;
}

In the web stylesheet
div.template_fill_wrapper_top{
    overflow:hidden;
    text-align:center;
    background-color: #313131;
    height: 48px;
    overflow: hidden;
}
div.template_fill_wrapper_middle{
    margin: 0 auto;
    text-align: left;
    padding-top:10px;
    clear:both;
}

　　PX参数下课，Em及PT上位

　　一般情况下，在为网页编写样式表时，针对间距、宽、高、页边距及字体大小等参数，我们习惯用pixel或em度量单位。这主要是由于数码显示器一般是采用像素及字符宽度为显示单位的。而对于打印机来说，像素单位就不好使了，需要将原来使用像素单位的间距、宽、高、页边距等值转换为em单位值；而字体大小则需被转换为磅值（建议将字体大小设置在9pt～11pt之间）。.

　　以下即为Bits O' NewMedia网站的打印样式表示例：

body    {
    margin: 0em 3em 0em 3em;
    padding: 0;
    border: 0;
    color: black;
    background: white;
    font: normal 10pt "Bakersville Old Face", "Times New Roman", Times, serif;
    text-align: left;
}

　　成果验收

　　要使每一位网站用户都有一个好的体验，作为力求完美的网站建设者，就要经历无数次的试验、失败、调整、再试验......我们坚信这样做的结果一定会为你带来无限成就感。

　　如下所示为Bits O' NewMedia网站中某一篇文章的打印效果预览截图，你也可以通过以上的打印样式表调整步骤，打印出理想的页面来。

Wish you every success!