jquery combines CSS to manipulate the way the print style _jquery

The content of this section:
JQuery, CSS operation print style.

One, add print style

1, prepare a CSS file for screen display and printing, as follows:
CSS for on-screen display:

Copy Code code as follows:

<link rel= "stylesheet" href= "css/mainstylesheet.css" media= "screen"/>

CSS for printing:

Copy Code code as follows:

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

2,import Way:

Copy Code code as follows:

<style type= "Text/css" >
@import url ("css/printstylesheet.css") print;
</style>

3, write the screen display style and print style directly in a CSS file:

Copy Code code as follows:

@media Print {} {
H1 {
Color:black;
}
H2 {} {
Color:gray;
}
}

The contents of the @media print are only valid for the printed content, except for the display style of the screen.

Other:
It is often useful to create a style sheet that does not specify a media type (or take advantage of media= "all").
When you are ready to define some rules that are especially useful for printing, you can create a separate stylesheet that invalidates any style that looks bad when printed.
One problem with this approach is that you must ensure that the printer style does actually overwrite the main style sheet. can use! Important.

Second, printing style notes:

1, the background is not recommended in the print style, because the browser cannot print the background content in the CSS by default, and only if the browser is set to print the background can print out the back (ie optional for advanced options).
Even if the background can be printed, it may cover any text that is stacked above it.
This is true, especially for text that is strongly contrasted with a colored background on a monitor, but when printed on a black-and-white printer, it blends this background.
Background:none: Remove background pictures and colors.

You can use the Background-color property to set the background color to white, like this: Background-color:white.
The same effect can be achieved by using background shortcut methods: Background:white. So like Background:white;
Such a declaration not only sets the background color to white, but also eliminates all background images. With this background shortcut attribute, you've achieved two goals-setting a white background and eliminating the picture-with very little code.

2, if you want the picture to appear in the printed content, please add it in the HTML code.

3, the Print Setup uses the physical unit, therefore the size is best not to use the pixel (PX), may use the PT also to use the CM;

4, hide unwanted or minor content. Display:none;

5, try not to let content float, some browsers print floating div in the process, there will be a problem, need special attention.
Do not float blocks in the printed style sheet, like this: Float:none;

For example, a gecko browser, such as Netscap 6+, truncates the contents of a floating element when it is used by a user to browse a printout page.
The content will not be transferred to the printer, and the next page will not have its trace-it disappears.

6, as much as possible in the HTML code to do the content important priorities, so in the print style can save a lot of trouble.

7, printing is not the same as the Web page, printing must be left white edge, units in inches (in).

8, to ensure that all text on the page is printed in black, use a wildcard selector (see page 54th) and!important to create a single style that formats each label as black text:

Copy Code code as follows:

*{Color: # #000 #!important}

9, display the link URL information in print:
Take advantage of an advanced selector: After and an advanced CSS attribute called content, print text that is not displayed on the screen at the end of a STYLE element.

The problems that exist:
The after selector and content property tips do not work on Internet Explorer version 6 or earlier (not on IE 7).
But it does work on Firefox and Safari, so it's at least a clear description of URLs so that visitors can use their browsers.

To do this, add a style to the printed style sheet and print the URL behind each link. You can even add other text items like parentheses to make it look better:
A:after {content: "(" attr (HREF) ")";}
However, this CSS does not differentiate between external and internal links, so it also prints out the useless relative document links to other pages of the same site: "Visit the homepage (... /.. /index. HTML). "With a little bit of CSS 3 magic, you can force this style to print only absolute URLs (those that start with http://), like this:

Copy Code code as follows:

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

10, add page breaks for printing: Two widely recognized properties are Page-break-before and Page-break-after.
Page-break-before tells the Web browser to insert a page break before a specified style. Use the Page-break-before property to print a picture on a new page and fit the entire page.
To make an element appear as the last item on the printed page, add the style to that element:
Page-break-after:always.

Create two class styles to be named similar to. Break_after and. Break_before, like this:

Copy Code code as follows:

. Break_before {Page-break-before:always}
. break_after {Page-break-after:always}

You can then selectively apply these styles to the elements that should be printed at the top or bottom of the page.

Third, test the print style
In general, it is not possible to test with a printer, in IE browser menu bar "file" in the "Print Preview", you can use this print preview to do the test.