CSS Controls print print style

Source: http://blog.csdn.net/pangni/article/details/6224533

First, add a plot style
1. Prepare a CSS file for screen display and printing, as follows:
CSS for onscreen display: <link rel= "stylesheet" href= "css/mainstylesheet.css" media= "screen"/>
Css:<link rel= "stylesheet" href= "Css/printstylesheet.css" media= "print"/> for printing

2. Import Method:
<style type= "Text/css" >
@import url ("css/printstylesheet.css") print;
</style>

3. Write the screen display style and print style directly in a CSS file:
@media Print {} {
H1 {
Color:black;
}
H2 {} {
Color:gray;
}
}
@media print content is only valid for the printed content, and the content is the style of the screen display.


Other:
It is often useful to create a style sheet that does not specify a media type (or take advantage of media= "all"). When you're ready to define some special use
When you print a rule, you can create a separate style sheet that invalidates any style that looks bad when printed. One problem with using this approach is to make sure that the printer style actually overrides the main style sheet. can be used! Important.

Second, the printing style notes:

1. The background is deprecated in the print style because the browser does not print the background content in the CSS by default, only if the browser is
Setting can print the background to print out the back (optional in advanced options for IE). Even if the background can be printed, it may also cover any text stacked on top of it.
This is true, especially for text that is strongly contrasted on the display with a colored background, but it blends when printed on a black-and-white printer.
Background:none; Remove the background
Pictures and colors.

You can use the Background-color property to set the background color to white, like this: Background-color:white.
The same effect can be obtained by using the background method: Background:white. So like Background:white;
Such a declaration not only sets the background color to white, but also eliminates all background images. Using this background's quick properties,
You achieve two purposes-set a white background and eliminate the picture-with very little code.

2. If you need to see the picture in the printed content, please include it in the HTML code.

3. The printing settings use a physical unit, so the size is best not to use pixels (px), you can use PT or cm;

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

5. Try not to let the content float, some browsers print floating div in the process, there will be a trouble, need special attention.
Do not float the block in the printed style sheet, like this: Float:none;. For example, a gecko-based browser
(for example, Netscape 6+), when the user uses it to navigate a printout, it truncates the contents of the floating element.
This content will not be transmitted 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 order of content, so that in the printing style can save a lot of trouble.

7. Printing is not the same as the Web page, printing must leave white edges, units in inches (in).

8. To make sure all the text on the page is printed in black, use the wildcard selector (see page 54th) and!important to create a
Labels are formatted as a single style of black text:
*{Color: # #000 #!important}

9. Show link URL information in print: Take advantage of 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 property tips do not work on Internet Explorer 6 or earlier versions
(Not on IE 7 until the book is written). But it does on Firefox and Safari, so you can at least be clear
URLs so that visitors can use their browsers.

To do this, add a style to the plot 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 differentiate between external and internal links, so it also prints out the useless relative to the other pages of the same site.
Document Link: "Access Home page (.. /.. /index. HTML). "With a little bit of CSS 3 magic, you can force this style to only hit
Print absolute URLs (that is, those that begin with http://), such as
a[href^= "/http"]:after {content: "(" attr (HREF) ")";}


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

Create two class styles to name them 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 the elements that should be printed at the top or bottom of the page.


Third, test the print style

In general, we can not use the printer to test, in the Internet Explorer menu bar "file" has "Print Preview",
Print Preview to do the testing.

CSS Controls print print style