jquery combines CSS to manipulate print style methods

  This article mainly introduces jquery combined with CSS to manipulate the print style of the method, the need for friends can refer to the

This section contains: JQuery, CSS manipulating print styles.   One, add print style   1, prepare a CSS file for screen display and printing, as follows:   CSS for on-screen display:     code as follows: <link rel= "stylesheet" href= "Css/mainstylesheet.css" media= "screen"/>     CSS for printing:     Code is as follows: <link rel= "stylesheet" href= "Css/printstylesheet.css" media= "print"/>     2,import mode:     code as follows:  <style type= "text/ CSS ">       @import url (" css/printstylesheet.css ") print;   </style>     3, directly to the screen display style and print style written in a CSS file:     Copy Code as follows: @media print {} {    h1 {      color:black;    }     H2 {}       Color:gray     The contents of the  }     @media print are only valid for the printed content, except for the on-screen display style.   Other: It is often useful to create a stylesheet that does not specify a media type (or take advantage of media= "all"). When you are ready to define some rules that are especially useful for printing, you can create a separate stylesheet that invalidates any style that looks bad when printed. One problem with this approach is that you must ensure that the printer style does actually overwrite the main style sheet. can use! Important.   Two, print style notes:   1, the background is not recommended in the print style, because browsers cannot print the background content in CSS by default, only when browsingCan print out the back if it is set to print the background (optional in advanced options for IE). Even if the background can be printed, it may cover any text that is stacked above it.   This is true, especially for text that is strongly contrasted with a colored background on a monitor, but when printed on a black-and-white printer, it blends this background.   Background:none, remove background picture and color.   You can use the Background-color property to set the background color to white, like this: Background-color:white. The same effect can be achieved by using background shortcut methods: Background:white. So like Background:white; Such a declaration not only sets the background color to white, but also eliminates all background images. With this background shortcut attribute, you've achieved two goals-setting a white background and eliminating the picture-with very little code.     2, if you need to see a picture in your printed content, add it to your HTML code.   3, print settings are used in physical units, so the best size does not use pixels (px), you can use the PT or cm;   4, hide unwanted or secondary content. Display:none   5, try not to let content float, some browsers print floating div in the process, there will be a problem, need special attention. Do not float blocks in the printed style sheet, like this: Float:none;   For example, a gecko browser (for example, Netscap 6+), which truncates the contents of a floating element when it is used by a user to browse a printout page. The content will not be transferred to the printer, and the next page will not have its trace-it disappears.   6, as much as possible in the HTML code to do the important priority of the content, so that the printing style can save a lot of trouble.   7, printing is not the same as the Web page, printing must be left white edge, units in inches (in).   8, to make sure that all the text on the page is printed in black, use a wildcard selector (see page 54th) and!important to create a single style that formats each label as black: The   code is as follows:   *{color: # #000 #! IMPORTANT}     9, displaying link URL information in print: Using an advanced selector: After and an advanced CSS property called content,   the text that doesn't appear on the screenThis is printed at the end of a STYLE element.   problems: After selector and content attribute tips are not working on Internet Explorer 6 or earlier (not on IE 7). But it does work on Firefox and Safari, so it's at least a clear description of URLs so that visitors can use their browsers.   To do this, add a style to the print style sheet and print the URL behind 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 between external and internal links, so it also prints out the useless relative document links to other pages of the same site: "Visit the homepage (... /.. /index. HTML). "With a little bit of CSS 3 magic, you can force this style to print only absolute URLs (those that start with http://), like this:     code as follows:  a[href^=" http://"]:after {content:" ( "attr (HREF)") ";}     10, adding page breaks for printing: 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 print a picture on a new page and fit the entire page.   to make an element appear as the last item on the printed page, add the style to that element:   Page-break-after:always.   Create two class styles to name similar to. 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 optionally apply these styles to the elements that should be printed at the top or bottom of the page.

Third, test the print style

In general, it is not possible to test with a printer, in IE browser menu bar "file" in the "Print Preview", you can use this print preview to do the test.