首頁 >web前端 >css教學 >如何使用CSS創建打印機友好的頁面

如何使用CSS創建打印機友好的頁面

William Shakespeare原創: 2025-02-08 10:27:09988瀏覽

如何使用CSS創建打印機友好的頁面

在本文中，我們回顧了使用CSS創建打印機友好網頁的藝術。

鑰匙要點

打印機友好的頁面的重要性：儘管存在數字時代，但仍需要對打印機友好的網頁。打印網頁對於各種目的都是必不可少的，例如打印旅行票，離線閱讀，並為那些難以使用屏幕的人提供可訪問的信息。本文強調了優化打印網頁以改善可訪問性和用戶體驗的必要性。
實用的技巧和技術：本文為創建有效的打印樣式提供了豐富的實用建議。關鍵建議包括刪除不必要的元素，使用適當的字體和尺寸進行線性化佈局，管理頁面中斷以及包括印刷版本的補充內容。這些技巧可幫助Web開發人員確保可以輕鬆有效地打印其網站，從而在維護Web內容的完整性的同時節省墨水和紙張。
為什麼我們需要CSS進行打印？

>打印旅行或音樂會門票

複製路線方向或時間表

保存副本以進行離線閱讀
>連接性差的區域中訪問信息
使用危險或骯髒條件下的數據 - 例如，廚房或工廠
的殘疾人提供文件
不幸的是，打印頁面可能是一個令人沮喪的經歷：
文本可能太小，太大或太微弱

列可能太狹窄，太寬或溢出頁面邊緣

部分可以完全裁剪或完全消失

墨水浪費在不必要的彩色背景和圖像上
>
許多開發人員主張網絡可訪問性，但很少有人記得讓印刷網絡訪問！

>將響應式，連續的媒體轉換為任何規模和方向的分類紙可能具有挑戰性。但是，CSS打印控制已有多年了，並且可以在數小時內完成基本樣式表。以下各節描述了使您的頁面友好型頁面的良好支持和實用的選擇。

>打印樣式表

打印CSS可以是：

。以您的屏幕樣式為基礎，打印機樣式可根據需要覆蓋這些默認值。
用作單獨的樣式。屏幕和打印樣式是完全分開的。兩者都從瀏覽器的默認樣式開始。

選擇取決於您的網站/應用。就個人而言，我在大多數情況下都使用屏幕樣式作為打印基礎。但是，我已經為具有根本不同輸出的應用程序使用了單獨的樣式表 - 例如會議預訂系統，該系統在屏幕上顯示時間表網格，但在紙上按時間順序排列。

標準樣式表之後，可以將打印樣式表添加到html ：

之後

<span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="main.css"</span> /></span>
</span><span><span><span><link</span> rel<span>="stylesheet"</span> media<span>="print"</span> href<span>="print.css"</span> /></span>
</span>

> print.css樣式將在打印頁面時應用於屏幕樣式。

要分開屏幕和打印媒體，main.css僅針對屏幕：>

或者，可以使用@Media規則將打印樣式包含在現有CSS文件中。例如：

<span><span><span><link</span> rel<span>="stylesheet"</span> media<span>="screen"</span> href<span>="main.css"</span> /></span>
</span><span><span><span><link</span> rel<span>="stylesheet"</span> media<span>="print"</span> href<span>="print.css"</span> /></span>
</span>

>可以添加任意數量的@Media打印規則，因此這對於將相關樣式保持在一起可能是實用的。屏幕和打印規則也可以在必要時分開：

<span>/* main.css */
</span><span>body {
</span>  <span>margin: 2em;
</span>  <span>color: #fff;
</span>  <span>background-color: #000;
</span><span>}
</span>
<span>/* override styles when printing */
</span><span><span>@media print</span> {
</span>
  <span>body {
</span>    <span>margin: 0;
</span>    <span>color: #000;
</span>    <span>background-color: #fff;
</span>  <span>}
</span>
<span>}
</span>

測試打印機輸出

<span>/* main.css */
</span>
<span>/* on-screen styles */
</span><span><span>@media screen</span> {
</span>
  <span>body {
</span>    <span>margin: 2em;
</span>    <span>color: #fff;
</span>    <span>background-color: #000;
</span>  <span>}
</span>
<span>}
</span>
<span>/* print styles */
</span><span><span>@media print</span> {
</span>
  <span>body {
</span>    <span>margin: 0;
</span>    <span>color: #000;
</span>    <span>background-color: #fff;
</span>  <span>}
</span>
<span>}
</span>

>每次您要測試打印佈局時，都不需要殺死樹木並使用非常昂貴的墨水！以下選項在屏幕上複製打印樣式。

>打印預覽

最可靠的選項是瀏覽器中的“打印預覽”選項。這顯示瞭如何使用默認紙張大小來處理頁面中斷。

