CSS implementation of screen display and printing results are not the same way

Article Tony Qu Original

One way to do this is to prepare a CSS file for screen display and printing, respectively, as follows:
CSS for on-screen display:

<link rel= "stylesheet" href= "css/mainstylesheet.css" media= "screen"/>

CSS for printing:

Note that these two CSS are placed in a Web page.
Another way is import:

<style type= "Text/css" >    @import URL ("css/printstylesheet.css") print;</style>

The last way to do this is to write the screen display style and the print style directly in a CSS file:

{    h1 {      color: black;    } {color: gray;      }         }

@media print content is only valid for the printed content, and the content is the style of the screen display.

CSS implementation of screen display and printing results are not the same way