隱藏我的網頁上的一個元素，當用戶將打印它

Question

我的網站的模板看起來相當不錯，當打印時，所以我沒有單獨的打印CSS。

然而，頂部有一個元素在打印時不需要，高約2英寸，因此在打印頁面的頂部有點浪費（imho會將用戶從實際內容中分散出來）

所以，我想要完成的是當用戶打印頁面時，隱藏頁面頂部的元素（div）。

但到目前爲止，我見過的唯一解決方案是創建一個單獨的css文檔，然後在用戶打印我的頁面時使用它。這聽起來不錯，但我現在必須保持2個不同的樣式表與完全相同的內容（除了一個div）嗎？

或者是否有可能重寫打印樣式表中的標準樣式表？ （所以我只需要定義例外在我的打印樣式表，一個DIV？）

希望這說明我的問題.....

Answer 1

如果你宣佈你的主樣式表適用於所有媒體（browsers apply it to all by default）：

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

然後添加打印樣式表不應該要求你在兩個CSS FIL重複的樣式es：

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

您只需將特定打印樣式添加到print.css即可。

但是，如果你想保持一個樣式表，並有一個樣式表中特定的打印覆蓋，您可以將規則在打印介質的規則：

@media print { 
    div.do-not-print { 
     display: none; 
    } 
} 

Answer 2

我想這是你問VOR：overriding the standard css in your print style