> 或者，您可以通過導出到PDF來保存或預覽頁面。

。

>開發人員工具

devTools（

f12

或

> cmd/ctrl

shift i> i）可以模仿打印樣式，儘管頁面斷開不會是顯示。 在Chrome中，打開開發人員工具並選擇更多工具，然後從右上角的三點圖標菜單中渲染。更改模擬CSS介質以在該面板的底部打印。 >

在Firefox中，打開開發人員工具，然後單擊“ Inspector”選項卡的樣式窗格上的切換打印媒體仿真圖標：

hack your媒體屬性如何使用CSS創建打印機友好的頁面

>假定您正在使用標籤來加載打印機CSS，您可以將媒體屬性臨時更改為屏幕：

<span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="main.css"</span> /></span>
</span><span><span><span><link</span> rel<span>="stylesheet"</span> media<span>="print"</span> href<span>="print.css"</span> /></span>
</span>

>再次，這不會揭示頁面中斷。完成測試後，請不要忘記將屬性還原為媒體=“打印”。

>刪除不必要的部分

在做其他任何事情之前，請刪除和折疊冗餘內容，其中包括：無;。紙上典型的不必要的部分可能包括導航菜單，英雄圖像，標頭，頁腳，表格，側邊欄，社交媒體小部件和廣告塊（通常是iframe中的任何東西）：

<span><span><span><link</span> rel<span>="stylesheet"</span> media<span>="screen"</span> href<span>="main.css"</span> /></span>
</span><span><span><span><link</span> rel<span>="stylesheet"</span> media<span>="print"</span> href<span>="print.css"</span> /></span>
</span>

>可能有必要使用顯示：無！如果CSS或JavaScript功能根據特定的UI狀態顯示元素。通常不建議使用！很重要，但是我們可以證明其在一組基本的打印機樣式中使用，該樣式覆蓋了屏幕默認值。

>線性化佈局

這麼說，這讓我很痛苦，但是flexbox和網格很少在任何瀏覽器中使用打印機佈局很好地播放。如果遇到問題，請考慮使用Display：block;或在佈局框上類似，並根據需要調整尺寸。例如，設置寬度：100％；跨越整頁寬度。

打印機樣式

現在可以應用

>打印機友好的樣式。建議：

確保您在白色背景上使用深文本

考慮使用襯線字體，該字體可能更易於閱讀
>將文本大小調整為12pt或更高必要時修改槳板和邊距。標準CM，MM或單位可能更實用。

標準A4和美國字母紙可能會導致更長且較不可讀的文本行。考慮在打印佈局中使用CSS列。例如：

在此示例中，當至少有37EM的水平空間時，將創建列。無需設置媒體查詢；其他列將添加到更寬的紙張中。

使用邊界代替背景顏色

<span>/* main.css */
</span><span>body {
</span>  <span>margin: 2em;
</span>  <span>color: #fff;
</span>  <span>background-color: #000;
</span><span>}
</span>
<span>/* override styles when printing */
</span><span><span>@media print</span> {
</span>
  <span>body {
</span>    <span>margin: 0;
</span>    <span>color: #000;
</span>    <span>background-color: #fff;
</span>  <span>}
</span>
<span>}
</span>

您的模板可能具有深色或逆配色方案表示的部分或呼叫框：

>通過用邊框表示這些元素來保存墨水：

如何使用CSS創建打印機友好的頁面

>刪除或反轉圖像

> 如何使用CSS創建打印機友好的頁面 >用戶不想打印裝飾性和非必要圖像和背景。您可以考慮一個默認值，除非所有圖像都隱藏了所有圖像，否

理想情況下，印刷圖像應在光背景上使用深色。可能會在CSS中更改HTML插入的SVG顏色，但是在某些情況下，您的位圖更暗：

<span>/* main.css */
</span>
<span>/* on-screen styles */
</span><span><span>@media screen</span> {
</span>
  <span>body {
</span>    <span>margin: 2em;
</span>    <span>color: #fff;
</span>    <span>background-color: #000;
</span>  <span>}
</span>
<span>}
</span>
<span>/* print styles */
</span><span><span>@media print</span> {
</span>
  <span>body {
</span>    <span>margin: 0;
</span>    <span>color: #000;
</span>    <span>background-color: #fff;
</span>  <span>}
</span>
<span>}
</span>

> CSS過濾器可用於在打印樣式表中反轉和調整顏色。例如：

結果：如何使用CSS創建打印機友好的頁面

如何使用CSS創建打印機友好的頁面

添加補充內容

>印刷媒體通常需要在屏幕上不需要的其他信息。 CSS內容屬性可用於將文本附加到::之前和偽元素之後。例如，在文本之後在括號中顯示鏈接的URL：

