CSS Media Prints

CSS media print是CSS的一種樣式，主要應用於列印頁面，是控制列印或列印預覽的CSS樣式表。在CSS3中，我們可以通過使用@media規則和print媒體類型來指定應用於列印或列印預覽的樣式。

一、選擇器

針對印表機和列印樣式表的CSS選擇器需要仔細選擇。最好只針對需要的元素設置樣式，因為太多的樣式將降低列印速度。以下是一個示例來指定僅列印網頁主體的CSS選擇器：

@media print {
  body * {
    visibility: hidden;
  }
  #section-to-print, #section-to-print * {
    visibility: visible;
  }
  #section-to-print {
    position: absolute;
    left: 0;
    top: 0;
  }
}

在上面的代碼中，首先使用@media print規則來指定列印樣式表。然後，為body中的所有元素設置visibility:hidden屬性，這將使整個頁面不可見。接下來，使用id為section-to-print的元素及其子代元素來覆蓋所有其他元素的visibility:hidden屬性並設置visibility:visible。然後，將被列印的區域移動到左上角，覆蓋其他內容。這裡只使用id作為選擇器，但是也可以使用class或其他選擇器。

二、頁面布局

通過CSS media print也可以進行頁面布局的設置。例如，可以為頁面設置不同的背景顏色，或者調整頁面元素在列印頁面上的位置和長度寬度以實現更好的列印效果。以下是有關頁面布局的示例代碼：

@media print {
  body {
    background-color: #FFFFFF;
    margin: 0;
    padding: 0;
  }
  h1 {
    font-size: 28pt;
    line-height: 32pt;
  }
  p {
    font-size: 12pt;
    line-height: 14pt;
  }
}

在上面的代碼中，為列印頁面處理了頁面背景顏色，並將頁面邊距和填充設置為0。接下來，將標題的大小設置為28點，行高設置為32點，並將段落的大小設置為12點，行高設置為14點。這可以幫助使頁面內容更易讀、易於分開以及給讀者更清晰的感覺。

三、頁面分頁控制

在列印長頁面時，頁面勾選分頁非常重要。在CSS media print中，可以使用以下示例代碼配置頁面分頁：

@media print {
  #page {
    page-break-after: always;
  }
}

在上面的代碼中，使用id為page的元素使頁面分頁，page-break-after屬性指定分頁方式，always表示每個元素將分頁。此外，可能會使用page-break-before和page-break-inside屬性配置分頁的位置。

四、列印隱藏元素

在某些情況下，需要隱藏頁面的某些元素以列印其他部分。在CSS中，將元素隱藏不僅限於visibility屬性。在下面的示例中，我們將展示如何使用CSS media print為元素設置display:none屬性：

@media print {
  .no-print {
    display: none;
  }
}

在上面的代碼中，將class為no-print的元素設置為display:none，以在列印時隱藏這些元素。

五、製作自定義列印按鈕

在Web頁面中，可以創建一個帶有列印功能的自定義按鈕。

  <button onclick="printContent()">Print Page</button>
  <script>
  function printContent() {
    window.print();
  }
  </script>

在上面的代碼中，我們使用一個普通的HTML button元素，並在onclick事件中調用JavaScript函數printContent。該函數使用window.print方法，在列印對話框中列印整個Web頁面。將button元素與其他CSS和JavaScript結合使用，可以輕鬆地為Web頁面添加自定義列印功能。

六、結論

掌握CSS media print將為列印帶來新的生命。通過控制列印樣式表的各個方面，可以為網頁內容添加更好的可讀性和可列印性，從而實現更好的列印效果。在將HTML頁面用於列印時，請仔細檢查列印預覽，以確保頁面在列印時呈現所需的格式。

以上是本文關於CSS Media Prints的詳細說明，祝您在CSS Media Prints中愉快學習！