CSS打印樣式表 - 示例

嘗試瞭解如何有效使用print.css，以便在打印預覽/打印中不顯示圖形和導航元素。閱讀一些文章，以及html5樣板文件的一部分。兩個網站，這是相當可觀的，他們改變打印過程中的樣子是CSS打印樣式表 - 示例

http://css-tricks.com/

http://bottlerocketcreative.com/

但我不能看到與打印相關的CSS。你能指出他們用來學習如何做類似轉換的CSS。

來源

2012-10-07 bsr

的http：// getfirebug .com/css –

感謝Kevin，我使用了Chrome開發者工具並且搜索了打印和相關內容。將再試一次。 – bsr

我的歉意，我無法找到他們的（CSS技巧）打印CSS。 –

我看了一下你鏈接的網站，他們似乎沒有任何關聯的打印樣式。我相信他們正在使用瀏覽器的默認打印設置。所以其中一個重大變化是隱藏的背景圖像默認。對於CSS技巧，它看起來如此不同的原因是因爲它使用媒體查詢。因此，如果您將瀏覽器縮小到800像素或更少，您將看到文章列表展開到瀏覽器的整個寬度，就像他們在打印文檔時一樣。

一般

然而，打印樣式使用的是媒體標籤在你現有的樣式表或者設置：

@media print{ 
    /*styles here*/ 
}

或鏈接到一個樣式表專門用於打印目的：

<!--These styles styles are only for screens as set by the media value--> 
<link rel="stylesheet" href="css/main.css" media="screen"> 

<!--These styles styles are only for print as set by the media value--> 
<link rel="stylesheet" href="css/print.css" media="print">

來源

2012-10-07 22:01:37 tw16

+1好，我也看到它縮小屏幕時非常接近打印佈局。感謝您的幫助，如果沒有更多的相關答案，將接受。 – bsr

CSS打印樣式表 - 示例

回答

相關問題