JQuery combines CSS manipulation with methods for printing styles

  • 2020-03-30 01:01:12
  • OfStack

Contents of this section:
JQuery, CSS operation printing style.

Add a print style

1. Prepare a CSS file for screen display and printing, as follows:
  CSS for screen display:

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

CSS for printing:

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

2. Import method:

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

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

@media print {}{
    h1 {
      color: black;
    h2 {}{
      color: gray;

The content inside @media print is only valid for the printed content, and the content outside is the style displayed on the screen.

It is often useful to create a style sheet that does not specify the media type (or use media="all").
When you are ready to define some rules specifically for printing, you can just create a separate style sheet to invalidate any styles that don't look good when printing.
One problem with this approach is that you must ensure that the printer style actually overrides the main style sheet. Available! Important.

Ii. Notes for printing style:

1. Background is not recommended in print styles, because the browser cannot print out the background content in CSS by default, and can only print out the background if the browser is set to print it (ie's advanced options are optional).
Even if the background can be printed, it can overwhelm any text that is superimposed on it.
  This is true, especially for text that is strongly contrasted on the monitor with a color background, but is fused when printed on a black and white printer.
  Background: none; Remove background image and color.

You can set the background color to white using the background-color property, like this: background-color: white.
The same shortcut is used with background: background: white. Hence, background: white;
This declaration not only sets the background color to white, but also eliminates all background images. With this background shortcut, you achieve two goals -- a white background and no image -- with very little code.

2. If you need a picture in the print content, please add it in the HTML code.

3. The printing setting USES physical units, so it is better not to use pixels (px) for size, but pt or cm;

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

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

For example, a gecko-based browser, such as Netscap 6+, truncates the contents of floating elements when the user USES it to browse a printout page.
This content will not be sent to the printer, and it will not be found on the next page. It will disappear.

6, as much as possible in the HTML code to make the content of the important order, so in the printing style can save a lot of trouble.

7, printing and web pages are not the same, print must leave a white edge, the unit of inches (in).

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

  *{ color: ##000# !important }

9. Display link url information in print:
Using a high-level selector: after and a high-level CSS property called content,   Print text that is not on the screen at the end of a style element.

Existing problems:
After selectors and content attribute tricks don't work on Internet Explorer 6 or earlier (nor on Internet Explorer 7).
But it does work on Firefox and Safari, so at least it makes the URL clear so visitors can use their browser.

To do this, add a style to the print style sheet and print out 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 external and internal links, so it also prints out unused relative document links to other pages on the same site: "visit the home page (.. /.. / index.html). With a little CSS 3 magic, you can force the style to print only absolute urls (that is, those that start with http://), like this:

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

10, add page breaks to print: 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 make the image print on a new page and fit across the page.
  To make an element appear as the last item on the printed page, add the style of that element:
  Page break - after: always.

Create two class styles with names similar to.break_after and.break_before, like this:

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

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

Test the print style
Generally, it is not possible to test with a printer. In the Internet explorer menu bar "file", there is a "print preview" which can be used to test.

Related articles: