CSS打印媒體的示例

一、引言

隨着現代網頁成為主流，許多人已經將網頁作為獲取信息的主要渠道。但在某些情況下，我們還是需要使用打印機將網頁內容打印出來。這就需要對網頁進行適應性調整，以便內容在打印時能夠保持良好的呈現效果。

這時候CSS打印媒體就顯得尤為重要了。它能夠用於調整打印時網頁的布局、字體、排版和色彩等各方面的屬性，以適應不同的打印設備和媒介。

本文將介紹CSS打印媒體的示例，並從多個方面對它進行詳細的闡述。

二、CSS打印媒體的基本設置

首先，我們需要通過CSS樣式表來設置打印時元素的顯示效果。可以通過如下示例代碼實現：

@media print {
  /*設置頁面背景為白色*/
  body {
    background-color: #fff;
  }
  
  /*隱藏頁面上的鏈接*/
  a[href^="http"]::after {
    content: " (" attr(href) ") ";
    display: none;
  }
  
  /*隱藏頁面底部的版權信息*/
  #footer {
    display: none;
  }
}

在以上代碼中，我們使用了@media print規則來指定適用於打印媒體的CSS樣式。在這個規則裏面，我們設置了頁面的背景色、超鏈接的隱藏以及頁腳的顯示/隱藏等等。

此外，我們還可以對打印頁面的布局、字體、間距、行數等進行設置。以下代碼給出了一份基本的CSS樣式，可以在打印時使文本更易於閱讀：

@media print {
  /*設置頁面背景為白色*/
  body {
    background-color: #fff;
  }
  
  /*隱藏頁面上的鏈接*/
  a[href^="http"]::after {
    content: " (" attr(href) ") ";
    display: none;
  }
  
  /*隱藏頁面底部的版權信息*/
  #footer {
    display: none;
  }
  
  /*增大段落之間的間距*/
  p {
    margin-bottom: 10px;
  }
  
  /*減小頁面邊緣的空白*/
  @page {
    margin: 1cm;
  }
  
  /*增大文本行距*/
  *{
    line-height: 1.2;
  }
}

三、使用CSS樣式來控制打印元素的顯示和隱藏

使用CSS可以控制哪些元素在打印時顯示，哪些元素不顯示。以下是一些常見的實現方法：

1、由於打印時無法使用位置等絕對屬性，我們可以使用CSS樣式來控制元素的顯示和隱藏：

@media print {
  /*隱藏某些元素*/
  #element1, #element2 {
    display:none;
  }
}

2、在需要打印的內容之外，我們可以使用另外一個CSS樣式表，以便隱藏那些不必要的元素：

@media screen {
  /*隱藏需要打印的元素*/
  #print-content {
    display:none;
  }
}

@media print {
  /*顯示需要打印的元素*/
  #print-content {
    display:block;
  }
}

3、還有一種常見的方法就是使用CSS類，將元素標記為「不打印」：

@media print {
  /*隱藏class為no-print的元素*/
  .no-print {
    display: none;
  }
}

四、控制打印頁面的布局

在CSS中，我們可以使用@page元素來控制打印頁面的布局，例如頁邊距和頁眉頁腳：

@media print {
  /*增大頁面內部的空白*/
  @page {
    size: auto;   /*選擇最適合打印機的紙張大小*/
    margin: 10mm 15mm 10mm 15mm;   /*設置四個邊距：上、右、下、左*/
    /*在打印頁面的頁眉和頁腳處添加文本*/
    @top-center {
      content: "Header text";
    }
    
    @bottom-center {
      content: "Footer text";
    }
  }
}

五、實現自動頁面斷點

在打印長文檔時，我們經常需要在適當的位置自動分頁。CSS提供了一些屬性和值幫助我們實現這個目標：

1、使用page-break-before屬性在頁面的開始位置插入分頁符：

@media print {
  /*在h2標籤前插入分頁符*/
  h2 {
    page-break-before: always;
  }
}

2、使用page-break-after屬性在頁面的末尾插入分頁符：

@media print {
  /*在p標籤後插入分頁符*/
  p {
    page-break-after: always;
  }
}

3、使用page-break-inside屬性在頁面中間插入分頁符：

@media print {
  /*在div標籤內部插入分頁符*/
  div {
    page-break-inside: avoid;
  }
}

六、控制頁面背景和文字顏色

在打印時，黑白打印機看到的是灰度圖片。如果我們在網頁中使用了背景圖片或者顏色，那麼就需要考慮在打印時相應調整。以下代碼演示了如何在打印時控制頁面背景和文字的顏色：

@media print {
  /*使用白色背景*/
  body {
    background: white;
  }
  
  /*適用於黑白打印機，將文本顏色設置為黑色*/
  h1, h2, h3, h4, h5, h6, p, strong, b, i, u, em {
    color: black;
  }
}

七、其他示例

除了以上介紹的示例，CSS打印媒體還可以實現更多典型的效果。以下是一些其他的示例：

1、通過調整表格的布局，打印時可以使表格更易於閱讀，例如增加表格內部的間距：

@media print {
  /*增加表格的內部間距*/
  table {
    border-collapse: separate;
    border-spacing: 3mm;
  }
}

2、在打印時調整圖片大小，以便適應不同的紙張大小：

@media print {
  /*調整圖片的寬度和高度*/
  img {
    width: 80%;
    height: auto;
  }
}

3、通過調整字體大小和行距，提高打印文檔的可讀性：

@media print {
  /*調整字體和行距*/
  body {
    font-size: 12pt;
    line-height: 1.4;
  }
}

八、結論

CSS打印媒體提供了許多能夠使打印效果更好的屬性和值，例如控制頁面布局、自動分頁、背景色和字體顏色等等。通過使用適當的CSS樣式，我們可以輕鬆地調整網頁打印頁面的布局和樣式，以適應不同的打印設備和媒介。

在實踐中，我們還需要考慮如何高效地布置內容，在數據量非常大的情況下優化打印效率。總之，只要我們熟悉了CSS打印媒體的基本語法和規則，就能夠輕鬆地實現各種各樣的效果。