使用css格式化文件以便列印
如果你曾經從網上列印過機票預訂或酒店的路線，你可能對結果印象不太深刻。因此，您可能不知道列印文件的樣式可以與螢幕上使用層疊樣式表（CSS）的樣式大致相同。
關注點分離
CSS的一個關鍵好處是內容與表示分離。簡單地說，這意味著，這不是非常老式的文體標記，例如：
<font size="7"><b>Heading</b></font>我們使用語義標記：
<h1>Heading</h1>這不僅更乾淨，還意味著我們的演示與內容是分離的。預設情況下，瀏覽器將h1元素呈現為大而粗體的文字，但我們可以隨時使用樣式表更改該樣式：
h1 { font-weight: normal; }透過在一個單獨的檔案中收集這些樣式宣告，並從我們的HTML文件中引用該檔案，我們可以更好地使用分離。樣式表可以重用，我們可以隨時更改單個檔案，以更新使用它的每個文件中的格式。
包括列印樣式表
以類似於包括螢幕樣式表的方式，我們可以指定列印樣式表。螢幕樣式表通常包括如下：
<link href="base.css" rel="stylesheet" />但是，另一個屬性media允許根據呈現文件的上下文確定目標。預設情況下，上一個元素等效於：
<link href="base.css" rel="stylesheet" media="all" />這意味著樣式表將應用於呈現文件的任何媒體。但是，媒體屬性也可以採用print和screen的值：
<link href="print.css" rel="stylesheet" media="print" />在本例中列印.css樣式表僅在列印文件時使用。這是一個非常有用的機制。我們可以在適用於所有媒體的樣式表中收集所有常用樣式（可能是字體系列或行距），並在單個樣式表中收集特定於媒體的格式。同樣，這也是關注點分離的另一種用法。
一些示例樣式宣告
乾淨的背景
你幾乎肯定不想浪費墨水打印出彩色背景或背景影象。首先重置文件中可能已設定的這些值的所有預設值：
body { background: white; color: black;}您可能還希望防止列印任何背景影象這些影象應該是裝飾性的，因此不是內容的必需部分：
* { background-image: none !important;}相關：如何在CSS中設定背景影象
控制利潤率
關於列印，另一個需要考慮的明顯點是頁邊距。雖然CSS提供了一種設定邊距大小的方法，但您應該記住，瀏覽器和印表機本身也可能影響邊距設定。
例如，在Chrome的“列印”對話方塊中，有一個邊距設定，其值包括none和custom，這將覆蓋透過CSS指定的任何內容：
因此，建議在公共網頁上把保證金的決定權留給讀者。但是，對於個人使用或建立預設佈局，透過CSS設定列印邊距可能是合適的。@page規則允許設定頁邊距，應按如下方式使用：
@page { margin: 2cm;}CSS還具有更復雜的列印佈局的能力，例如根據頁面是奇數（右）、偶數（左）還是封面來改變頁邊距。
不幸的是，這是支援差，特別是封面選項，但它可以使用到最低限度。以下樣式生成的頁面底部邊距略大於頂部，外部頁面邊緣的邊距略大於書脊：
@page { margin-left: 20mm; margin-right: 20mm; margin-top: 40mm; margin-bottom: 50mm;}@page :left { margin-left: 30mm;}@page :right { margin-right: 30mm;}隱藏無關內容
並非所有內容都適用於文件的列印版本。如果您的頁面包含橫幅導航、廣告或側邊欄，則可能需要防止這些詳細資訊出現在列印版本中，例如：
#contents, div.ad { display: none; }固定連桿
超連結在印刷材料中顯然不相關，因此您可能需要刪除將其與周圍文字區分開來的任何樣式：
a { text-decoration: none; color: inherit; }但是，您可能仍然希望讀者能夠訪問原始URL，一個簡單的解決方案是在連結文字之後自動**它們：
a[href]:after { content: " (" attr(href) ")"; font-size: 90%; color: #333;}此CSS提供如下結果：
a[href]：after專門針對實際具有URL（[href]）的每個連結元素（a）後面的位置（：after）。這裡的內容宣告在括號之間**href屬性的值。請注意，可以應用其他樣式規則來控制生成內容的顯示。
處理分頁符
要避免分頁符留下孤立的內容，或者在中間笨拙地打斷內容，請使用分頁符屬性：分頁符之前、分頁符之後和分頁符內部。例如：
table { page-break-inside: avoid; }這將有助於防止表跨越多個頁面，前提是沒有一個頁面比一個頁面高。類似地：
h1, h2 { page-break-before: always; }這意味著，這樣的標題總是開始一個新的頁面。但是，如果您立即用h2跟隨頁面的h1，則可能會導致問題，因為h1將完全獨立地結束在頁面上。要避免這種情況，只需使用針對該特定例項的選擇器取消分頁符，例如：
h1 + h2 { page-break-before: avoid; }檢視列印樣式
在所有情況下，瀏覽器和作業系統都應提供列印預覽功能，通常作為標準列印對話方塊的一部分。
Chrome瀏覽器使得透過開發人員工具檢查甚至除錯列印樣式更加方便，如本示例所示，該示例顯示了帶有列印樣式表的CV。首先，開啟主選單並選擇“更多工具”，然後選擇“開發人員工具”選項：
從出現的新面板中，選擇“選單”，然後選擇“更多工具”，然後選擇“渲染”：
然後向下滾動到“模擬CSS媒體型別”設定。下拉列表允許您在文件的列印檢視和螢幕檢視之間切換：
在模擬列印樣式表時，標準樣式瀏覽器可用於檢查和修改實時樣式規則。請記住，在螢幕上模擬列印輸出仍然不是100%準確。瀏覽器對紙張大小一無所知，無法模仿@page規則。
列印為pdf
現代作業系統的一個便利功能是能夠列印到PDF檔案。實際上，任何可以列印的內容都可以傳送到PDF檔案中，這並不奇怪，畢竟PDF檔案應該表示列印的文件。
這使得HTML與列印樣式表相結合成為建立高質量文件的一種極好的方法，該文件既可以作為附件傳送，也可以列印。
列印各種文件
您可以使用列印樣式表來建立高質量的文件，包括從您的簡歷到食譜或活動公告的任何內容。網頁通常看起來很難看，列印時包含不需要的細節，但少量的樣式調整可以顯著改善列印結果。將最終結果儲存為PDF是建立有吸引力的專業文件的快速方法。
- 發表於 2021-03-28 16:05
- 閱讀 ( 78 )
- 分類：程式設計
你可能感興趣的文章
html格式(html)和新加坡元(sgml)的區別
...大多數標記都有相應的起始標記和結束標記。e、 g。還有格式化標記。用於加粗文字。標記用於給文字加下劃線。標記用於使內容傾斜。有些標記本身包含開始和結束標記。用於在頁面中建立水平線。如果程式設計師只寫沒有斜...
10個免費的adobe photoshop外掛，提供最佳創意套件
...我們將看看10個基本的免費Photoshop外掛，你應該馬上開始使用。 ...
9個在構建網頁時不應該犯的錯誤
... HTML和CSS的一大優點是，你可以在任何時候格式化任何一行文字——任何一個單詞，真的——只要你想。但這並不意味著你應該利用這種能力。 ...
建立web介面：從何處開始
... Web開發人員將圖形使用者介面（GUI）統稱為Web頁面的前端，而不是後端。前端是使用者可以操縱、使用和使用的。後端可以被認為是包含並支援前端所隱含的所有資訊和任務的基礎結構。 ...
javascript程式設計師jquery基本指南
...萬歲！十年過去了，jQuery仍然是國王嗎？如果你以前從未使用過它，你能用它做什麼呢？ ...
什麼是xml檔案？如何開啟和使用它？
...語言對文字進行註釋或新增附加資訊。這些註釋對於終端使用者仍然是不可見的。在按照標記命令的指示處理和顯示文字之前，“機器”（如瀏覽器）會讀取這些註釋。 ...
理解基本html程式碼的5個步驟
... 步驟3：格式化的基本html標記 ...
如何凍結word文件的一部分以便於參考
...做什麼的？是否開啟同一文件的兩個例項，並在它們之間使用Alt+Tab？或者微軟Word中有沒有一個功能讓它更簡單？ ...
如何使用html5樣板在幾分鐘內建立一個網站
...時，主.css在這裡你可以輸入任何你需要的程式碼來用CSS格式化你的網站。模板中包含的標準CSS是開發人員和HTML5樣板社群進行研究的結果。它可讀性強，可以在不同的瀏覽器中很好地顯示。 ...
什麼是latex文件格式以及如何使用它
... 使用LaTeX格式化和排版有點像使用HTML和CSS。如果您用HTML正確地標記了所有內容，那麼您所需要做的就是在CSS中進行一到兩次更改，以便在整個HTML文件中應用它們。 ...