<span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="main.css"</span> /></span>
</span><span><span><span><link</span> rel<span>="stylesheet"</span> media<span>="print"</span> href<span>="print.css"</span> /></span>
</span>

或您可以添加僅印刷消息：

<span><span><span><link</span> rel<span>="stylesheet"</span> media<span>="screen"</span> href<span>="main.css"</span> /></span>
</span><span><span><span><link</span> rel<span>="stylesheet"</span> media<span>="print"</span> href<span>="print.css"</span> /></span>
</span>

對於更複雜的情況，請考慮在元素上使用諸如打印等類，僅在打印時才能可見。例如：

<span>/* main.css */
</span><span>body {
</span>  <span>margin: 2em;
</span>  <span>color: #fff;
</span>  <span>background-color: #000;
</span><span>}
</span>
<span>/* override styles when printing */
</span><span><span>@media print</span> {
</span>
  <span>body {
</span>    <span>margin: 0;
</span>    <span>color: #000;
</span>    <span>background-color: #fff;
</span>  <span>}
</span>
<span>}
</span>

CSS：

<span>/* main.css */
</span>
<span>/* on-screen styles */
</span><span><span>@media screen</span> {
</span>
  <span>body {
</span>    <span>margin: 2em;
</span>    <span>color: #fff;
</span>    <span>background-color: #000;
</span>  <span>}
</span>
<span>}
</span>
<span>/* print styles */
</span><span><span>@media print</span> {
</span>
  <span>body {
</span>    <span>margin: 0;
</span>    <span>color: #000;
</span>    <span>background-color: #fff;
</span>  <span>}
</span>
<span>}
</span>

注意：大多數瀏覽器在打印頁面的標題和/或頁腳上顯示URL和當前日期/時間，因此很少需要以代碼生成此信息。 頁面斷裂

> css3屬性在元素之前和之後的頁面，列或區域的表現如何在元素之前和之後進行表現。支持非常好，但是較舊的瀏覽器可能會使用類似的頁面斷點 - 拆分和頁面破壞屬性。

可以使用以下分類值和分類值：

auto：默認值 - 允許休息，但不強制

避免：避免在頁面，列或區域

避免頁面：避免頁面斷開
頁：強制頁面斷開
總是：頁面的別名
左：強制頁面斷開，所以下一個是左頁
右：強制頁面斷開，所以下一個是右頁

標題之前，都會迫使頁面斷開：>

>

注意：要警惕過度使用頁面斷裂。理想情況下，打印機輸出應使用盡可能少的頁面。

> Break-inside（和較舊的頁面斷路內）屬性指定是否允許在元素內進行頁面斷路。通常支持的值：

<span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="main.css"</span> /></span>
</span><span><span><span><link</span> rel<span>="stylesheet"</span> media<span>="screen"</span> href<span>="print.css"</span> /></span>
</span>

auto：默認值 - 允許休息，但不強制避免：避免在可能的情況下

避免頁：避免在可能的情況下避免內部頁面斷開

寡婦屬性指定必須在頁面頂部顯示的塊中的最小行數。想像一個帶有五行文本的塊。瀏覽器希望在第四行之後進行頁面斷開，因此最後一行出現在下一頁的頂部。設置寡婦：3;在第二行上或之前斷裂，因此至少三行搬到了下一頁。

孤兒特性類似於寡婦，除了它控制著頁面底部顯示的最小行數。

slice：默認值，分解佈局。頂部邊框顯示在第一頁上，底部邊框顯示在第二頁上。
克隆：複製邊距，填充和邊框。所有四個邊界都顯示在兩個頁面上。

>最後，CSS分類媒體（@page）的瀏覽器支持有限，但提供了針對特定頁面的方法，因此可以定義替代的邊距或斷點：>

<span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="main.css"</span> /></span>
</span><span><span><span><link</span> rel<span>="stylesheet"</span> media<span>="print"</span> href<span>="print.css"</span> /></span>
</span>

> CSS頁面斷路屬性可以放置在您的屏幕或打印樣式中，因為它們僅影響打印，但我建議在Print CSS中使用它們，以清晰地進行。

請注意，頁面斷開控制僅僅是瀏覽器的建議。不能保證會被迫或避免休息，因為佈局僅限於紙張的範圍。

>印刷疼痛

控制Web媒體的控制始終將受到限制，並且結果可能會在瀏覽器之間變化。也就是說：

>打印機友好的樣式床單可以恢復到任何站點

中使用
添加一些頁面中斷並刪除不必要的部分將使用戶滿意並將您的網站提高到競爭對手之上。

對於更高級的CSS知識，請閱讀我們的書

css Master，第三版。關於使用CSS

創建打印機友好的頁面的常見問題解答

