CSS 打印样式：分页控制与颜色打印强制
大家好，今天我们来深入探讨 CSS 在打印样式中的应用，重点聚焦于分页控制 break-after 属性以及颜色打印的强制实现。在网页开发中，我们往往专注于屏幕上的视觉呈现，但打印输出同样重要，尤其是在需要将网页内容转化为纸质文档时。糟糕的打印样式会导致信息丢失、排版混乱，影响用户体验。
1. 打印样式表的重要性
默认情况下，浏览器会尝试将网页内容适配到纸张上进行打印。然而，这种默认行为通常无法满足我们的需求，例如：
- 内容被截断在页面中间
- 重要的表格被分页分割
- 不必要的导航栏和广告也被打印出来
- 网页颜色在黑白打印机上显示效果不佳
因此，我们需要使用 CSS 打印样式表来定制打印输出，确保打印内容清晰、完整、易读。
1.1 如何定义打印样式表
定义打印样式表主要有两种方式：
-
外部样式表： 创建一个独立的 CSS 文件，并使用
<link>标签的media="print"属性将其链接到 HTML 文档。<link rel="stylesheet" href="print.css" media="print"> -
内部样式表： 在 HTML 文档的
<style>标签中使用@media print规则来定义打印样式。<style> @media print { /* 打印样式规则 */ } </style>
推荐使用外部样式表，因为它能够将打印样式与屏幕样式分离，使代码更具可维护性。
1.2 隐藏屏幕元素
在打印时，我们通常需要隐藏一些在屏幕上显示但打印时不需要的元素，例如导航栏、侧边栏、广告等。可以使用 display: none; 或 visibility: hidden; 属性来实现。
@media print {
nav,
aside,
.ad {
display: none;
}
}2. break-after 属性：精细的分页控制
break-after 属性用于控制元素之后的分页行为。它指定在元素之后是否应该插入分页符，以及插入何种类型的分页符。
2.1 break-after 属性的取值
break-after 属性有以下常用的取值：
| 值 | 描述 |
|---|---|
auto |
浏览器自动决定是否插入分页符。这是默认值。 |
avoid |
避免在元素之后插入分页符。如果可能，浏览器会将该元素整体移动到下一页，以避免分页。 |
always |
始终在元素之后插入分页符。 |
page |
与 always 相同，始终在元素之后插入分页符。 |
left |
插入分页符，使下一页成为左页（仅在双面打印时有效）。 |
right |
插入分页符，使下一页成为右页（仅在双面打印时有效）。 |
recto |
与 right 相同。 |
verso |
与 left 相同。 |
column |
在多列布局中，强制在元素之后插入列分隔符。 |
avoid-page |
避免在元素之后插入分页符。与 avoid 类似，但优先级更高。 |
avoid-column |
在多列布局中，避免在元素之后插入列分隔符。 |
2.2 使用 break-after 控制标题分页
一个常见的场景是避免标题与其后面的内容被分页分割。我们可以使用 break-after: avoid; 属性来解决这个问题。
@media print {
h1,
h2,
h3,
h4,
h5,
h6 {
break-after: avoid;
}
}这段代码会尽量将标题与其后面的内容放在同一页上，避免在标题之后插入分页符。
2.3 使用 break-after 控制表格分页
对于大型表格，我们可能希望避免表格被分页分割，或者希望在每个表格之后都插入分页符。
-
避免表格分页：
@media print { table { break-inside: avoid; /* 避免表格内部被分页 */ break-after: avoid; /* 避免表格之后立即分页 */ } }break-inside: avoid;属性用于避免元素内部被分页。 -
在每个表格之后插入分页符：
@media print { table { break-after: always; } }
2.4 使用 break-after 控制章节分页
有时，我们希望每个章节都从新的一页开始。可以使用 break-after: page; 属性来实现。
<div class="chapter">
<h1>Chapter 1: Introduction</h1>
<p>...</p>
</div>
<div class="chapter">
<h1>Chapter 2: Background</h1>
<p>...</p>
</div>
<div class="chapter">
<h1>Chapter 3: Methodology</h1>
<p>...</p>
</div>@media print {
.chapter {
break-after: page;
}
}这段代码会将每个章节都放在单独的一页上。
2.5 break-before 和 break-inside
除了 break-after，CSS 还有 break-before 和 break-inside 属性，用于控制元素之前和内部的分页行为。它们的取值与 break-after 类似。
break-before: 控制元素之前的分页行为。break-inside: 控制元素内部的分页行为。
例如，要确保某个元素始终从新的一页开始，可以使用 break-before: page;。 要避免某个元素内部被分页，可以使用 break-inside: avoid;。
3. 颜色打印强制
默认情况下，浏览器会根据打印机的设置来决定是否打印颜色。如果打印机是黑白的，浏览器通常会将颜色转换为灰度。但有时，我们希望强制浏览器打印颜色，即使打印机是黑白的。
3.1 使用 print-color-adjust 属性
print-color-adjust 属性用于控制浏览器如何调整颜色以适应打印输出。
@media print {
body {
-webkit-print-color-adjust: exact; /* Chrome, Safari */
print-color-adjust: exact; /* Firefox, Edge */
}
}print-color-adjust: exact; 会告诉浏览器尽可能地保留颜色，即使这意味着在黑白打印机上输出的结果可能不如预期。
注意：
print-color-adjust属性并不是所有浏览器都支持。- 即使使用了
print-color-adjust: exact;，最终的打印效果仍然取决于打印机的性能和设置。 - 强制颜色打印可能会导致黑白打印机的输出效果不佳，例如颜色对比度降低，文字难以辨认。
3.2 使用 CSS 颜色模型
另一种方法是使用 CSS 颜色模型，例如 rgba() 和 hsla()，并设置适当的 alpha 值。这可以帮助在黑白打印机上获得更好的灰度效果。
@media print {
.colored-text {
color: rgba(0, 0, 0, 0.8); /* 黑色，80% 不透明度 */
}
}这段代码会将文本颜色设置为黑色，但只有 80% 的不透明度。在黑白打印机上，这会呈现为灰色。
3.3 针对不同打印机使用不同的样式
如果你的网站需要同时支持彩色打印机和黑白打印机，你可以使用 CSS 媒体查询来针对不同的打印机应用不同的样式。
@media print and (color) {
/* 彩色打印机样式 */
.colored-text {
color: blue;
}
}
@media print and (monochrome) {
/* 黑白打印机样式 */
.colored-text {
color: black;
}
}@media print and (color) 媒体查询只会在彩色打印机上生效，而 @media print and (monochrome) 媒体查询只会在黑白打印机上生效。
4. 其他打印样式技巧
除了分页控制和颜色打印强制之外，还有一些其他的打印样式技巧可以帮助你改善打印输出的效果。
-
设置纸张大小和方向： 使用
@page规则来设置纸张大小和方向。@page { size: A4; /* 设置纸张大小为 A4 */ margin: 2cm; /* 设置页边距 */ } @page :left { margin-right: 3cm; /* 左页的右边距 */ } @page :right { margin-left: 3cm; /* 右页的左边距 */ } @page { size: landscape; /* 设置纸张方向为横向 */ } -
显示 URL： 在打印时，显示链接的 URL 可以帮助用户了解链接的来源。
@media print { a[href]:after { content: " (" attr(href) ")"; } } -
使用
counter生成页码： 使用 CSScounter属性来生成页码。@page { @bottom-right { content: "Page " counter(page) " of " counter(pages); } } -
优化字体： 选择适合打印的字体，例如 Times New Roman 或 Arial。避免使用过于花哨的字体，以免影响打印效果。
-
调整图像质量： 降低图像质量可以减少打印时间和墨水消耗。
-
避免使用背景颜色： 背景颜色在打印时通常会消耗大量的墨水，并且可能会影响文字的清晰度。
-
使用简洁的布局： 复杂的布局在打印时可能会出现问题。尽量使用简洁的布局，以确保打印输出的效果良好。
5. 一个完整的例子
以下是一个完整的例子，展示了如何使用 CSS 打印样式表来定制打印输出。
<!DOCTYPE html>
<html>
<head>
<title>Print Styles Example</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="print.css" media="print">
</head>
<body>
<header>
<h1>My Website</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>Article Title</h2>
<p>This is the content of the article.</p>
<h3>Section 1</h3>
<p>This is the content of section 1.</p>
<h3>Section 2</h3>
<p>This is the content of section 2.</p>
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr>
</tbody>
</table>
</article>
<aside>
<h3>Sidebar</h3>
<p>This is the content of the sidebar.</p>
</aside>
</main>
<footer>
<p>© 2023 My Website</p>
</footer>
</body>
</html>/* style.css */
body {
font-family: sans-serif;
margin: 0;
}
header,
footer {
background-color: #eee;
padding: 1em;
text-align: center;
}
main {
display: flex;
padding: 1em;
}
article {
flex: 3;
}
aside {
flex: 1;
background-color: #f9f9f9;
padding: 1em;
}
nav ul {
list-style: none;
padding: 0;
margin: 0;
}
nav li {
display: inline-block;
margin-right: 1em;
}/* print.css */
@media print {
body {
font-size: 12pt;
}
header,
nav,
aside,
footer {
display: none;
}
h2,
h3 {
break-after: avoid;
}
table {
break-inside: avoid;
}
a[href]:after {
content: " (" attr(href) ")";
}
@page {
size: A4;
margin: 2cm;
@bottom-right {
content: "Page " counter(page) " of " counter(pages);
}
}
}在这个例子中，我们定义了一个屏幕样式表 (style.css) 和一个打印样式表 (print.css)。打印样式表隐藏了导航栏、侧边栏和页脚，避免了标题和表格被分页分割，显示了链接的 URL，并设置了纸张大小和页码。
总结
今天我们讨论了 CSS 打印样式表的重要性，以及如何使用 break-after 属性进行精细的分页控制，同时探讨了颜色打印的强制方法。通过合理使用这些技术，我们可以确保网页内容在打印时清晰、完整、易读。 优化打印样式可以显著提升用户体验，并确保关键信息在纸质文档中得到有效呈现。
更多IT精英技术系列讲座，到智猿学院