CSS achieves different printing and Screen Display Results

In general web pages, we require that the printed results be the same as the displayed results, but in some reports or business systems, we may only need to print part of the page content. For example, if I only need to print data, however, buttons and backgrounds do not need to be printed, which is determined by business needs. We can imagine what would happen if a button appears in a printed invoice, it is estimated that it will pass out ~~

Now, let's talk about how to implement it. One way is to prepare a CSS file for screen display and printing, as shown below:

CSS for screen display:

<LINK rel = "stylesheet" href = "CSS/mainstylesheet.css" Media = "screen"/>

CSS used for printing:

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

Note: These two CSS are placed in a Web page.

Another method is import:<Style type = "text/CSS">
@ Import URL ("CSS/printstylesheet.css") print;
</Style>

The last method is to directly write the screen display style and Print Style in a CSS file: @ Media Print {} {
H1 {
Color:Black;
}
H2 {} {
Color:Gray;
}
}

@ Media print content is only valid for printed content, and other content is the screen display style.