CSS 打印：初学者的全面指南

你好，未来的 CSS 大师们！今天，我们将深入探索 CSS 打印的迷人世界。作为你友好的计算机老师邻居，我很兴奋能带你们踏上这段旅程。不用担心你之前从未写过一行代码——我们将从最基础的内容开始，逐步学习。那么，来一杯咖啡（或者茶，如果你喜欢的话），让我们开始吧！

CSS - Printing

CSS 打印 - 使用打印样式表

你是否尝试过打印一个网页，结果发现打印出来的内容和屏幕上看到的大不相同？这就是打印样式表的用武之地！它们就像神奇的咒语，将你的网页内容转化为打印机友好的格式。

让我们从一个简单的例子开始：

<head>
<link rel="stylesheet" type="text/css" href="screen.css" media="screen">
<link rel="stylesheet" type="text/css" href="print.css" media="print">
</head>

在这个片段中，我们告诉浏览器为屏幕和打印使用不同的样式表。media 属性是我们的秘密武器。当你在屏幕上查看页面时，它使用 screen.css。但当你点击打印按钮时，砰！print.css 接管一切。

CSS 打印 - 使用媒体查询和 @page 规则

现在，让我们通过媒体查询和 @page 规则来升级我们的游戏。它们就像是 CSS 打印的动态二人组！

@media print {
body {
font-size: 12pt;
color: #000;
background-color: #fff;
}

@page {
margin: 1in;
}
}

这段代码表示：“浏览器，当你打印时，让文本为 12 磅，黑白颜色，并且四周有 1 英寸的边距。”@media print 部分是我们的媒体查询，而 @page 设置了我们的页面布局。

CSS 打印 - 打印请求检测

如果你的网页能够知道有人正在尝试打印它，那不是很好吗？它可以做到！下面是如何实现：

window.addEventListener('beforeprint', function() {
console.log('正在打印...');
});

window.addEventListener('afterprint', function() {
console.log('打印完成');
});

这段 JavaScript 代码就像是一个小小的间谍，在我们打印开始和结束时向我们耳语。这对于做最后的调整非常方便！

CSS 打印 - 使用 @page 规则

@page 规则就像是控制打印页面的魔法棒。让我们看看它的作用：

@page {
size: A4;
margin: 0;
}

@page :first {
margin-top: 2cm;
}

在这里，我们将所有页面设置为 A4 大小且没有边距，但给第一页一个特别的 2 厘米顶部边距。就像是给你的内容铺设红地毯！

CSS 打印 - 使用 @media 查询

我们之前见过 @media，但让我们深入了解一下：

@media print {
.no-print {
display: none;
}

a[href^="http"]:after {
content: " (" attr(href) ")";
}
}

这段代码隐藏了具有 no-print 类的元素，并且在外部链接后面添加了 URL。就像是有一个私人助理在打印前整理你的网页！

CSS 打印 - 使用 afterprint 事件

记得我们之前的小 JavaScript 间谍吗？让我们让它发挥作用：

window.addEventListener('afterprint', function() {
document.body.style.backgroundColor = 'lightblue';
alert('希望你喜欢你的打印输出！');
});

这段代码在打印后改变背景颜色，并显示一个友好的消息。就像是给你的用户留下一个小小的感谢信！

CSS 打印 - 链接到外部样式表

最后但同样重要的是，让我们回顾一下如何链接到外部打印样式表：

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

这行代码是通往打印机友好网页的黄金门票。只需创建一个名为 print.css 的文件，添加你的打印样式，你就可以开始了！

方法	描述	示例
打印样式表	为打印媒体准备的单独 CSS 文件	`<link rel="stylesheet" type="text/css" href="print.css" media="print">`
媒体查询	仅在打印时应用的 CSS 规则	`@media print { body { font-size: 12pt; } }`
@page 规则	控制页面特定的属性	`@page { margin: 1in; }`
打印请求检测	JavaScript 检测打印尝试	`window.addEventListener('beforeprint', function() { ... });`
afterprint 事件	JavaScript 在打印后运行代码	`window.addEventListener('afterprint', function() { ... });`

就这样，朋友们！你已经迈入了 CSS 打印的世界。记住，熟能生巧，所以不要害怕尝试。谁知道呢？你可能会成为打印样式表的毕加索！下次见，快乐编码！

Credits: Image by storyset