您之前已經(jīng)看過它：您設(shè)計了一個漂亮的布局，有人打開打印，然后在艱苦的工作地點畏縮地走進您的辦公室，這被打印機犯了很多。 網(wǎng)頁設(shè)計的印刷版本很少是您期望的。他們需要進行一些額外的調(diào)整和一些舞臺。但是，了解如何設(shè)置打印視圖，以便一旦您掌握了它的內(nèi)容，內(nèi)容就不會太困難。 在本文中，我將向您展示如何設(shè)置樣式表，以便在網(wǎng)站上打印您的內(nèi)容。我將使用WordPress網(wǎng)站作為起點，因為它是一個受歡迎的框架，但是只要您應(yīng)用相同的原理，它將適用于任何網(wǎng)站。

>快速注意：沒有簡單的方法使網(wǎng)絡(luò)打印完美。您必須跳入那里，并通過要量身定制的每個元素進行工作。我首先進入頁面并打印它以查看我的開始。然后，我按照我需要的東西和需要更改的內(nèi)容來打破每個元素或結(jié)構(gòu)性部分。這需要時間，但值得。 您需要打印版本嗎？

> 在建立網(wǎng)站的印刷版本之前，我要問自己的第一件事是我是否需要一個。我中的細致設(shè)計師傾向于開始，在大多數(shù)情況下，我傾向于“是”。但是，通常不需要打印樣式表，具體取決于您網(wǎng)站的性質(zhì)和目的。 另外，當人們在您的網(wǎng)站上打印一頁時，他們的目標是什么？通常，他們只是想要您的內(nèi)容，僅此而已 - 他們不想要所有圖形，漂亮的布局，標題，側(cè)邊欄等。 （而且，他們可能不想在不必要的元素上使用昂貴的墨水。）因此，考慮實際需要的東西。

打印注意事項

我總是將文本轉(zhuǎn)換為黑色，以便打印機了解不需要陰影（這是一個大型墨水）。我也從像素的字體大小轉(zhuǎn)換為點。如果您要匹配字體尺寸，這可能是一個挑戰(zhàn)，但這是一個光滑的圖表，可以幫助您快速從

> px

轉(zhuǎn)換為> pt> pt>假設(shè)您有基礎(chǔ)字體尺寸為16px： > pixels =>點

• 6px => 5pt
• 7px => 5pt
• 8px => 6pt
• 9px => 7pt
• 10px => 8pt
• 11px => 8pt
• 12px => 9pt
• 13px => 10pt
• 14px => 11pt
• > 15px => 11pt
• 16px => 12pt
• 17px => 13pt
• > 18px => 14pt
• > 19px => 14pt
• 20px => 15pt
• 21px => 16pt
• > 22px => 17pt
• 23px => 17pt
• 24px => 18pt
針對您的內(nèi)容

WordPress通常具有看起來像這樣的內(nèi)置結(jié)構(gòu)：

>標題

1. content
2. >評論
3. sidebar
4. >頁腳

每個頁面都有這些結(jié)構(gòu)性元素，您可以輕松地使用CSS靶向。即使您的網(wǎng)站沒有這種確切的結(jié)構(gòu)，關(guān)鍵是為了您的目的自定義打印樣式表。 使用#header在CSS中的每個結(jié)構(gòu)中為這些部分使用ID或.header的部分，如果是類別。 最后，也許最重要的是，我們將使用@media Print css來定義何時正確應(yīng)用某些CSS樣式。 例如，要從打印樣式中刪除所有內(nèi)容，您將在樣式中做一些簡單的事情。CSS： [sourcecode language =“ css”] @Media打印{ #header {display：none;} #content {display：none;} #comments {display：none;} #sidebar {display：none;} #footer {display：none;} 。 。 } [/源代碼] 這適用于WordPress的20個十二個主題，并為我提供了一個很好，干凈的空白板。 如果您正在努力刪除Straggler元素，那么最簡單的事情就是右鍵單擊瀏覽器中的元素，并在源文檔中找到它。 Chrome具有“檢查元素”功能，該功能可直接跳到該元素的代碼，因此很容易找到有問題的元素。查找ID或類定義，然后相應(yīng)地定位它。 在此示例中，我們可能在印刷品中彈出了這個散亂的人。在這里，您可以看到ID： 現(xiàn)在，我們可以使用以下CSS來定位此元素： [sourcecode language =“ css”] ＃Contact-popup {Display：none;} [/源代碼] 頁面斷裂

假設(shè)您要打印多個頁面，打印機將您的內(nèi)容分為頁面。您可以告訴瀏覽器以避免在某些點上的頁面中斷。您可以在W3.org頁面上的CSS中閱讀所有有關(guān)頁面中斷的信息。簡而言之，您的選擇如下：

頁面break-before：始終|避免 - 始終/避免在項目
• >之前避免頁面中斷
page-break-ferter：始終|避免 - 始終/避免在項目
• 之后的頁面中斷
頁面破線：始終|避免 - 始終/避免在項目中間的頁面中斷
• >
請記住，頁面斷開僅適用于塊內(nèi)容。一個常見的示例是列表 - 您可能需要列出列表塊，然后防止列表中間發(fā)生的頁面中斷。例外是文本，您的 can

