Print a style sheet (availability of UE)

Introduction

A print style sheet sets the webpage style so that the page displays a more friendly style when printing. The style sheet has been printed for several years. However, few websites use it now, which means that we can print webpages that are not suitable for printing on paper. (For example, Yahoo: BaiduArticleAnd after the right side is displayed, the content width is too small and the font size is too small. So if you print a page, you will realize the necessity of this Article)

• Printing style sheets greatly improves availability, especially pages with a lot of content (such as this page)
• It can be easily and quickly set

Some websites also provide links to print versions, but obviously this still needs to be established and maintained. It also requires the user to find the link in the page, open the page, and then print. However, people usually directly "file-print" or press Ctrl + P. How to set your print style sheet

Print a style sheet is similar to the style sheet we usually use, but it will only be called during printing. To use a print style sheet, you only needCodePut it in Head

<LINK rel = "stylesheet" href = "print.css" type = "text/CSS"Media = "print"/>
 

Print.css is used to print the style sheet file, Media = "print" This means that this style sheet is called only when being printed. Attribute media has many options (such as handheld, TV, screen) to view the complete list and delete unnecessary projects.

We usually want to display the logo and page content in the printed version, so we usually need to remove the header and the bottom (or remove the sidebar on the left and right ), maybe there are other independent elements that you don't want to display, just add in HTMLClass = "noprint"To remove the content, you only need to set:Display: NoneIn this way, the style sheet can be written as follows:

 
# Header, # Nav,. noprint {display: none ;}
 

Set page format

Make sure that the page content covers the full width (prevent the width and font from being printed as the Yahoo page above is too small to read)

 
# Container, # container2, # Content {width: 100%; margin: 0; float: none ;}
 

Link Style

 
A: Link, A: visited {color: #781351}
 

After the link is printed, you cannot see the address. We can also display the address behind the link.

 
. Printlink A: After {content: "<" ATTR (href) ">"; color: # ff0000; font-style: italic ;}
 

Create a Print Style Sheet

When creating a print style sheet, you can directly write the style on the back of the main style sheet, check the content displayed on the screen, directly to satisfaction, then you can cut it to print.css for all pages to use

 

• Download complete style: print.css
• Http://www.uedsky.com/sky/article/print-stylesheet.html
• Http://www.codeproject.com/KB/HTML/print-stylesheet.aspx.
• Note: I wanted to add "translated", but... to the title ....