CSS 打印样式表 - 示例
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12773044/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Print Style Sheets - Examples
提问by bsr
Trying to learn about how to effectively use print.css, so that graphical and navigational elements are not shown in print preview/print. Read some articles, and part of print css of html5 boilerplate. Two sites, which was quite impressive the way they change the look during print are
尝试了解如何有效地使用 print.css，以便在打印预览/打印中不显示图形和导航元素。阅读一些文章，以及 html5 样板的部分打印 css。两个网站，它们在打印过程中改变外观的方式令人印象深刻
http://bottlerocketcreative.com/
http://bottlerocketcreative.com/
But I cannot see the css related to print. Can you please point to the css they use to learn how to do similar transformation.
但是我看不到与打印相关的 css。您能否指出他们用来学习如何进行类似转换的 css。
回答by tw16
I have had a look at the sites you linked to and they do not appear to have any print styles associated with them. I believe they are using the browsers default print settings. So one of the big changes is background images being hidden default. For CSS-Tricks, the reason it might look so different is because it uses media queries. So if you narrow your browser to 800px or less, you will see that the list of posts expand to the full width of the browser as they do when the document is printed.
我查看了您链接到的站点，它们似乎没有任何与之相关的打印样式。我相信他们正在使用浏览器的默认打印设置。所以最大的变化之一是背景图像被默认隐藏。对于 CSS-Tricks，它看起来如此不同的原因是因为它使用了媒体查询。因此，如果您将浏览器缩小到 800 像素或更小，您会看到帖子列表扩展到浏览器的整个宽度，就像打印文档时一样。
However in general, print styles are either set using a media tag in your existing stylesheet:
但是一般来说，打印样式要么使用现有样式表中的媒体标签设置：
@media print{
/*styles here*/
}
or linking to a stylesheet specifically for print purposes:
或链接到专门用于打印目的的样式表：
<!--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">
