CSS打印样式表-示例

Question

我正在尝试学习如何有效地使用print.css，以便在打印预览/打印中不显示图形和导航元素。阅读了一些文章，还查看了html5 boilerplate的一部分打印css。两个网站，在打印时改变外观的方式令人印象深刻。

http://css-tricks.com/

http://bottlerocketcreative.com/

但我看不到与打印相关的CSS。你能指出他们使用的CSS，让我学习如何进行类似的转换吗？

- bsr

---

谢谢Kevin，我使用Chrome开发者工具并搜索了打印及相关内容。我会再试一次。 - bsr

非常抱歉，我也无法找到他们（css-tricks）的打印CSS。 - Kevin Boucher

CSS技巧实际上并没有太多变化。去掉所有背景图片和颜色，你会发现它基本上是一样的。 - Madara's Ghost

很好。由于我不是网页开发人员，所以我在CSS方面遇到了困难。我正在努力掌握JavaScript，并且迄今为止只使用了最少量的CSS（Bootstrap也很有帮助 :-)）。如果您有任何建议，将不胜感激。 - bsr

Answer 1

我已经查看了您提供的网站，它们似乎没有与之相关联的打印样式。我相信它们正在使用浏览器默认的打印设置。因此，其中一个重大变化是默认隐藏背景图像。对于CSS-Tricks而言，它看起来非常不同的原因在于它使用了媒体查询。因此，如果您将浏览器缩小到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">

- tw16

---

+1 很棒，我也发现当屏幕变窄时，它非常接近打印布局。感谢您的帮助，如果没有更相关的答案，我会接受它。 - bsr