如何使用 CSS 為您的網站設置樣式以進行打印

已發表: 2015-08-28

印刷與網絡有什麼關係？

我們大多數人都生活在網上，從網絡上獲取我們所有的信息。 我們每天都通過許多設備保持聯繫。 你可能聽說過印刷品已經死了，事實上，這肯定不是真的！ 我們可能不像以前那樣頻繁地打印，但在某些情況下，在設備上查看內容並不能替代查看硬打印副本。 您是否有有價值的操作指南內容、可兌換的優惠券、說明、投資組合示例或用戶希望在印刷版中看到的任何其他內容？ 如果是這樣，在您的網站上設置自定義打印規則肯定會幫助您塑造用戶體驗。

辦公打印機

如何設計印刷品

通過定義特定於打印的樣式，所有的魔法都包含在 CSS 中。 您可能會發現創建一個單獨的print.css樣式表很有幫助，這樣它就可以與您的所有其他樣式分開。 請記住，並非所有網站都有打印樣式表； 這是開發過程中的附加功能和步驟。 如果未指定打印樣式，則使用默認樣式進行打印。 我們將定義樣式以提高打印效率，這將覆蓋任何默認值。

請記住：您永遠不應該在實時站點上進行更改。 我們免費的本地開發應用程序 Local 將幫助您簡化工作流程並安全地試驗您的網站。 今天就試試吧！

命名約定和特定樣式對於您自己項目的樣式表將是唯一的，但這些概念將適用。 添加基礎知識後，瀏覽您網站的默認樣式表，尋找需要打印樣式的任何獨特情況，以確保獲得最佳打印體驗。

顏色和佈局注意事項

由於彩色墨水的費用，大多數人更喜歡黑白打印。 此外，當文本為黑色並打印在白紙上時，對比度更高。 您可能熟悉媒體查詢，因為它們在現代響應式網頁設計中至關重要。 媒體查詢也是創建打印樣式所必需的。

這將使正文中的文本變為黑色，並擺脫任何背景顏色以獲得最佳打印效果：

@media print {
body {
color: #000;
background: #fff;
}
}




很有可能，文本將以 Times New Roman 格式打印出來。 這沒有什麼問題，但如果你想指定不同的字體怎麼辦？ 就像您在默認樣式中所做的一樣，這也可以在打印中完成。 當我們這樣做時，我們不要忘記行高。
		




body {
font: 13pt Tahoma, Geneva, sans-serif;
line-height: 1.5;
}




隱藏不必要的元素


您可能已經習慣於保持display: none到最低限度，但這對於您的打印樣式來說是完全可以的。 通過隱藏某些元素，您可以為用戶提供更好的打印方式，並保留硬拷貝中不必要的任何內容。 目標是讓他們有效地打印出最重要的內容，而不是確切的網頁。


有些頁面元素不是必需的，例如導航、頁腳、側邊欄和背景圖像，所以這就是我們的display: none派上用場。


@media print {
nav, aside, footer {
display: none;
}

section {
background: none
}
/* section had a patterned background in the default styling which is best removed in the print style */
}




文章經常被打印出來，所以讓每篇文章從單獨的頁面開始是很棒的。 如果關鍵信息被組合在一起而不是分佈在多個頁面上，那麼用戶可以更容易地組織他們的打印輸出。
		




通過將此添加到您的打印樣式表中，文章將始終從新頁面開始：


article {
page-break-before: always;
}




將無序列表放在同一頁面上也是一個好主意：


ul {
page-break-inside: avoid;
}




讓我們更進一步，對標題、圖像、塊引用、表格和其他列表元素做同樣的事情：


h1, h2, h3, h4, h5, h6 {
page-break-after:avoid;
page-break-inside:avoid
}

img {
page-break-inside:avoid;
page-break-after:avoid;
}

blockquote, table, pre {
page-break-inside:avoid
}

ul, ol, dl {
page-break-before:avoid
}

[/code]

</pre>
<img class="aligncenter wp-image-12547 size-full" src="https://getflywheel.com/wp-content/uploads/2015/08/print-styling-03.jpg" alt="print-styling-03" width="1022" height="480" />
<pre>
<h3>Page margin measurements</h3>

We will be adding a width of 100% to the body and article and getting rid of any unnecessary margins or padding. That way we can strip out any unnecessary spacing.



body, article {
width: 100%;
margin: 0;
padding: 0;
}




在這裡，間距可以真正為打印輸出進行微調。 您在網頁設計中看到厘米並不常見，但它非常適合確定頁面上的邊框。 @page規則是我們將如何定位間距。 此示例將允許所有邊框周圍留出 2 厘米。 可以自定義此測量以允許更多或更少的空間。 例如，您的用戶可能想要做筆記並允許更大的邊距會有所幫助。
		




@page {
margin: 2cm;
}




如果要打印頁面並將其放入活頁夾中，請記住，可以選擇調整每隔一頁的頁邊距。 左頁是第 1、3、5... 頁，右頁是第 2、4、6... 頁


@page :left {
margin: 1cm 3cm 1cm 2cm;
}

@page :right {
margin: 1cm 2cm 2cm 3cm;
}




在某些情況下，首頁定制會派上用場。 通過使用:first page 偽類，可以確定第一個打印頁面的樣式：


@page :first {
margin: 1cm 2cm;
}




打印樣式-02


打印會讓你感到壓力嗎？ 這裡有一些提示，可以像專業人士一樣打印您的項目。
		




圖片和介紹文字的想法


這些可能適用於您的網站，也可能不適用於您的網站，但仍然需要注意。


為防止圖像被切斷並溢出打印頁面的邊緣，添加最大寬度聲明將防止這種情況發生。


img {
max-width: 100% !important;
}




一個很好的歡迎信息是一個很好的補充。 打印內容將存在一段時間，因此包含友好的消息或提醒總是很好的。


header:before {
display: block;
content: "Thank you for visiting my website at www.mysite.com.   Please check back for upcoming specials and new products.";
margin-bottom: 15px;
padding: 5px 8px;
font-style: italic;
}




現在我們已經介紹了一些打印注意事項的基礎知識，很容易將這些想法合併到您的打印樣式表中。 儘管我們在使用網絡時最終考慮的不是印刷品，但它是一種很好的方式，可以為您的用戶提供同樣出色的體驗，無論他們如何訪問內容。