Simple introduction to printing pages with css settings, css printing pages

Simple introduction to printing pages with css settings, css printing pages

A Brief Introduction to printing pages with css settings:
In many cases, it is often necessary to print a part of the web page, instead of all the web pages. Therefore, it is a good way to tell the printer to print the part, and use css to set it first. First look at a piece of code:

 

<link href="css/screen.css" rel="stylesheet" type="text/css" media="screen" /> <link href="css/print.css" rel="stylesheet" type="text/css" media="print" />

 

The above two lines of code introduce external css styles. Specifically, the media attribute values are screen and print, which are used to specify the objects to be served by css styles. If the attribute value is media, it is used to display on the screen control page. If the attribute value is print, the css code is used to control the style of the elements to be printed.
Hide the page elements that do not need to be printed:
Use css to hide the page elements that do not need to be printed. Click print to print the elements that are not hidden under the control of the print style sheet.
The Code is as follows:

 

/* Hide the non-print item start */h1 span {display: none;} # sidebar {display: none;}/* Hide the end of the non-print item */

 

The above code is just a simple demonstration, and related elements on the page will not be printed.
Click to print:

 

<Input type = "button" value = "click to print" onclick = "window. print ()"/>

 

Click the above button to achieve the print effect.

The original address is: http://www.softwhy.com/forum.php? Mod = viewthread & tid = 12813.

For more information, see: http://www.softwhy.com/divcss/