好规则设置的打印css?[关闭]

Question

我在寻找任何建议/规则/指南，使得一个体面的打印css当一个网页印刷。你有任何提供？

Answer 1

以下是一些用于获得更好打印效果的常规打印样式：

/* Print styles */
@media print 
{
    tr, td, th {page-break-inside:avoid}
    thead {display:table-header-group}
    .NoPrint {visibility:hidden; display:none}
    a {color:#000000}
}

最上面一个可以防止表格行中的分页符

thead样式使thead标记中的任何行重复表格所跨越的每个页面。

NoPrint是我用来在屏幕上显示内容的类，但不是用于打印。

而且，我喜欢关闭链接颜色。

Answer 2

我确保放入打印样式表中的一件事是：

a[href^="http://"]:after{
    content: " (" attr(href) ") ";
}

这会在链接文本旁边写下实际链接，这样打印文档的人就会知道该链接是假设的。

我还将我的正文设置为更具可读性：

body{
    font: 0.9em/1.5em Georgia, "Times New Roman", Times, serif;
}

Answer 3

首先阅读A List Apart中的这篇文章（ http://www.alistapart.com/articles/ goingtoprint / ）。它们涵盖了您正在寻找的许多基础知识（扩展链接，粉刷等）。

不要依赖打印预览，确保在测试打印版面时完成整个过程。要节省纸张安装SnagIt或使用Microsoft XPS文档编写器。您可以直接打印到图像而不会浪费任何纸张。

对于长篇文章，请考虑将字体更改为serif。网上的文章最容易阅读sans-serif（Arial，Verdana），但在印刷版中试用Times New Roman或Georgia。

Answer 4

你有一份旧的但仍然相关的 Eric Meyer的文章。

重点是重新开始，明确地设置边框和边缘/填充为0，白色背景和“display none”。任何非必要的打印元素（如某些菜单）

<link rel="stylesheet"
   type="text/css"
   media="print" href="print.css" />

body {
    background: white;
    }

#menu {
    display: none;
    }

#wrapper, #content {
    width: auto; 
    margin: 0 5%;
    padding: 0; 
    border: 0;
    float: none !important;
    color: black; 
    background: transparent;
    }

从那里开始。

Answer 5

当你定义的风格印花，你必须认为在一张纸上以及在物理单位。

• 设定的利润厘米(英寸)和字体大小点(就像在OpenOffice).
• 创建一个类似'屏幕上'或'noprint'能够很容易去除不需要的 材料。
• 忘了彩的文本。黑色文本上白色的背景。
• 想想除去多余的图像--他们可能看起来不良好在黑色和白色的
• 除去强调的链接，链接有理智的文本。它看起来愚蠢的阅读"检查网页"，在"这个"加下划线。或如果你把href的链路后，下划线的文字，然后它可以更加有用，但看起来不太好恕我直言。

Answer 6

注意背景图像和颜色。我认为IE的默认行为不是打印背景图像或颜色。