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

问情至婷

问情至婷

2016-02-19 21:31

给自己一点时间接受自己,爱自己,趁着下午茶的时间来学习图老师推荐的通过重定义CSS实现网页内容完美打印输出,过去的都会过去,迎接崭新的开始,释放更美好的自己。

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

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

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

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

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上位

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

  一般情况下,在为网页编写样式表时,针对间距、宽、高、页边距及字体大小等参数,我们习惯用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!

展开更多 50%)
分享

猜你喜欢

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

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

CSS自动实现网页打印版本

Web开发
CSS自动实现网页打印版本

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

AutoCAD怎么从模型空间中打印输出

cad教程 autocad教程 CAD
AutoCAD怎么从模型空间中打印输出

利用ASP在浏览器上打印输出

ASP
利用ASP在浏览器上打印输出

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

大幅面CAD图打印输出技巧(1)教程

autocad教程
大幅面CAD图打印输出技巧(1)教程

AutoCAD中从模型空间中打印输出的操作

FLASH flash教程 autocad教程
AutoCAD中从模型空间中打印输出的操作

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

Dreamweaver快速图片链接批处理

Dreamweaver快速图片链接批处理

Delphi的Hint(2)

Delphi的Hint(2)
下拉加载更多内容 ↓