給網(wǎng)頁加打印樣式有必要，因為紙張與屏幕顯示特性不同，直接打印易出現(xiàn)排版錯亂等問題。 1. 使用@media print 定義打印專用樣式，可隱藏?zé)o關(guān)元素、移除背景並調(diào)整字體；2. 通過偽元素顯示超鏈接地址，提升可讀性；3. 控制分頁與佈局，避免內(nèi)容斷裂並設(shè)置合適邊距；4. 利用瀏覽器開發(fā)者工具模擬打印環(huán)境進(jìn)行調(diào)試，確保輸出整潔易讀。

給網(wǎng)頁加打印樣式，很多人覺得沒必要，其實不然。紙張和屏幕顯示完全不同，直接打印網(wǎng)頁往往會出現(xiàn)排版錯亂、背景圖干擾、鏈接失效等問題。用好CSS Print Stylesheet，能讓用戶在打印時得到清晰易讀的文檔，提升體驗。

1. 使用@media print 控制打印樣式

核心做法是通過@media print來定義只在打印時生效的樣式規(guī)則。你可以把它寫在主樣式表裡，也可以單獨引入一個print.css 文件。

 @media print {
  body {
    font-size: 12pt;
    color: black;
    background: white;
  }
}

常見操作包括：

• 隱藏不必要的元素（比如導(dǎo)航欄、側(cè)邊欄、廣告）
• 移除背景顏色或圖片（瀏覽器默認(rèn)不打印背景，但顯式移除更保險）
• 調(diào)整字體大小和行距以適應(yīng)紙張閱讀習(xí)慣

2. 去掉超鏈接的“裸地址”

網(wǎng)頁上的超鏈接在打印時會變成沒有上下文的文字，用戶體驗差?？梢酝ㄟ^偽元素把URL 顯示出來。

 @media print {
  a::after {
    content: " (" attr(href) ")";
  }
}

這樣，像<a href="https://example.com">示例鏈接</a>打印出來就會是：“示例鏈接( http://miracleart.cn/link/77dbda525242a07339101a7c6ac73495 。

3. 控制頁面佈局與分頁

打印時的頁面結(jié)構(gòu)和屏幕不同，要注意控制分頁位置，避免內(nèi)容被截斷或拆開。

 @media print {
  h2 {
    page-break-before: always; /* 每個二級標(biāo)題都從新一頁開始*/
  }

  .no-page-break {
    page-break-inside: avoid; /* 防止該元素內(nèi)部被分頁打斷*/
  }
}

常用技巧包括：

• 設(shè)置合適的margin 和padding，讓內(nèi)容不貼邊
• 使用A4 紙標(biāo)準(zhǔn)尺寸：width: 210mm; height: 297mm（不過一般不需要手動設(shè)置）
• 避免固定寬度佈局，盡量使用自適應(yīng)內(nèi)容寬度

4. 測試與調(diào)試打印樣式

打印樣式看不見摸不著，調(diào)試起來有點麻煩。 Chrome 開發(fā)者工具提供了“打印”模擬環(huán)境：

1. 打開DevTools → 切換到“Elements”標(biāo)籤
2. 點擊右上角三個點→ More Tools → Rendering
3. 在“Emulate CSS media type”中選擇“print”

這樣就能實時預(yù)覽打印效果，方便調(diào)整樣式。

基本上就這些。寫打印樣式不算複雜，但很容易忽略細(xì)節(jié)。只要注意隱藏?zé)o關(guān)元素、優(yōu)化文字顯示、處理鏈接和分頁，就能做出一份乾淨(jìng)整潔的打印輸出。

以上是創(chuàng)建有效的CSS打印樣式表的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！