Controlling print styles with JQUERY+CSS implementation _jquery

One, add print style

1. Prepare a CSS file for screen display and printing, as follows:
CSS for on-screen display: <link rel= "stylesheet" href= "css/mainstylesheet.css" media= "screen"/>
Css:<link rel= for printing "stylesheet" href= "Css/printstylesheet.css" media= "print"/>

2. Import Method:
<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:
@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're ready to define something special
When you print a rule, you can create a separate style sheet that invalidates any style that looks bad when you print it. 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, only when the browser is
You can print out the back (optional in advanced options for IE) by setting the background to print. 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 the background.
Pictures and colors.

You can use the Background-color property to set the background color to white, like this: font-family:arial; line-height:26px; " > Use background shortcut method can also achieve the same effect: Background:white. So like Background:white;
Such a declaration not only sets the background color to white, but also eliminates all background images. Using this background shortcut property,
You've achieved two goals--set a white background and eliminated the picture--with little code.

2. If you want a picture to appear in the printed content, add it in your 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 based browser
(for example, Netscape 6+), when a user uses it to browse a printout, it truncates the contents of the floating element.
The content will not be transferred to the printer, and the next page will not have its trace-it disappears.

6. As far 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 the wildcard selector (see page 54th) and!important to create a
Labels are formatted as a single style of black text:
*{Color: # #000 #!important}

9. Display 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.
Unfortunately, after selector and content attribute tips do not work on Internet Explorer 6 or earlier versions
(To write this book, not in IE 7). But it can be true in Firefox and Safari, so you can at least be clear
Describes 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
Eyes 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 of the other pages that reach the same site
Document Link: "Access to the home page (.. /.. /index. HTML). "Using a little bit of CSS 3 magic, you can force this style to only hit
Print absolute URLs (those that start with http://), like this:
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. Using Page-break-before
Property makes the picture print on a new page and fits the entire page.
To make an element appear as the last item on the printed page, add page-break-after:always to the style of that element.

Create two class styles to be named similar to. Break_after and. Break_before, like this:
. 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

Generally speaking, we can not use the printer to test, in IE browser menu bar "file" in the "Print Preview", through this
Print a preview to do the test.