It is necessary to add a printing style to web pages, because the display characteristics of paper and screen are different, and printing directly is prone to problems such as typography disorders. 1. Use @media print to define a print-specific style, which can hide irrelevant elements, remove backgrounds and adjust fonts; 2. Display hyperlink addresses through pseudo-elements to improve readability; 3. Control paging and layout to avoid content breakage and set appropriate margins; 4. Use browser developer tools to simulate the printing environment for debugging, ensuring that the output is neat and easy to read.

Many people think it is unnecessary to add print styles to web pages, but it is not. The display of paper and screen is completely different. Printing web pages directly often leads to problems such as confusing layout, interference in background images, and link failure. Make good use of CSS Print Stylesheet to enable users to obtain clear and easy-to-read documents when printing, improving the experience.

1. Use @media print to control the print style

The core approach is to define style rules that only take effect when printing is performed through @media print . You can write it in the main style sheet or you can import a print.css file separately.

 @media print {
  body {
    font-size: 12pt;
    color: black;
    background: white;
  }
}

Common operations include:

• Hide unnecessary elements (such as navigation bar, sidebar, ad)
• Remove background color or image (the browser does not print the background by default, but explicit removal is more safe)
• Adjust font size and line spacing to suit paper reading habits

2. Remove the "naked address" of the hyperlink

Hyperlinks on web pages will become text without context when printed, which has poor user experience. The URL can be displayed through pseudo-elements.

 @media print {
  a::after {
    content: " (" attr(href) ")";
  }
}

In this way, <a href="https://example.com">示例鏈接</a> will print it out and it will be: "example link ( http://miracleart.cn/link/77dbda525242a07339101a7c6ac73495 .

3. Control page layout and pagination

The page structure when printing is different from the screen. Pay attention to controlling the paging position to avoid truncating or disassembling of the content.

 @media print {
  h2 {
    page-break-before: always; /* Each secondary title starts with a new page*/
  }

  .no-page-break {
    page-break-inside: avoid; /* Prevent the element from being interrupted by paging*/
  }
}

Common techniques include:

• Set up appropriate margin and padding so that the content is not pasted
• Standard size of A4 paper: width: 210mm; height: 297mm (but manual settings are generally not required)
• Avoid fixed-width layouts and try to use adaptive content widths

4. Test and debug printing styles

The printing style is invisible and intangible, so it is a bit troublesome to debug. Chrome Developer Tools provide a "print" simulation environment:

1. Open DevTools → Switch to the “Elements” tab
2. Click the three dots in the upper right corner → More Tools → Rendering
3. Select "print" in "Emulate CSS media type"

This allows you to preview the printing effect in real time, making it easier to adjust the style.

Basically that's it. Writing a print style is not complicated, but it is easy to ignore details. Just pay attention to hiding irrelevant elements, optimizing text display, processing links and paging, and you can make a clean and tidy printout.

The above is the detailed content of Creating effective CSS Print Stylesheets. For more information, please follow other related articles on the PHP Chinese website!