How JQuery combines CSS with printing styles_jquery

Contents in this section:
JQuery and CSS operation print styles.

1. Add printing style

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

Copy code The code is as follows:

css for printing:

Copy code The code is as follows:

3. Directly write the screen display style and printing style in a css file:

Copy the code


The code is as follows:

@media print {}{

h1 {
color: black;

} h2 {}{ color: gray; } }

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

Other:
It is often useful to create a stylesheet that does not specify a media type (or utilize media="all").
When you're ready to define some rules specifically for printing, you can just create a separate stylesheet that will invalidate any styles that don't look good when printed.
One problem with using this approach is that you have to make sure that the printer styles actually do override the main stylesheet. It's ready to use! important.

2. Notes on printing style:

1. It is not recommended to use the background in print styles because the browser cannot print out the background content in CSS by default. The background can only be printed out when the browser is set to print the background (ie's advanced options (optional).

Even if the background prints, it may overwhelm any text overlaid on it. This is true, especially for text that contrasts strongly on a monitor with a colored background, but will blend into this background when printed on a black and white printer.

background: none; remove background images and colors.

You can use the background-color attribute to set the background color to white, like this: background-color: white.
The same effect can also be obtained using the background shortcut: background: white. So a statement like background: white;
not only sets the background color to white, but also eliminates any background images. Using the background shortcut property, you achieve two purposes - setting a white background and eliminating the image - with very little code.

2. If you need pictures to appear in the printed content, please add them in the HTML code.

3. Print settings use physical units, so it is best not to use pixels (px) for size. You can use pt or cm;

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

5. Try not to let the content float. Some browsers will have a trouble when printing floating divs, which requires special attention.

Don’t float blocks in printed stylesheets, like this: float: none;.

For example, Gecko-based browsers (such as Netscap 6), when users use it to browse a printout page, it will truncate the content in floating elements.
The content will not be sent to the printer, and there will be no trace of it on the next page - it will disappear.

6. Try your best to prioritize the important content in the HTML code, so that you can save a lot of trouble in the printing style.

7. Printing is different from web pages. When printing, you must leave a white border, and the unit is inches (in).

8. To ensure that all text on the page prints in black, use a wildcard selector (see page 54) and !important to create a single style that formats each tag as black text:

Copy code

The code is as follows:

*{ color: ##000# !important }

9. Display link URL information in printing:
Use an advanced selector: after and an advanced CSS property called content to print text that is not displayed on the screen at the end of a style element.

Existing problem:
The after selector and content attribute tricks do not work on Internet Explorer 6 or earlier (nor on IE 7).
But it does work on Firefox and Safari, so at least the URL is clearly stated so visitors can use their browser.

To do this, add a style to the print stylesheet that prints the URL after 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 distinguish between outer or inner link, so it also prints useless relative document links to other pages on the same site: "Visit home page (../../index.html)." With a little CSS 3 magic, you can force this style Only print absolute URLs (i.e. those starting with http://), like this:

Copy code The code is as follows:

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

10. Add page breaks to printing: two widely recognized attributes 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 attribute to print the image on a new page and fit the entire page.
To make an element appear as the last item on the printed page, add:
page-break-after: always to that element's style.

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

Copy code The code is as follows:

.break_before { page-break-before: always; }
.break_after { page-break-after: always; }

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

3. Test the printing style
Normally, it is impossible to use a printer to test. There is a "Print Preview" in the "File" menu bar of the IE browser, and you can use this print preview to test.