如何使用CSS创建特定于印刷的样式表？

使用CSS创建打印专用样式表能确保网页在屏幕和打印时都具有良好效果。首先通过@media print规则定义仅在打印时生效的样式，例如隐藏导航栏、页脚和侧边栏；其次可链接独立的打印样式表print.css，保持样式维护更清晰；最后优化可读性和简洁性，如移除背景颜色、使用衬线字体、显示链接URL，并调整布局以适应纸张特性。

When you want your webpage to look good both on screen and when printed, using CSS to create print-specific stylesheets is the way to go. The key idea is to define different styles that only apply when a page is being printed, helping you control layout, colors, fonts, and more in the printed version.

Use @media print to Target Print Output

The most common and effective method is using the @media print rule in your CSS. This tells the browser to apply those styles only when the page is sent to a printer (or saved as a PDF). For example:

@media print {
  nav, footer, .sidebar {
    display: none;
  }
}

This snippet hides navigation bars, footers, and sidebars from the printed version, which is often preferred for cleaner output.

You can also adjust font sizes, line heights, or margins inside this block to better suit paper formatting.

Link a Separate Print Stylesheet

Another approach is linking a dedicated print stylesheet using the HTML <link> tag with the media="print" attribute:

<link rel="stylesheet" href="print.css" media="print">

This keeps your print styles separate from screen styles, making maintenance easier — especially if your print styling gets complex. In that print.css file, you can focus entirely on how things should look on paper without worrying about screen rendering.

Optimize for Readability and Simplicity

Printed pages don’t support hover states or animations, so it’s best to simplify interactions and enhance readability:

• Remove background images and colors to save ink.
• Use serif fonts like Times New Roman for body text — they’re generally considered easier to read on paper.
• Adjust link appearance by showing URLs next to links:

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

This helps users know where links point since they can't click them in print.

Also, make sure elements stack vertically and avoid relying on fixed positioning, which behaves differently in print.

Creating print-friendly styles isn’t complicated, but it does require thinking beyond screen-based design. With a few targeted CSS rules and some thoughtful adjustments, your site can look great whether viewed online or on paper.

以上是如何使用CSS创建特定于印刷的样式表？的详细内容。更多信息请关注PHP中文网其他相关文章！