How to write a print style with CSS

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.