CSS：@media 打印没有外部 css 文件？答案

【问题标题】：CSS: @media print without external css file?CSS：@media 打印没有外部 css 文件？
【发布时间】：2013-10-23 05:05:21
【问题描述】：

我想在css下以特定方式打印一个html页面。但是所有@media 打印示例似乎都有一个外部 .css 文件，我希望能够在没有外部文件的情况下做到这一点，这意味着不会有链接 rel 标签：

 <LINK REL="stylesheet" MEDIA="print...

我该怎么做？

【问题讨论】：

标签： html css printing styles media

【解决方案1】：

我建议使用外部样式表，但如果您真的愿意，您可以在与 HTML 相同的页面上执行此操作，这样的示例就是这样，

HTML / CSS

<!DOCTYPE html>
<html>
    <head>
         <style>
              @media print {

                   /* changes the display property to none on all 
                      p elements when printed */
                   p { display: none}
              }
         </style>
    </head>
    <body>
         <p>I'm here when the page isn't printed</p>
    </body>
</html>

【讨论】：

这不起作用，我猜我需要添加类似：
不，这应该可以工作，style 标签不需要任何属性，它只是声明我们正在用 CSS 编写，@media print {} 应该可以工作。确保这是要加载的最后一点 CSS。
好的，我会玩一玩。 css 会在打印预览中呈现吗？
是的 CSS 在打印预览中呈现，使用 @media print 将允许您在打印或打印预览时向元素添加/更改样式。

【解决方案2】：

在 CSS 样式块中使用 @media print 查询：

<style>
@media print {
   /* print css here */
}
</style>

【讨论】：

是的，这对我不起作用，我一定做错了，它在正确的元素之内，就像上面的 Mitchell Layzell 一样。
@like-a-trainee 你能报告你在哪个浏览器和版本下尝试过吗？

【解决方案3】：

确保您的结束样式标记 () 在 @media 打印查询的末尾和结束标记之间有一个空格。像这样：

@media print {
      stuff {more stuff;}
} </style>

右大括号，空格，然后是结束标记。

【讨论】：