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列印媒體的基本語法和規則，就能夠輕鬆地實現各種各樣的效果。