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