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

ourjs發表於2015-02-06
CSS

　　大多數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;
  }
}

　　顯示效果如下：

　　注* 此文整理自:Tips And Tricks For Print Style Sheets　和　Designing For Print With CSS　和　css3 page 規範

相關文章