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