CSS實現不同的列印和螢幕顯示結果

通常的web頁面中，我們要求列印結果和顯示結果一樣，但在一些報表或業務系統中，我們可能只需要列印頁面中的一部分內容，例如我只要列印資料，但按鈕和背景不需要列印，這是由業務需求決定的，我們可以想象一下，如果一張列印出來的發票中出現一個按鈕，你會怎麼想，估計要昏過去的，呵呵~~

好了，說完需求，我來說說如何?，一種方法是為螢幕顯示和列印分別準備一個css檔案，如下所示：

用於螢幕顯示的css：

<link rel="stylesheet" href="css/mainstylesheet.css" media="screen" />

用於列印的css：

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

注意，這兩個css是放在一個web頁面裡面的。

還有一種是import方式：<style type="text/css">
    @import url("css/printstylesheet.css") print;
</style>

最後一種寫法是可以直接把螢幕顯示樣式和列印樣式寫在一個css檔案中：  @media print {}{
    h1 {
      color: black;
    }
    h2 {}{
      color: gray;
    }
  }

@media print裡面的內容只對列印出來的內容有效，之外的內容就是螢幕顯示的樣式。