使用jquery+CSS实现控制打印样式_jquery

一、添加打印样式

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属性设置背景颜色为白色,像这样: font-family: Arial; line-height: 26px;">  使用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浏览器菜单栏“文件”中有“打印预览”,可以通过这
打印预览来做测试。

时间: 2024-08-15 17:48:15

使用jquery+CSS实现控制打印样式_jquery的相关文章

分页-如何利用css print media打印样式对网页进行打印处理?固定页头和页脚?要求每页都要显示

问题描述 如何利用css print media打印样式对网页进行打印处理?固定页头和页脚?要求每页都要显示 求助?如何控制打印时分页,要求对列分页和对表格数据分页,打印时不要出现滚动条?路过的大神帮帮忙啊!不胜感激.打印界面如上图所示,数据界面 解决方案 这是数据界面,点击打印按钮,弹出打印界面,并渲染打印界面 解决方案二: fixed定位,不出现滚动条设置overflow:hidden @media print{ #top#foot{position:fixed;width;100%;lef

js或css如何控制打印的页面,每页都有页眉页脚?求实例

问题描述 js或css如何控制打印的页面,每页都有页眉页脚?求实例 现在有一个需要打印的页面,要求打印时无论有几页,每页都要有相同的页眉页脚 解决方案 http://www.codefans.net/jscss/code/4193.shtml 解决方案二: css page-break-after:always; CSS控制打印区域

手把手教你的jquery+CSS控制打印样式实例

一.添加打印样式 1. 为屏幕显示和打印分别准备一个css文件,如下所示:   用于屏幕显示的css: <link rel="stylesheet" href="css/mainstylesheet.css" media="screen" />   用于打印的css:<link rel="stylesheet" href="css/printstylesheet.css" media=&q

jQuery - css() 方法示例详解_jquery

css() 方法设置或返回被选元素的一个或多个样式属性. 设置 CSS 属性 如需设置指定的 CSS 属性,请使用如下语法: 复制代码 代码如下: css("propertyname","value"); 下面的例子将为所有匹配元素设置 background-color 值: 实例 复制代码 代码如下: $("p").css("background-color","yellow"); 设置多个 CSS 属性

网站制作如何用CSS控制超链接样式

  网站制作用CSS可控制超链接样式,一般分为四个部分:a:active是超级链接的初始状态:a:hover是把鼠标放上去时的状况:a:link 是鼠标点击时:a:visited是访问过后的情况. CSS控制超链接的三种方法 1.通过对应超链接外的父级的css类的css样式来控制超链接的样式 案例超链接代码<div class="yangshi"><a href="http://www.wangqi.com/">CSS</a>&l

CSS控制页面样式的4种方式和优先级问题

本节主要讲解,两个内容, 第一:CSS如何控制页面样式,有几种方式: 第二:这些方式出现在同一个页面时的优先级. 使用xHTML+CSS布局页面,其中有个很重要的特点就是内容与表象相分离,内容指HTML页面代码,表象就是CSS代码了,如果把页面看成穿着衣服的人的话,人就是HTML,是内容,而衣服呢就是CSS,是表 象,现在出现的问题是,如何让CSS去控制页面?或者说,如何让衣服穿在人身上,好体现出人得风格特点:不同的CSS就可以使页面出现不同的风格适用不同的网站,而不同的衣服,人穿上后就会体现

【DIV+CSS入门教程】CSS如何控制页面

本节主要讲解,两个内容, 第一:CSS如何控制页面样式,有几种方式: 第二:这些方式出现在同一个页面时的优先级. 使用xHTML+CSS布局页面,其中有个很重要的特点就是内容与表象相分离,内容指HTML页面代码,表象就是CSS代码了,如果把页面看成穿着衣服的人的话,人就是HTML,是内容,而衣服呢就是CSS,是表 象,现在出现的问题是,如何让CSS去控制页面?或者说,如何让衣服穿在人身上,好体现出人得风格特点:不同的CSS就可以使页面出现不同的风格适用不同的网站,而不同的衣服,人穿上后就会体现

JQuery结合CSS操作打印样式的方法_jquery

本节内容:JQuery.CSS操作打印样式. 一.添加打印样式 1,为屏幕显示和打印分别准备一个css文件,如下所示:  用于屏幕显示的css: 复制代码 代码如下: <link rel="stylesheet" href="css/mainstylesheet.css" media="screen" /> 用于打印的css: 复制代码 代码如下: <link rel="stylesheet" href=&q

JQuery结合CSS操作打印样式的方法

 这篇文章主要介绍了JQuery结合CSS操作打印样式的方法,有需要的朋友可以参考一下 本节内容: JQuery.CSS操作打印样式.   一.添加打印样式   1,为屏幕显示和打印分别准备一个css文件,如下所示:   用于屏幕显示的css:    代码如下: <link rel="stylesheet" href="css/mainstylesheet.css" media="screen" />     用于打印的css: