在幾分鐘內創建定制的打印樣式表

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

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

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

打印注意事項

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

> px

轉換為> pt> pt>假設您有基礎字體尺寸為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
針對您的內容

WordPress通常具有看起來像這樣的內置結構：

>標題

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

每個頁面都有這些結構性元素，您可以輕鬆地使用CSS靶向。即使您的網站沒有這種確切的結構，關鍵是為了您的目的自定義打印樣式表。 使用#header在CSS中的每個結構中為這些部分使用ID或.header的部分，如果是類別。 最後，也許最重要的是，我們將使用@media Print css來定義何時正確應用某些CSS樣式。 例如，要從打印樣式中刪除所有內容，您將在樣式中做一些簡單的事情。 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或類定義，然後相應地定位它。 在此示例中，我們可能在印刷品中彈出了這個散亂的人。在這裡，您可以看到ID： 現在，我們可以使用以下CSS來定位此元素： [sourcecode language =“ css”] ＃Contact-popup {Display：none;} [/原始碼] 頁面斷裂

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

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

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

總結

從網絡到打印可能會令人沮喪，但是 @media Print媒體查詢使我們能夠對打印內容的打印方式和打印方式非常有針對性。 沒有真正的快捷方式。如果您需要您的網站在印刷品上看起來不錯，那麼您可能必須在每個元素級別上創建一個單獨的CSS定義，直到完美。 >印刷樣式是您標准設計過程的一部分，還是您認為它們是徹底設計的網站的額外，不錯的補充？ 經常詢問有關創建自定義打印樣式

的問題

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

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

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

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

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

>

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

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

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

>如何更改用於打印的網頁的佈局？

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

我可以控製網頁的打印版本中的邊距和填充嗎？ >

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

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

以上是在幾分鐘內創建定制的打印樣式表的詳細內容。更多資訊請關注PHP中文網其他相關文章！