CSS列印示例

一、列印與網頁區別

在網頁設計中，常常會遇到需要將設計好的網頁列印為紙質版的需求。但是網頁與紙質版有著不同的特點，需要在設計時進行一些調整。在CSS中，可以通過media屬性設置列印樣式，與網頁樣式進行區分。在列印樣式中，我們通常會設置一些隱藏不需要列印的元素或調整元素的位置、大小，以適應紙質版的大小和要求。

@media print {
  /* 隱藏不需要列印的元素 */
  .no-print {
    display: none;
  }
  
  /* 調整需要列印元素的位置和大小 */
  .print-style {
    font-size: 16pt;
    margin: 0 auto;
    width: 80%;
  }
}

以上是@media中的一些樣式設置示例，可以通過設置元素的display屬性為none或隱藏相應的class來隱藏某些元素。可以通過設置其它的CSS樣式調整需要列印元素的位置和大小，達到適應紙質版的效果。

二、列印頁面布局

在列印樣式中，還需要考慮頁面布局的特殊性。在網頁中，我們通常使用流式布局對元素進行排版，但是在紙質版上，布局不應該是流式的，需要固定每一頁的內容和布局。可以使用page-break屬性控制分頁和分欄的情況。以下是一個實例代碼，可以設置每一頁為A4紙大小，橫向排版頁面，每頁分為兩欄：

@media print {
  /* 設置紙張信息 */
  @page {
    size: A4 landscape;
    margin: 1cm;
  }
  
  /* 分為兩欄 */
  .print-style {
    column-count: 2;
    column-gap: 30px;
  }
  
  /* 分頁控制 */
  .print-page {
    page-break-after: always;
    page-break-inside: avoid;
  }
}

這是一個簡單的示例，通過設置@page和column-*屬性來控制頁面布局和分欄。同時可以使用.print-page類控制分頁的情況，以達到更好的頁面布局效果。

三、列印樣式設計

在列印樣式設計中，我們需要考慮頁面版式、字體大小等因素來讓用戶能夠更好地瀏覽並列印紙質版。以下是一些常見的樣式設計：

字體大小
在列印樣式中，字體大小需要增加一定的比例以適應紙質版的閱讀。推薦字體大小為14pt – 16pt之間，以便於用戶在紙質版上閱讀和識別內容。
行間距
在紙質版中，行間距需要相對於字體大小適當調整，以提高布局效果和版面美觀度。
顏色和背景
在列印樣式中，顏色和背景需要考慮紙質版的列印效果。為了節省列印墨盒和保證內容的閱讀性，建議設置列印樣式為黑白或淡灰色調。
列印頁眉頁腳
對於需要列印的內容，建議設置頁面的頁眉頁腳，以方便用戶在紙質版上查看和跟蹤信息。
列印可選項
在列印樣式中，我們可以設置列印的可選項，例如設置列印頁範圍、列印紙張方向等。以更好地滿足用戶的需求。

四、示例代碼

以下是完整的示例代碼，包括HTML和CSS部分：

