css控制列印內容的樣式

使用css也可以控制印表機對頁面的列印樣式，當然規則有些許不同。

下面就簡單介紹一下它的相關規則，需要的朋友可以做一下參考，如果想要熟練操作，當然要實際應用了。

一.專門為列印指定樣式:

[CSS] 純文字檢視 複製程式碼
/* 樣式將只應用於列印 */
@media print {
  /*code*/
}

關於媒體查詢可以參閱css3 Media Queries媒體查詢一章節。

當然我們也可以從外部引入專門針對印表機的css樣式，程式碼如下:

[CSS] 純文字檢視 複製程式碼
<link rel="stylesheet" type="text/css" href="css/print.css" media="print" />

再來看如下程式碼:

[CSS] 純文字檢視 複製程式碼
/*白紙黑字*/
@media print {
  body {
    color: #000;
    background: #fff;
  }
}

上面可以設定列印內容ewing白紙黑字。

通常我們不是在建立整個網頁的截圖,只是為了展現一個設計良好的網站相關內容:

[CSS] 純文字檢視 複製程式碼
/*去除背景圖片, 節約筆黑 */
h1 {
  color: #fff;
  background: url(banner.jpg);
}
@media print {
  h1{
    color: #000;
    background: none;
  }
  nav, aside {
    display: none;
  }
}

為了使印表機更具效率,應只顯示主體內容,去除頁首頁尾導航欄 

[CSS] 純文字檢視 複製程式碼
@media print {
  h1 {
    color: #000;
    background: none;
  }
  nav, aside {
    display: none;
  }
  
  body, article {
    width: 100%;
    margin: 0;
    padding: 0;
  }
  @page {
    margin: 2cm;
  }
}

二.對於連結的處理:

列印的時候，並不能夠將連結展示出來，並不能夠像使用正常瀏覽器一樣，使用滑鼠點選就可以訪問。

但是我們可以通過別的途徑進行以下彌補，具體可以參閱css列印如何處理連結地址一章節。

三.控制列印設定選項:

@page規則允許您指定頁面的各個方面。例如將要指定頁面的尺寸、頁邊距和頁首頁尾等都是非常重要的。

這裡不多介紹了，具體可以參閱css利用@page規則控制列印設定選項一章節。