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