CSS打印样式表 - 示例 [英] CSS Print Style Sheets - Examples

问题描述

尝试了解如何有效地使用print.css，以便图形和导航元素不会显示在打印预览/打印中。阅读一些文章，和html5样板的print css的一部分。两个网站，在打印过程中改变外观的方式令人印象深刻：

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

http://css-tricks.com/

http://bottlerocketcreative.com/

但我看不到与打印相关的css。你可以指向他们用来学习如何做类似的转换的CSS。

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-Tricks，它可能看起来如此不同的原因是因为它使用媒体查询。因此，如果您将浏览器缩小到800像素或更小，您将看到帖子列表扩展到浏览器的整个宽度，就像打印文档时一样。

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.

但是，一般来说，在现有样式表中使用媒体标记设置打印样式：

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">

这篇关于CSS打印样式表 - 示例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！