CSS控制print打印样式

转载 2017年03月18日 10:47:40
一、添加打印样式
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
@media print {
   h1 {
      color: #000;
      background: none;
   }
 
 
   nav, aside {
      display: none;
   }
 
 
   body, article {
      width: 100%;
      margin: 0;
      padding: 0;
   }
 
 
   @page {
      margin: 2cm;
   }
}


二、WEB页面实现指定区域打印功能

使用CSS,定义一个.noprint的class,将不打印的内容放入这个class内。

详细如下:

<style media=print type="text/css">
.noprint{visibility:hidden}
</style>
要打印的内容。哈哈!
<p class="noprint">将不打印的代码放在这里。</p>
<a href="javascrīpt:window.print()" target="_self">打印</a>

第二种方法:指定打印区域

把要打印的内容放入一个 span或div,然后通过一个函数打印。

<span id='div1'>把要打印的内容放这里</span>
<p>所有内容</p>
<div id="div2">div2的内容</div>
<a href="javascrīpt:printme()" target="_self">打印</a>

<scrīpt language="javascrīpt">
function printme()
{
document.body.innerHTML=document.getElementById('div1').innerHTML+'<br/>'+document.getElementById('div2').innerHTML;
window.print();
}
</scrīpt>

如果要打印的只是整个页面中的一小部分,就最好采用第二种方法。

第三种方法:如果要打印的页面排版和原web页面相差很大,采用此种方法。

点打印按钮弹出新窗口,把需要打印的内容显示到新窗口中,在新窗口中调用window.print()方法,然后自动关闭新窗口。


三、打印样式注意事项:

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浏览器菜单栏“文件”中有“打印预览”,可以通过这

打印预览来做测试。


CSS控制print打印样式

添加打印样式1. 为屏幕显示和打印分别准备一个css文件,如下所示: 用于屏幕显示的css: 用于打印的css:2. import方式:3. 直接把屏幕显示样式和打印样式写在一个css文件中: ...
  • pangni
  • pangni
  • 2011年03月04日 21:05
  • 23765

CSS打印样式

一、直接在同一个文件中:/*网页上显示时,背景为灰色*/body{  background-color:#888888;  margin:0px;  height:100%;}/*打印时,背景为白色*...
  • tangzhongxin
  • tangzhongxin
  • 2009年08月11日 09:04
  • 430

如何实现window.print()局部打印,且打印当页修改的input

老板又提出了一个坑爹的需求。 报表打印 而且报表要以input的形式展现,方便操作人员进行修改之前没写过打印,所以找了好多JS和jquary的插件来做。 但是发现...
  • u011107827
  • u011107827
  • 2015年07月14日 12:52
  • 1560

使用jqprint插件完成页面打印

使用jqprint插件完成页面打印 jqprint是一个基于jquery编写的页面打印的一个小插件,但是不得不承认这个插件确实很厉害,最近的项目中帮了我的大忙,在Web打印的方面,前端的打印基本是靠w...
  • long2010yu2010
  • long2010yu2010
  • 2015年01月05日 10:11
  • 17621

打印网页去掉页眉和页脚

方式一: 如果你使用的是IE6以及以前的版本,可以使用这个方法 打开浏览器文件->页面设置 在弹出的页面设置对话框中,将页眉输入框中的"&w&b页码,&p/&P"清空则标题信息就不打印了 只去...
  • yongbuyanqi88888
  • yongbuyanqi88888
  • 2015年02月10日 17:57
  • 19897

html+css主页页眉实现

.html代码如下: 512义工新闻 首页 义工新闻 义工之家 法律法规 义工招募 求援求助 荣誉榜 ...
  • yayun0516
  • yayun0516
  • 2014年11月25日 13:52
  • 2641

改变printf输出文字的颜色

格式如下:\033[显示方式;前景色;背景色m \033[0m 默认 \033[1;32;40m 绿色 \033[1;31;40m 红色 显示方式:0(默认值)、1(高亮)、22(非粗体)、4(下划线...
  • bingoo_t
  • bingoo_t
  • 2016年11月18日 19:59
  • 1320

window.print 页面打印

定义和用法 print() 方法用于打印当前窗口的内容。 语法 window.print(); window.print()  实际上,是浏览器打印功能菜单的一种程序调用。与点击打印功...
  • hdchangchang
  • hdchangchang
  • 2015年06月15日 16:42
  • 31796

CSS + DIV 让页脚始终底部

1、利用 bottom 属性? 在实践之前,很容易联想到用 CSS 里面的 bottom 属性让页脚在最下面,可是这个是行不通的。如果使用了如下方法: footer { bottom:...
  • nathanhuang1220
  • nathanhuang1220
  • 2014年04月09日 11:42
  • 2801

CSS打造的一个永远在页面最底端(页脚)的样式

本文中所实现的特效就是像有些下载站那样,当你进入到具体的下载页时,它会在页面的顶端用一个鲜亮的颜色提示你选择下载方式或地址,我们暂时把下载站的这种方式称为页眉吧,本例完全反过来了,是永远在页面的最下边...
  • teresa502
  • teresa502
  • 2011年11月25日 12:37
  • 5392
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS控制print打印样式
举报原因:
原因补充:

(最多只允许输入30个字)