將其定義為一個塊，然后使用頁面斷開來更改其打印的方式，但通常文本應(yīng)該流動，您可以允許瀏覽器找出放置位置。 >樣本案例 現(xiàn)在我們有了空白的板巖，讓我們開始添加打印時實際要顯示的結(jié)構(gòu)件。內(nèi)容部分是一個顯而易見的候選人，因此讓我們將其添加回并將段落字體大小轉(zhuǎn)換為點： [sourcecode language =“ css”] @Media打印{ #content P { 字體大?。?1pt; 顏色：黑色; }#content img { 顯示：塊; 頁面破壞：避免； page-break-inside：避免； } #content ul，li { 顯示：塊; page-break-inside：避免； } #header {display：none;} #comments {display：none;} #sidebar {display：none;} #footer {display：none;} 。 。 } [/源代碼] 我刪除了顯示：無;內(nèi)容CSS，并將我們的段落文本從14px轉(zhuǎn)換為11pt。您可以瀏覽頁面的每個元素，并自定義每個元素以使用此方法進行打印。

總結(jié)

從網(wǎng)絡(luò)到打印可能會令人沮喪，但是 @media Print媒體查詢使我們能夠?qū)Υ蛴?nèi)容的打印方式和打印方式非常有針對性。 沒有真正的快捷方式。如果您需要您的網(wǎng)站在印刷品上看起來不錯，那么您可能必須在每個元素級別上創(chuàng)建一個單獨的CSS定義，直到完美。 >印刷樣式是您標準設(shè)計過程的一部分，還是您認為它們是徹底設(shè)計的網(wǎng)站的額外，不錯的補充？ 經(jīng)常詢問有關(guān)創(chuàng)建自定義打印樣式

的問題

>創(chuàng)建打印樣式表的重要性是什么？它使您可以控制打印時頁面的外觀，從而刪除不必要的元素，例如導(dǎo)航菜單，背景顏色和廣告。這不僅可以節(jié)省墨水，還可以確保打印版本的重點關(guān)注基本內(nèi)容，從而使閱讀和理解更容易。

在打印網(wǎng)頁時如何隱藏某些元素？通過使用“ display：none”屬性在打印樣式表中打印網(wǎng)頁時，可以隱藏特定的元素。例如，如果要隱藏導(dǎo)航菜單，則將目標定位為包含菜單的元素，并將其顯示屬性設(shè)置為無。這將確保未打印元素。

>我可以更改網(wǎng)頁的打印版本中的字體大小和顏色嗎？打印版本的網(wǎng)頁。您可以通過針對打印樣式表中的身體元素并設(shè)置所需的字體尺寸和顏色來做到這一點。如果要確保易于讀取網(wǎng)頁的印刷版本，這可能很有用。

如何創(chuàng)建單獨的打印樣式？在鏈接元素中使用引用樣式表的鏈接元素中的“媒體”屬性。媒體屬性應(yīng)設(shè)置為“打印”，表明在打印網(wǎng)頁時應(yīng)使用樣式表。這使您可以為屏幕顯示器提供一個樣式表，而另一個則用于打印版本。

>我可以控制網(wǎng)頁的打印版本中的頁面中斷嗎？您可以在打印樣式表中使用“ page-break-befor”和“ page-break-ffter”屬性來做到這一點。這些屬性允許您指定應(yīng)在何處出現(xiàn)頁面斷開，從而有助于防止內(nèi)容中間的尷尬中斷。

>

>如何測試我的打印樣式表？

您可以測試您的打印樣式圖通過在Web瀏覽器中使用“打印預(yù)覽”功能。這將向您展示打印時的網(wǎng)頁外觀如何，從而使您可以對您的打印樣式表進行任何必要的調(diào)整。

我可以在WebPage的打印版本中包含標頭和頁腳嗎？是的，您可以在網(wǎng)頁的打印版本中包含標題和頁腳。您可以在打印樣式表中使用“位置：修復(fù)”屬性來做到這一點。這將確保標題和頁腳出現(xiàn)在每個打印的頁面上。

>如何更改用于打印的網(wǎng)頁的布局？

您可以通過使用用于打印的網(wǎng)頁的布局來使用您的打印樣式表中的“ float”屬性。這使您可以控制頁面上元素的定位，以確保它們以打印時有意義的方式排列。

我可以控制網(wǎng)頁的打印版本中的邊距和填充嗎？ >

是的，您可以控制網(wǎng)頁的打印版本中的邊距和填充。您可以在打印樣式表中使用“邊距”和“填充”屬性來做到這一點。這使您能夠確保您的內(nèi)容在打印時的內(nèi)容適當間隔且易于閱讀。

我可以在網(wǎng)頁的打印版中使用圖像嗎？打印版本的網(wǎng)頁。但是，您應(yīng)該注意它們在打印時的外觀。您可能需要刪除背景圖像，并確保任何重要的圖像清晰易于黑白。您可以使用打印樣式表中的“顯示”屬性控制圖像的顯示。

以上是在幾分鐘內(nèi)創(chuàng)建定制的打印樣式表的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！