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

本节内容：
JQuery、CSS操作打印样式。

一、添加打印样式

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的浏览器 （例如Netscap 6+），当用户用它来浏览一个打印输出页面时，它会截去浮动元素中的内容。