本文將教您開始為要打印的頁面編寫CSS所需要的一切提供幫助。
@media 規則
If you’ve done any responsive design, you’ll already know about the @media rule. As well as different screen sizes, @media also lets you target “print” media. Here’s an example:
如果你做過任何響應性的設計，你就已經知道 @media 規則了。除了不同的屏幕大小，@media還可以為你控制打印樣式。下面是一個例子：
@media print {/* 這些樣式僅在頁面打印或保存為PDF時使用。 */h1 { font-size: 16pt; }
}
使用此規則，您可以將標準的css指定為普通樣式，然后添加一些僅在打印時使用的自定義樣式。
p { margin: 1em 0; }@media print {/* 打印時隱藏相關文章鏈接 */.related-articles { display: none; }
}
如果你想將所有標準屏幕樣式“歸零”并從頭開始，你可以用另一個 @media 規則來包裝你的屏幕樣式：
@media screen { /* 此處為標準樣式。 */
} @media print { /* 在此處打印樣式。 */
}
分頁符屬性
為了確保內容在頁面之間流暢地流動，您需要控制內容在頁面之間分割的時間。例如，如果一個大標題出現在頁面底部，這看起來很尷尬——你希望它從一個新的頁面開始。類似地，如果可能，您可能希望避免一個表跨越多個頁面。
You can do this using page-break-before, page-break-after, and page-break-inside. You can set the value for these properties to always or avoid.
你可以使用page-break-before、page-break-after和page-break-inside來實現這一點。你可以將這些屬性的值設置為always或avoid。
h1 { /* h1元素始終從新頁面的頂部開始。 */ page-break-before: always;
} section.city-map { /* 此部分始終占據其自己的一個或多個頁面。 */ page-break-before: always; page-break-after: always;
} table { /* 如果可能，表不會跨頁拆分。 */ page-break-inside: avoid;
}
提示：重復表格標題
如果您的文檔包含跨越多頁的表格，則在打印時將很難閱讀，除非表格標題在每一頁的開頭重復。這很容易實現，只需使用表中的 thead 和 tbody 元素。
<table> <thead> <tr> <th>City</th> <th>Population</th> </thead> <tbody> <tr> <td>Sydney</td> <td>4.627 million (2018)</td> </tr> </tbody>
</table>
打印后，您的表格將如下所示：
提示：添加或刪除內容
Sometimes you might want to add content that’s only shown when printing. For example - you might want to link URLs to be printed. You can do this by using the :after pseudo-element:
有時，您可能希望添加僅在打印時顯示的內容。例如，您可能希望鏈接要打印的URL。您可以使用：:after 偽元素來完成此操作：
@media print { a[href]:after { content: " (" _attr_(href) ")"; }
}
您可能還希望僅在打印時隱藏或顯示某些元素。通過 @media 和 display 結合起來，這可以很容易地完成。
/* 隱藏屏幕水印。 */
.watermark { display: none;
} @media print { /* 打印時隱藏導航。 */ nav { display: hide; } /* 打印時顯示水印 */ .watermark { display: initial; }
}
提示：使用模擬css媒體進行開發
為了加快開發過程中的反饋循環，可以將瀏覽器設置為顯示打印樣式。要在Mac上的Chrome中實現這一點，請打開開發者工具，然后使用Command + shift + p快捷鍵運行命令，然后搜索“Emulate CSS print media type”。
其他瀏覽器的開發工具中也會有類似的功能。
遺憾的是，要查看分頁符，您每次都需要手動打印到PDF。
高級提示：孤行和寡行
orphans 和 widows 屬性控制元素中的文本跨頁面拆分的方式。有時，調整這些值可以提高打印文檔的可讀性。
p { /* 如果在換行符之前不少于3行，則將該元素移動到新頁的開頭。 */ orphans: 3;
}
在下面的左側，orphans被設置為2，因此第二段開始于分頁符之前。通過將orphans設置為3，就像右邊那樣，該段落被強制下移到下一頁的開始。
widow 屬性與 orphan 屬性相反——它指定了新頁面開始處可以包含的最少行數。
高級提示： @page規則
使用 @page 規則，您可以定制特定頁面的頁邊距。
@page:first { /* 首頁沒有頁邊距。 */ margin: 0;
} @page { /* 在所有其他頁面上設置頁邊距。 */ margin: 2cm;
}
不幸的是，瀏覽器對此的支持目前有點有限，您只能使用：:first, :last, :left, :right 和 :blank 偽選擇器來選擇頁面。
總結
您現在熟悉了Chrome、Firefox和Safari等現代瀏覽器支持的重要打印布局屬性。
遺憾的是，在現代瀏覽器中對更高級的打印布局功能的支持通常是有限的。例如，瀏覽器不提供使用CSS添加自定義頁眉或頁腳內容的標準方法。您可能希望查看 paged.js項目，該項目為瀏覽器當前缺少的許多打印布局功能提供了多個填充。?