<!DOCTYPE html>
<html>
  <head>
    <title>CSS列印示例</title>
    <style>
      /* 網頁樣式 */
      .no-print {
        display: block;
        height: 100px;
        background-color: #f0f0f0;
      }
      
      .print-style {
        font-size: 14pt;
        line-height: 1.5em;
      }
      
      /* 列印樣式 */
      @media print {
        /* 隱藏不需要列印的元素 */
        .no-print {
          display: none;
        }

        /* 設置紙張信息 */
        @page {
          size: A4 landscape;
          margin: 1cm;
        }

        /* 分為兩欄 */
        .print-style {
          column-count: 2;
          column-gap: 30px;
        }

        /* 分頁控制 */
        .print-page {
          page-break-after: always;
          page-break-inside: avoid;
        }
      }
    </style>
  </head>
  <body>
    <h1>CSS列印示例</h1>
    
    <p>以下是需要列印的內容：</p>
    
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce at libero nec dolor malesuada iaculis. Nullam dapibus faucibus tellus ac convallis. Cras vitae libero vel leo lobortis gravida et eu sem. Maecenas mollis rhoncus lacus, sit amet bibendum nisl pharetra ac. Sed eros dolor, consectetur faucibus mollis non, euismod id dolor. Aenean mollis, nibh ac ullamcorper iaculis, erat mi dictum risus, a ullamcorper sem lorem vel nisi. Nullam posuere suscipit erat a varius. Etiam faucibus, nunc non aliquam iaculis, est mi consectetur felis, imperdiet sagittis nulla nibh in augue. Donec dictum viverra suscipit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed turpis diam, bibendum vel mi et, dapibus molestie risus. Vestibulum vel nisi vulputate, venenatis sapien ut, egestas neque. Suspendisse potenti. Donec placerat erat a odio bibendum, eu consequat sapien dictum. Nam id placerat sapien, ut lobortis dui.</p>
    
    <div class="no-print">這是不需要列印的內容</div>
    
    <p>Morbi vehicula laoreet dolor, ut suscipit magna pretium nec. Nullam aliquam massa in nunc malesuada, eget feugiat dolor tristique. Cras porttitor gravida lacus, quis volutpat leo convallis a. Integer tempor metus in dolor gravida, non sagittis sapien aliquet. Praesent et turpis eleifend, consequat nisi vitae, dictum odio. Cras nisl enim, porta vel eros a, consequat malesuada dolor. Ut sit amet mi eu leo mattis tempor sed ac lacus. Integer iaculis nunc id interdum bibendum. Proin gravida rutrum tortor, vel pellentesque nisl dictum ac. Nam pulvinar elementum sem, nec consectetur est convallis quis. Donec eu egestas ante, sed vehicula velit. Sed interdum, elit id egestas sollicitudin, tellus ex rutrum tortor, eu aliquet enim velit ac nunc.</p>
    
    <div class="print-page">
        <p class="print-style">Sed interdum justo at vestibulum finibus. Mauris in neque id leo hendrerit fermentum vitae et mauris. Sed eget nisl eu turpis sollicitudin commodo. Aenean viverra lectus vel augue euismod, non malesuada velit gravida. Donec imperdiet nunc nec urna maximus viverra. Fusce lacinia convallis dapibus. In posuere libero vitae mi commodo pharetra.</p>
    </div>
    
    <p>Quisque facilisis orci eu tortor aliquam feugiat. Vivamus eu lectus sed augue dictum bibendum vel eget massa. Etiam vitae ullamcorper orci, quis bibendum arcu. Integer vestibulum, tortor et aliquet venenatis, elit magna scelerisque arcu, vel convallis sapien est vestibulum enim. Duis sodales dui felis, ac pulvinar massa dapibus quis. Duis sit amet congue augue. Fusce et tellus in magna eleifend ultricies a non mauris. Nunc bibendum maximus risus, vel pulvinar diam auctor id. Aliquam id orci arcu. Proin mollis malesuada sem, ac laoreet ipsum ullamcorper quis. Ut aliquam orci vitae leo blandit malesuada.</p>
    
    <div class="print-page">
        <p class="print-style">Proin ultrices ante et urna consequat scelerisque. Integer tincidunt finibus dui a auctor. Donec vehicula vestibulum ipsum, at efficitur augue ullamcorper eget. Curabitur bibendum arcu non enim sollicitudin, vitae sollicitudin sapien feugiat. Fusce tincidunt cursus mauris eget pharetra. Nam vulputate egestas mauris efficitur malesuada. Praesent vel sollicitudin elit. Ut porttitor bibendum scelerisque. Sed et justo eros. Vestibulum molestie sollicitudin libero nec feugiat. Donec et risus id erat consequat consectetur. Nulla feugiat dui a nisl ultrices, vel ullamcorper massa interdum. Curabitur magna nulla, imperdiet quis tristique vel, blandit vel elit. Aliquam erat volutpat.</p>
    </div>
    
  </body>
</html>

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/199118.html

CSS列印示例

一、列印與網頁區別

二、列印頁面布局

三、列印樣式設計

四、示例代碼

相關推薦

發表回復