科技行者

行者学院 转型私董会 科技行者专题报道 网红大战科技行者

知识库

知识库 安全导航

至顶网软件频道CSS实现不同的打印和屏幕显示结果

CSS实现不同的打印和屏幕显示结果

  • 扫一扫
    分享文章到微信

  • 扫一扫
    关注官方公众号
    至顶头条

通常的web页面中,我们要求打印结果和显示结果一样,但在一些报表或业务系统中,我们可能只需要打印页面中的一部分内容。

作者:Tony Qu 来源:blog【原创】 2008年1月12日

关键字: 页面 CSS 屏幕 打印 软件

  • 评论
  • 分享微博
  • 分享邮件
通常的web页面中,我们要求打印结果和显示结果一样,但在一些报表或业务系统中,我们可能只需要打印页面中的一部分内容,例如我只要打印数据,但按钮和背景不需要打印,这是由业务需求决定的,我们可以想象一下,如果一张打印出来的发票中出现一个按钮,你会怎么想,估计要昏过去的,呵呵~~

好了,说完需求,我来说说如何实现,一种方法是为屏幕显示和打印分别准备一个css文件,如下所示:

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

用于打印的css:

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

注意,这两个css是放在一个web页面里面的。

还有一种是import方式:
<style type="text/css">
    @import url("css/printstylesheet.css") print;
</style>

最后一种写法是可以直接把屏幕显示样式和打印样式写在一个css文件中:
  @media print {
    h1 {
      color
: black;
    
}

    h2 
{
      color
: gray;
    
}

  }


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

原文链接:http://blog.csdn.net/tonyqus/archive/2008/01/11/2036744.aspx

    • 评论
    • 分享微博
    • 分享邮件
    邮件订阅

    如果您非常迫切的想了解IT领域最新产品与技术信息,那么订阅至顶网技术邮件将是您的最佳途径之一。

    重磅专题
    往期文章
    最新文章