如何使用CSS控制网页打印页面格式?

html-css032

如何使用CSS控制网页打印页面格式?,第1张

由于客户要求,打印时需把打印的按钮去掉。这个时候就用到了控制打印的样式表了。 <link rel=”stylesheet” type=”text/css” media=”print” href=”print.css” />正因为xhtml和css是分离的,所以我们可以在print.css里自由书写需要打印显示的内容和表现形式。那么这也要求我们在书写xhtml的时候更 多考虑到打印显示效果的需求,良好的扩展标记和结构嵌套,使得我们轻松的使用display:none将内容设置为不显示。然后就是去书写 print.css内容的时候了,你象设置word一样去写你想打印的页面吧。 后来想了想,其实单独写一个css增加了请求次数,就想到了@media print{}的作用,代码如下 @media print{ .printdesc { right: 0width: 685pxheight: 69pxbackground-color: #FFFFFFfloat:leftoverflow:autoborder:0px} .text{ float:rightwidth: 688pxmargin-top:20px} .printlink{ height:0pxdisplay:nonewidth:0pxz-index:-10} .printlink a{ display:none} } 后来想到如果打印页面的某一部分,可以使用iframe来进行操作,现在的打印页面的局部内容基本上就是使用iframe进行处理。

一、添加打印样式

1. 为屏幕显示和打印分别准备一个css文件,如下所示:

用于屏幕显示的css: <link rel="stylesheet" href="css/mainstylesheet.css" media="screen" />

用于打印的css:<link rel="stylesheet" href="css/printstylesheet.css" media="print" />

2. import方式:

<style type="text/css">

@import url("css/printstylesheet.css") print

</style>

3. 直接把屏幕显示样式和打印样式写在一个css文件中:

@media print {}{

h1 {

color: black

}

h2 {}{

color: gray

}

}

@media print里面的内容只对打印出来的内容有效,之外的内容就是屏幕显示的样式。

其他:

创建一个不指定媒体类型的样式表通常很有用(或者利用media="all")。当你准备好定义一些特别用

于打印的规则时,可以只创建一个单独的样式表,使任何在打印时看起来不好的样式都失效。使用这种方法的一个问题是必须确保打印机样式实际上确实覆盖了主样式表。可以使用!important.

二、打印样式注意事项:

1. 打印样式中不推荐使用背景,因为浏览器默认情况下并不能打印出CSS中的背景内容,只有当浏览器被

设置可以打印背景的情况下才能打印出背(ie的高级选项中可选)。即使背景可以打印,它也可能盖过叠在它上面的任何文本。

这是真的,尤其对于用彩色背景在显示器上强烈对比的文本,但是在黑白打印机上打印时会融合这一背景。

background:none;去掉背景

图片和颜色。

可以利用background-color属性设置背景颜色为白色,像这样:background-color: white。

使用background的快捷法也可以获得相同的效果:background: white。因此像background: white

这样的声明不仅设置了背景颜色为白色,而且消除了所有背景图片。利用这个background的快捷属性,

你实现了两个目的——设置了一个白色背景,并消除了图片——只用很少的代码。

2. 如果需要在打印内容中出现图片,请在HTML代码中加入。

3. 打印设置使用的是物理单位,所以尺寸最好不要用像素(px),可以用pt也可以用cm;

4. 隐藏不需要的或是次要的内容。display:none;

5. 尽量不要让内容浮动,有些浏览器打印浮动的div的过程中,会有一个麻烦,需要特别加以注意。

不要在打印的样式表中浮动的块,像这样:float: none。例如,基于Gecko的浏览器

(例如Netscape 6+),当用户用它来浏览一个打印输出页面时,它会截去浮动元素中的内容。

这些内容就不会被传送到打印机,下一个页面也不会有它的踪影――它消失了。

6. 尽可能的在HTML代码中做好内容重要的先后次序,这样在打印样式中可以节省不少的麻烦。

7. 打印与网页不一样,打印一定要留下白边,单位用英寸(in)。

8. 要确保页面上的所有文本以黑色打印,就用通配选择器(见第54页)和!important来创建把每个

标签都格式化为黑色文本的单个样式:

*{ color: ##000# !important }

9. 在打印中显示链接url的信息:利用一个高级的选择器:after和一个高级的CSS属性称作content,

把不在屏幕上显示的文本打印在一个样式元素的末端。

不幸的是,:after选择器和content属性技巧在Internet Explorer 6或者更早的版本上不起作用

(到编写本书为止,在IE 7上也不行)。但是它在Firefox和Safari上的确可以,因此你至少可以清楚

地说明URL以便访问者可以使用他们的浏览器。

为了做到这点,给打印样式表添加一个样式,在每个链接后面打印出URL。你甚至可以添加其他文本项

目比如圆括号,使它更好看些:

a:after {content: " (" attr(href) ") "}

然而,这个CSS不区分外部或者内部的链接,因此它也打印出到达同一个网站其他页面的没用的相对

文档链接:“访问主页(../../index. html)。”利用一点点CSS 3魔法,就可以强制这个样式只打

印绝对的URL(即以http://开头的那些),像这样:

a[href^="http://"]:after {content: " (" attr(href) ") "}

10.给打印添加分页符:两种被广泛认可的属性是page-break-before和page-break-after。

page-break-before告诉网页浏览器在一个指定样式之前插入一个分页符。利用page-break-before

属性使图片打印在一张新页面上,并且适合整张页面。

要使一个元素作为打印页上的最后一个项目显示,就给那个元素的样式添加page-break-after: always。

创建两个类样式,以类似于.break_after和.break_before的名字来命名,像这样:

.break_before { page-break-before: always}

.break_after { page-break-after: always}

然后你可以选择性地把这些样式应用给应该打印在网页顶部或者底部的元素。

三、测试打印样式

通常来说我们不可能用打印机来进行测试,在IE浏览器菜单栏“文件”中有“打印预览”,可以通过这

打印预览来做测试。

第一种方法:如果要打印的页面排版和原web页面相差很大,采用此种方法。点打印按钮弹出新窗口,把需要打印的内容显示到新窗口中,在新窗口中调用window.print()方法,然后自动关闭新窗口。 指定打印区域把要打印的内容放入一个 span或div,然后通过一个函数打印。把要打印的内容放这里

所有内容div2的内容打印function printme(){document.body.innerhtml=document.getelementbyid('div1').innerhtml+''+document.getelementbyid('div2').innerhtmlwindow.print()}方法二用css教程控制 引用:@media print.a {display:block}.b {display:hidden}把你不想打印的部分class设为b首先在网页中添加:引用: .noprint{visibility:hidden}要打印的内容。哈哈!将不打印的代码放在这里。打印方法三 用ie打印网页 internet explorer(简称ie)5.0以上版本强大的打印及打印预览功能。本文就向大家介绍如何用ie来打印网页。(谁?谁?谁在扔西红柿?下面一片嘘声:这还用得着你讲呀?!)咳咳咳,是的是的,在ie中打印网页实在是太简单不过了。只需点一下工具栏上“打印”按钮就可将当前网页打印出来 方法四xml/html代码打印引用:var hkey_root,hkey_path,hkey_keyhkey_root="hkey_current_user"hkey_path="softwaremicrosoftinternet explorerpagesetup"//设置网页打印的页眉页脚为空function pagesetup_null(){try{var regwsh = new activexobject("wscript.shell")hkey_key="header"regwsh.regwrite(hkey_root+hkey_path+hkey_key,"")hkey_key="footer"regwsh.regwrite(hkey_root+hkey_path+hkey_key,"")}catch(e){}}//设置网页打印的页眉页脚为默认值