JQuery Method for printing styles with CSS operations _ jquery

This article mainly introduces JQuery's method of printing styles with CSS operations. If you need it, refer to this section:
JQuery and CSS operation printing styles.

1. Add a Print Style

1. Prepare a css file for screen display and printing, as shown below:
Css for screen display:

The Code is as follows:

Css used for printing:

The Code is as follows:

2. import method:

The Code is as follows:

3. directly write the screen display style and Print Style in a css file:

The Code is as follows:

@ Media print {}{
H1 {
Color: black;
}
H2 {}{
Color: gray;
}
}

@ Media print content is only valid for printed content, and other content is the screen display style.

Others:
Creating a style sheet without a specified media type is usually useful (or using media = "all ").
When you are ready to define some rules that are especially used for printing, you can create a separate style sheet to invalidate any style that looks bad during printing.
One problem with this method is that you must ensure that the printer style actually overwrites the main style sheet. Available! Important.

Ii. Notes for printing styles:

1. The background is not recommended in the print style, because the background content in CSS cannot be printed by default in the browser, the back can be printed only when the browser is set to print the background (optional in the advanced options of ie ).
Even if the background can be printed, it may overwrite any text stacked on it.
This is true, especially for text that is strongly compared with a color background on the display, but the background will be integrated when printed on a black/white printer.
Background: none; remove the background image and color.

You can use the background-color attribute to set the background color to white, like this: background-color: white.
You can use the shortcut of background to obtain the same effect: background: white. So it's like background: white;
This declaration not only sets the background color to white, but also removes all background images. Using the shortcut property of this background, you have achieved two goals-setting a white background and eliminating images-with little code.

2. If you want to display an image in the printed content, add it to the HTML code.

3. The print setting uses a physical unit, so it is best not to use pixels (px) for the size. You can use pt or cm for the size;

4. Hide unnecessary or secondary content. Display: none;

5. Do not let the content float as much as possible. Some browsers may have a problem when printing the floating p, so pay special attention to it.
Do not float blocks in the printed style sheet, such as: float: none ;.

For example, if you use a Gecko-based browser (such as Netscap 6 +) to browse a printed output page, it captures the content of floating elements.
This content will not be transmitted to the printer, nor will it be visible on the next page-it disappears.

6. Try to make important order of content in HTML code, which can save a lot of trouble in printing styles.

7. Unlike the web page, printing must be left with white edges. The unit is in ).

8. Make sure that all text on the page is printed in black. Use the wildcard selector (see page 54th) and! Important to create a single style that formats each label as black text:

The Code is as follows:

* {Color: #000 #! Important}

9. The link url information is displayed in the print:
Use an advanced selector: after and an advanced CSS attribute called content to print text not displayed on the screen at the end of a style element.

Problems:
The after selector and content attribute technique does not work in Internet Explorer 6 or earlier versions (nor does it work in IE 7 ).
But it does on Firefox and Safari, so at least the URL can be clearly stated so that visitors can use their browsers.

To do this, add a style to the print style sheet and print the URL after each link. You can even add other text items such as parentheses to make them look better:
A: after {content: "(" attr (href )")";}
However, this CSS does not distinguish between external and internal links. Therefore, it also prints links to useless documents on other pages of the same website: "access the homepage (.. /.. /index. html )." With a little bit of CSS 3 magic, you can force this style to print only absolute URLs (those starting with http: //), like this:

The Code is as follows:

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

10. Add a paging character to the print: two widely recognized attributes are page-break-before and page-break-after.
Page-break-before tells the web browser to insert a paging character before a specified style. The page-break-before attribute is used to print an image on a new page and fit the entire page.
To display an element as the last project on the print page, add the style of that element:
Page-break-after: always.

Create two class styles, named after. break_after and. break_before, like this:

The Code is as follows:

. Break_before {page-break-before: always ;}
. Break_after {page-break-after: always ;}

Then, you can apply these styles to elements that should be printed at the top or bottom of the webpage.

Iii. Test the Print Style
Generally, the printer cannot be used for testing. In the IE browser menu bar "file", there is "print preview". You can use this print preview for testing.