>創建CSS打印樣式表對於在打印網頁時控製網頁的外觀很重要。結束我們的結尾，介紹一些有關如何使用CSS創建打印機友好的頁面的常見問題。 > 什麼是打印的CSS？

>可以直接從瀏覽器打印網頁，但是打印的網頁通常看起來不像您在屏幕上看到的頁面。網頁具有CSS樣式，並且CSS也可以用於為印刷頁面提供樣式。但是，網頁樣式通常不會很好地打印，因此，專門為印刷頁面編寫CSS樣式很重要。 CSS打印是一組專門設計的，旨在幫助打印機格式化印刷頁面的佈局。

我如何使用CSS進行打印？

>網頁CSS將自動應用於網頁的印刷版本，但通常會帶有意外或不需要的結果。與更靈活的瀏覽器環境相比，For Print的CSS識別印刷頁面的獨特約束。打印樣式的設置涉及思考元素如何最好地在印刷頁面上佈置。這可能包括與打印無關的隱藏元素，例如菜單之類的造型鏈接，以使URL在打印頁面上可見的方式，並刪除與印刷的背景圖像和字體顏色，這些圖像和字體顏色可能與印刷網頁的版本。

我如何設置CSS打印樣式表？

>有兩種基本方法可以在CSS中提供打印樣式：通過單獨的樣式表或通過媒體查詢。 CSS打印樣式可以存儲在文檔的

部分中鏈接到網頁的單獨樣式表中：

> CSS打印樣式可以通過媒體查詢放置在樣式表中，以及其他媒體的樣式：

@media print {
/ *在此處* / *打印樣式* /
}

打印樣式表有哪些常見用例？

>用於打印樣式表的常見用例包括：
- 調整字體尺寸和样式以在紙上可讀性。
- 刪除或隱藏打印時與某些元素無關的元素（例如導航菜單）。 - 確保圖像和背景顏色默認不打印。
- 指定頁面斷路以控制內容如何在頁面上劃分。

>如何在打印版本中隱藏特定元素？

>

>您可以通過將顯示屬性設置為無。例如：

@media print { .hide-on-in-print {顯示：無;
}
}

>如何指定“打印樣式”中的頁面中斷？

>您可以使用Page-Break-be-Befer-Break-break-ter-ter-perter-CSS屬性指定頁面斷路。例如：

@media print {
.page-break {
page-break-before：始終;
}
}
}
>我可以更改打印文檔的頁面餘量嗎？

是的，您可以使用打印樣式表中的@page規則更改打印文檔的頁面餘量。例如：

@page {
margin：1cm;
}

我如何確保圖像和背景顏色不打印？

>您可以通過使用CSS屬性（如背景圖像和背景色）來防止圖像和背景顏色在打印樣式表中沒有值。例如：

@media print {
img {
display：none;
}

body { background-color：white ;
}
}

是否可以更改字體樣式和尺寸以打印？

>

是的，您可以通過指定打印樣式表中的不同樣式來更改字體樣式和尺寸，以打印。例如：

@media print {
{
font-size：12pt;
font-family：arial，sans-serif;
}
}
}

}

在打印之前如何測試我的打印樣式表？

>您可以使用Web瀏覽器的打印預覽功能來測試打印樣式表。大多數現代瀏覽器都可以讓您查看頁面印刷時的外觀，而無需實際打印。

以上是如何使用CSS創建打印機友好的頁面的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：如何為您的網站創建CSS打字機效應下一篇：如何為您的網站創建CSS打字機效應

看更多

如何使用CSS創建打印機友好的頁面

鑰匙要點

>打印樣式表

> 或者，您可以通過導出到PDF來保存或預覽頁面。

或

<span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="main.css"</span> /></span> </span><span><span><span><link</span> rel<span>="stylesheet"</span> media<span>="print"</span> href<span>="print.css"</span> /></span> </span>

>刪除不必要的部分

這麼說，這讓我很痛苦，但是flexbox和網格很少在任何瀏覽器中使用打印機佈局很好地播放。如果遇到問題，請考慮使用Display：block;或在佈局框上類似，並根據需要調整尺寸。例如，設置寬度：100％；跨越整頁寬度。

>打印機友好的樣式。建議：

添加補充內容

標題之前，都會迫使頁面斷開：> >

我如何設置CSS打印樣式表？

打印樣式表有哪些常見用例？

>

>您可以使用Page-Break-be-Befer-Break-break-ter-ter-perter-CSS屬性指定頁面斷路。例如：

是的，您可以使用打印樣式表中的@page規則更改打印文檔的頁面餘量。例如：

>您可以通過使用CSS屬性（如背景圖像和背景色）來防止圖像和背景顏色在打印樣式表中沒有值。例如：

>

相關文章

標題之前，都會迫使頁面斷開：>

>