搜尋
首頁CMS教程&#&按在幾分鐘內創建定制的打印樣式表

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

您之前已經看過它:您設計了一個漂亮的佈局,有人打開打印,然後在艱苦的工作地點畏縮地走進您的辦公室,這被打印機犯了很多。 網頁設計的印刷版本很少是您期望的。他們需要進行一些額外的調整和一些舞台。但是,了解如何設置打印視圖,以便一旦您掌握了它的內容,內容就不會太困難。 在本文中,我將向您展示如何設置樣式表,以便在網站上打印您的內容。我將使用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中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
如何將PHP數據和字符串傳遞給WordPress中的JavaScript如何將PHP數據和字符串傳遞給WordPress中的JavaScriptMar 07, 2025 am 09:28 AM

將PHP數據傳遞給JavaScript的最佳實踐:WP_LOCALIZE_SCRIPT和WP_ADD_INLINE_SCRIPT的比較是PHP文件中靜態字符串中數據存儲數據的最佳實踐。 如果在您的JavaScript代碼中需要此數據,請合併

如何使用WordPress插件嵌入和保護PDF文件如何使用WordPress插件嵌入和保護PDF文件Mar 09, 2025 am 11:08 AM

本指南演示瞭如何使用WordPress PDF插件在WordPress帖子和頁面中嵌入和保護PDF文件。 PDFS為從目錄到演示文稿提供了一種用戶友好的,普遍訪問的格式。 此方法ENS

對於初學者來說,WordPress容易嗎?對於初學者來說,WordPress容易嗎?Apr 03, 2025 am 12:02 AM

WordPress對初學者來說容易上手。 1.登錄後台後,用戶界面直觀,簡潔的儀表板提供所有必要功能鏈接。 2.基本操作包括創建和編輯內容,所見即所得的編輯器簡化了內容創建。 3.初學者可以通過插件和主題擴展網站功能,學習曲線存在但可以通過實踐掌握。

為什麼有人會使用WordPress?為什麼有人會使用WordPress?Apr 02, 2025 pm 02:57 PM

人們選擇使用WordPress是因為其強大和靈活性。 1)WordPress是一個開源的CMS,易用性和可擴展性強,適合各種網站需求。 2)它有豐富的主題和插件,生態系統龐大,社區支持強大。 3)WordPress的工作原理基於主題、插件和核心功能,使用PHP和MySQL處理數據,支持性能優化。

WordPress仍然免費嗎?WordPress仍然免費嗎?Apr 04, 2025 am 12:06 AM

WordPress核心版本是免費的,但使用過程中可能產生其他費用。 1.域名和託管服務需要付費。 2.高級主題和插件可能需要付費。 3.專業服務和高級功能可能需要付費。

WordPress的成本是多少?WordPress的成本是多少?Apr 05, 2025 am 12:13 AM

WordPress本身免費,但使用需額外費用:1.WordPress.com提供從免費到付費的套餐,價格從每月幾美元到幾十美元不等;2.WordPress.org需購買域名(每年10-20美元)和託管服務(每月5-50美元);3.插件和主題多數免費,付費的價格在幾十到幾百美元之間;通過選擇合適的託管服務、合理使用插件和主題、定期維護和優化,可以有效控制和優化WordPress的成本。

我應該使用Wix或WordPress嗎?我應該使用Wix或WordPress嗎?Apr 06, 2025 am 12:11 AM

Wix適合沒有編程經驗的用戶,WordPress適合希望有更多控制和擴展能力的用戶。 1)Wix提供拖放式編輯器和豐富模板,易於快速搭建網站。 2)WordPress作為開源CMS,擁有龐大社區和插件生態,支持深度自定義和擴展。

WordPress有什麼用?WordPress有什麼用?Apr 07, 2025 am 12:06 AM

wordpressgood forvortalyanewebprojectDuetoItsAsatilityAsacms.itexcelsin:1)用戶友好性,允許Aeserywebsitesetup; 2)sexibility andcustomized andcustomization and numerthemesandplugins; 3)seoop timigimization; and4)and4)

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
2 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
2 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )專業的PHP整合開發工具

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中

SecLists

SecLists

SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合,這些清單在安全評估過程中經常使用,而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表,幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上,他就可以存取所需的每種類型的清單。

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser是一個安全的瀏覽器環境,安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問,並防止學生使用未經授權的資源。

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

這個專案正在遷移到osdn.net/projects/mingw的過程中,你可以繼續在那裡關注我們。 MinGW:GNU編譯器集合(GCC)的本機Windows移植版本,可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔;包括對MSVC執行時間的擴展,以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。