專為控制列印設計的CSS樣式-css教學-PHP中文網

專為控制列印設計的CSS樣式

巴扎黑

發布： 2017-05-01 14:40:36

原創

2563 人瀏覽過

　　大多數Web設計師對列印控制還不是很熟悉，他們往往更迷戀像素，而不是印表機。在現實世界中，許多人依賴從網站上列印網頁來參考：在這個數位時代, 在一些特殊的場合，很多人手中還會拿著紙張。 Web開發人員可以採取一些措施來彌補印表機和液晶螢幕之間的差距。

　　為印表機而非螢幕設計的樣式

/* 样式将只应用于打印 */
@media print {


}

登入後複製

# 　　註＊也可通單獨的CSS檔案, 設定link的 media="print" 屬性來指定此樣式專用於列印

<link type="text/css" rel="stylesheet" href="css/print.css" media="print">

登入後複製

　　為您的網站重塑整個CSS是沒有必要的，整體而言，由打印繼承默認樣;僅對不同的需要加以限定。為了節省列印時的碳粉，大多數瀏覽器會自動反轉顏色。為了達到最佳效果，應使色彩變化明顯：

/*白纸黑字*/
@media print {
   body {
      color: #000;
      background: #fff;
   }
}

登入後複製

　　我們不是在創建整個網頁的截圖,只是為了展現一個設計良好,可讀性強的網站:

/*去除背景图片, 节约笔黑 */

h1 {
   color: #fff;
   background: url(banner.jpg);
}


@media print {
   h1 {
      color: #000;
      background: none;
   }


   nav, aside {
      display: none;
   }
}

登入後複製

　　為了讓印表機更有效率,應只顯示主體內容,移除頁首頁腳導覽列

@media print {
   h1 {
      color: #000;
      background: none;
   }


   nav, aside {
      display: none;
   }


   body, article {
      width: 100%;
      margin: 0;
      padding: 0;
   }


   @page {
      margin: 2cm;
   }
}

登入後複製

　　連結的處理

# 　　在印表機上連結是看不到的,應對超連結進行擴充

/*在超链接后面添加带<http://XXX>的完整地址*/
@media print {
   article a {
      font-weight: bolder;
      text-decoration: none;
   }


   article a[href^=http]:after {
      content:" <" attr(href) "> ";
   }
}

登入後複製

　　顯示效果可能是這樣的

# 　　控製列印設定選項

　　該@page規則允許您指定頁面的各個方面。例如，你將要指定頁面的尺寸。頁邊距,頁首頁腳等都是非常重要的。 [許多瀏覽器均己支援]

　　@PAGE規則紙張大小設定

　　透過下面這條CSS您可以設定紙張大小,5.5吋寬,8.5吋高.

@page {
  size: 5.5in 8.5in;
}

登入後複製

　　你也可以透過別名控制紙張大小,如"A4"或「legal.」

@page {
  size: A4;
}

登入後複製

　　你也可以控制列印方向，　portrait：縱向列印地, landscape: 橫向

@page {
  size: A4 landscape;
}

登入後複製

　　PAGE模型　The Page Model

　　在分頁媒體格式模型中，文件被轉移到一個或多個頁框。該頁框是映射到一個矩形平面。這大致類似於css盒子模型。

　　註*　支援瀏覽器較少

@page { width: 50em; }

登入後複製

　　PAGE邊距模型　 Page-Margin Boxes

　　在進一步討論之前，我們應該了解的頁面的盒子模型，因為它的行為跟如何在屏幕上的工作有些不同。

　　頁面模型定義了頁面區域，然後劃分了16個週邊緣盒。可以控制頁區域的大小和頁區域的邊緣和頁面本身的端部之間的餘量的尺寸。

# 　　左右頁邊距

@page :left {
  margin-left: 30cm;
}


@page :right {
  margin-left: 4cm;
}

登入後複製

　　下面的css將在底部左邊顯示標題，在右下角的網頁計數器，並在右上角顯示一章的標題。

@page:right{ 
  @bottom-left {
    margin: 10pt 0 30pt 0;
    border-top: .25pt solid #666;
    content: "Our Cats";
    font-size: 9pt;
    color: #333;
  }


  @bottom-right { 
    margin: 10pt 0 30pt 0;
    border-top: .25pt solid #666;
    content: counter(page);
    font-size: 9pt;
  }


  @top-right {
    content:  string(doctitle);
    margin: 30pt 0 10pt 0;
    font-size: 9pt;
    color: #333;
  }
}

登入後複製

　　顯示效果如下：