搜尋
首頁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
WordPress是否需要編碼知識作為CMS?WordPress是否需要編碼知識作為CMS?Apr 30, 2025 am 12:03 AM

你不需要編程知識就能使用WordPress,但掌握編程可以提升體驗。 1)使用CSS和HTML可以調整主題樣式。 2)PHP知識能編輯主題文件,添加功能。 3)自定義插件和元標籤可優化SEO。 4)注意備份和使用子主題以防更新問題。

使用WordPress時的安全考慮是什麼?使用WordPress時的安全考慮是什麼?Apr 29, 2025 am 12:01 AM

TosecureaWordPresssite,followthesesteps:1)RegularlyupdateWordPresscore,themes,andpluginstopatchvulnerabilities.2)Usestrong,uniquepasswordsandenabletwo-factorauthentication.3)OptformanagedWordPresshostingorsecuresharedhostingwithawebapplicationfirewal

WordPress與其他網站構建者相比如何?WordPress與其他網站構建者相比如何?Apr 28, 2025 am 12:04 AM

WordPressExcelSoverotherWeberSiteBuilderSduetoItsflexible,可伸縮性,andopen-sourcenature.1)它'saversatilecmswithExtEnsextEnsexenSiveCustomizedOptionsVIATHEMESANDPLUGINS.2)它的alllearbutoffersbutoffersbutoffersbutoffersbutefersbuterbutfulcontrololoncemastered.3)

5個WordPress插件,供開發人員在2025年使用5個WordPress插件,供開發人員在2025年使用Apr 27, 2025 am 08:25 AM

2025年網站開發的七個必備WordPress插件 在2025年建立頂級WordPress網站需要速度,響應能力和可擴展性。 實現這種有效的實現通常取決於戰略插件的選擇。 這篇文章Highlig

您將使用WordPress做什麼?您將使用WordPress做什麼?Apr 27, 2025 am 12:14 AM

WordPresscanbeusedforvariouspurposesbeyondblogging.1)E-commerce:WithWooCommerce,itcanbecomeafullonlinestore.2)Membershipsites:PluginslikeMemberPressenableexclusivecontentareas.3)Portfoliosites:ThemeslikeAstraallowstunninglayouts.Ensuretomanageplugins

WordPress適合創建投資組合網站嗎?WordPress適合創建投資組合網站嗎?Apr 26, 2025 am 12:05 AM

是的,wordpressisisexcellentforcortingaportfoliowebsite.1)itoffersnumeroversnumeroverportfolio-spificthemeslike'astra'astra'astra'astra'astra'astra'astra'astra'astra'elementor'Enelementor'enableIntiviveSiveSign,Thoughtemanycanslowthesite.3)

使用WordPress而不是從頭開始編碼網站的優點是什麼?使用WordPress而不是從頭開始編碼網站的優點是什麼?Apr 25, 2025 am 12:16 AM

WordPressisadvantageousovercodingawebsitefromscratchdueto:1)easeofuseandfasterdevelopment,2)flexibilityandscalability,3)strongcommunitysupport,4)built-inSEOandmarketingtools,5)cost-effectiveness,and6)regularsecurityupdates.Thesefeaturesallowforquicke

是什麼使WordPress成為內容管理系統?是什麼使WordPress成為內容管理系統?Apr 24, 2025 pm 05:25 PM

WordPressIsAcmsDuetoItseAsofuse,自定義,USERMANAMECTION,SEO和COMMUNITYSUPPORT.1)ITSIMPLIFIESCONTENTMANGAMEWITHANINTUISIDERFEEFFECE.2)提供extentensiveCustomizationThroughThroughTheMesandPlugins.3)supportrobustuserrolesandplugins.4)supportrobustuserrolesandpermissions.4)增強

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脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

MantisBT

MantisBT

Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

Safe Exam Browser

Safe Exam Browser

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

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

將Eclipse與SAP NetWeaver應用伺服器整合。

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境