How to write a print style with CSS

Print style

The print style is the style that is set to the document when the page is printed, because it is printed on paper, and it is different from the screen, and for pages with printing needs, it is often necessary to set a special print style to fit the page.

@media Print

There are two ways to declare yourself as a print style: You can use @media print in a CSS file to write the Media=print attribute in the Style tab of the HTML file:

<style media="print">...</style>

When writing a page with print requirements, it is best to split the CSS into two categories, one is @media screen, the other is @media print, if there are two media-universal CSS, when setting the print style, because the universal style of cascading, can cause the style to fail, This is required !important to ensure that the browser uses the following print style, for example:

nav.nav{    color:red;    display:block;}@mediaprint{    .nav{       display:none!important;   }}

When removed from the above example, because of the higher weight of the !important universal CSS nav.nav , the styles in print will not be valid for viewing the effect. So, or completely separate the screen and print styles. Or when the print style is invalid, use!important.
2

@page

@page can control the margin size of the printed page, just like in Word:

  {    margin:1cm;  }

-webkit-print-color-adjust

-webkit-print-color-adjust is a CSS property that forces the print background color and font color in the browser, and when the background color of some of the printed elements is not displayed, you can use-webkit-print-color-adjust:exact

Bootstrap support for print styles

Referring to the print class of the BOOTCSS Web site, bootstrap mainly provides several classes for the print style, allowing us to show or hide some elements when the page is printed:

class	Browser	Printer
.visible-print-block .visible-print-inline .visible-print-inline-block	Hide	Visible
.hidden-print	Visible	Hide

How to write a print style with CSS