Use jquery CSS to control printing style_jquery

1. Add printing style

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

2. Import method:

3. Directly write the screen display style and printing style in a css file:
@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.

Others:
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 something special
When it comes to printing rules, you can just create a separate style sheet and disable 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 style sheet. It's ready to use! important.

2. Notes on printing style:

1. It is not recommended to use background in print styles, because the browser cannot print out the background content in CSS by default. It can only be used when the browser is
The background can be printed only when the background can be set to be printed (optional in the advanced options of IE). 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 blends into this background when printed on a black and white printer.
background:none; remove background
Pictures and colors.

You can use the background-color attribute to set the background color to white, like this: font-family: Arial; line-height: 26px;"> You can also get the same effect by using the background shortcut: background: white. Therefore Like background: white;
Such a statement not only sets the background color to white, but also eliminates all background images. Use the shortcut attribute of this background,
You achieve two things - set a white background and eliminate 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 cause trouble when printing floating divs, which requires special attention.
Don't use floating blocks in printed stylesheets, like this: float: none;. For example, Gecko-based browser
(such as Netscape 6), when the user uses it to browse a printout page, it will truncate the content in the floating element.
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, which can save a lot of trouble in the printing style.

7. Printing is different from web pages. When printing, white margins must be left, 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 variable that separates each
Tags are all formatted with a single style of black text:
*{ color: ##000# !important }

9. Display link URL information in printing: use an advanced selector: after and an advanced CSS property called content,
Print text that is not displayed on the screen at the end of a style element.
Unfortunately, the :after selector and content attribute tricks don’t work on Internet Explorer 6 or earlier
(As of this writing, it doesn't work on IE 7 either). But it does work on Firefox and Safari, so you at least have the clarity
Describe the URL so that 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 additional text items
Use parentheses to make it look better:
a:after {content: " (" attr(href) ") ";}

However, this CSS does not differentiate between external or internal links, so it also prints useless relative
to other pages on the same website. Document link: "Visit homepage (../../index.html)." With a little CSS 3 magic, you can force this style to only type
Print absolute URLs (i.e. those starting with http://), like this:
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 page-break-before
The property causes the image to be printed on a new page and fit on 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:
.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 printing style

Normally speaking, it is impossible for us to use a printer for testing. There is a "Print Preview" in the "File" menu bar of the IE browser, which can be used
Print preview to test.