First, the print style added
1. ready for screen display and print a document css respectively, as follows:
a screen display css: <link rel = "stylesheet" href = "css / mainstylesheet.css" media = "screen" />
CSS for printing: <Link the rel = "this stylesheet" the href = "CSS / printstylesheet.css" Media = "Print" />
2. Import manner:
<style type = "text / CSS">
@import URL ( "css / printstylesheet.css") Print;
</ style>
3. directly to the screen display style and written in a print style css file:
@media Print {} {
h1 of {
Color: Black;
}
H2 {} {
Color: Gray;
}
}
@media Print only the contents inside the effective print content, the content is outside the screen pattern.
Other:
Creating a media type is not specified stylesheet is often useful (or use media = "all"). When you're ready to define some special use
When the rules printing, you can just create a separate style sheet, so that any bad look when printed pattern all fail. One problem with this approach is that you must make sure the printer style actually does cover the main style sheet. can use! important.
Second, the print style Note:
not recommended background 1. print style, because the browser by default and can not print out the contents of the CSS background, and only when the browser is
the case can be set to print out a print background back (ie advanced options optional). Even if the background can be printed, it may also be stacked on top of it overshadowed any text.
This is true, especially for colored background with strong contrast on the display of text, but this will be the integration background when printed on a black and white printer.
background: none; remove background
images and colors.
Background-color property can be used to set the background color to white, like this: background using the shortcut method can achieve the same effect: background: white. Therefore, as background: white;
such a statement not only set the background color to white, and eliminates all background images. With this background the shortcut properties,
you achieve two purposes - to set up a white background, and eliminates the picture - only a few lines of code.
2. If the picture needs to appear in print content, please join in the HTML code.
3. print settings using physical units, it is best not to use the size of pixels (PX), can also be used pt cm & lt;
4. hide unwanted secondary or content. Run the display: none;
5. Try not to let the contents float, some browsers print floating div in the process, there will be a trouble, need special attention.
Do not float in the stylesheet printing block, like this: float: none ;. For example, Gecko-based browser
(e.g. Netscape 6+), to use it when the user browse a printout, it will truncate the contents of the floating elements.
These contents will not be transferred to the printer, the next page there will not be a trace of it - it's gone.
6. do as much as possible the content of important priorities in the HTML code, so in print style can save a lot of trouble.
7. Print the page is not the same, be sure to leave a white border print units in inches (in).
8. To ensure that all the text on the page to black print, use wildcard selector (see page 54), and the important to create the each!
Tag formatted as a single black text style:
* {Color: ## ! # 000} Important
9. the information displayed in the print url links: the use of a high-level selector: after CSS properties and referred to as an advanced content,
the text is not displayed on the screen at the end of a print style element.
Unfortunately,: after selectors and content attributes skills it does not work on the 6 or earlier versions of Explorer Internet
(up to this writing, does not work on IE 7). But it certainly can, so you can clearly at least in Firefox and Safari
explain URL so that visitors can use their browser.
To do this, add a style sheet to the print style, print out the URL after each link. You can even add other text entry
projects such as parentheses, making it look better:
A: the After {Content: "(" attr (href) ")";}
However, this does not distinguish CSS links to external or internal, it also prints out the relatively useless reach the same site another page
document links:. "Access home page (. ../../Index html)" use a little CSS 3 magic, you can force this style played only
absolute URL printed (ie http: // at the beginning of those), like this:
a [href ^ = "http: //"]: the After {Content: "(" attr (the href) ")";}
10. the printed to add a page break: two kinds of properties are widely recognized page-break-before and page-break-after.
page-break-before to tell web browsers to insert a page break before a specified style. Using the page-break-before
attribute the picture is printed on a new page, and fit the entire page.
To make an element as the last item on the printed page, give the style elements that add page-break-after: always.
Create two class style, in a manner similar name .break_after and .break_before to name, like this:
.break_before {Page-BREAK-the before: Always;}
.break_after {the After-Page-BREAK: Always;}
then you can choose of these styles to apply to the elements should be printed at the top or bottom of the page.
Third, the test print style
Normally we can not use the printer for testing, the "Print Preview" in the IE browser menu bar "File", by which
the preview to do a test print.
Reprinted from: https://www.cnblogs.com/huashanqingzhu/p/4345698.html