Hands-on instructions on how to control print style instances using jquery + CSS

1. Add a print style

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

2. import method:
<Style type = "text/css">
@ Import url ("css/printstylesheet.css") print;
</Style>

3. Directly write the screen display style and print style in a css file:
@ 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 something special
When printing rules, you can create only one individual 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, only when the browser is
The backend can be printed only when the background can be printed (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 background
Image and color.

You can use the background-color attribute to set the background color to white, such as: font-family: Arial; line-height: 26px; "> Using the shortcut of background can also achieve 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 only a small amount of code.
 
2. If you want to display an image in the printed content, add it to the HTML code.

3. The print settings use physical units, so it is best not to use pixels (px) for the size, pt or cm for the size;

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

5. Do not float the content as much as possible. Some browsers may be troublesome when printing floating div, so pay special attention to it.
Do not float blocks in the printed style sheet, such as: float: none ;. For example, Gecko-based browsers
(For example, Netscape 6 +). When you use it to browse a print output page, it captures the content in the floating element.
This content will not be transmitted to the printer, nor will it be found 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
Each label is formatted as a single style of black text:
* {Color: #000 #! Important}

9. Display url information in the print process: use 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, the after selector and content attribute skills do not work in Internet Explorer 6 or earlier versions.
(It won't work on IE 7 until I write this book ). But it does work on Firefox and Safari, so you can at least understand
URL 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 it look better:
A: after {content: "(" attr (href )")";}

However, this CSS does not differentiate external or internal links, so it also prints the useless comparison to reach other pages of the same website.
Document link: "access the home page (.../../index. html )." With a little bit of CSS 3 magic, you can force this style to only play
Print the absolute URL (that is, those starting with http: //), like this:
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. Use page-break-before
This attribute enables the image to be printed on a new page and is suitable for the entire page.
To display an element as the last project on the print page, add page-break-after: always to the style of that element.

Create two class styles, named after. break_after and. break_before, like this:
. 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, we cannot use a printer for testing. In the IE browser menu bar, "file" contains "Print Preview".
Print and preview for testing.