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

以下是一些用于获得更好打印输出的常规打印样式:

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

最上面的一个可以防止表行内部出现分页符

NoPrint是一个我用来在屏幕上显示东西的类,但不是打印出来的。

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

http://www.alistapart.com/articles/goingtoprint/ )它们涵盖了你所寻找的许多基础知识(扩展链接、粉饰等)。

不要依赖打印预览,确保在测试打印布局时完成整个过程。要节省纸张,请安装SnagIt或使用Microsoft XPS document writer。您可以直接打印到图像,而不浪费任何纸张。

另外,对于长文章,考虑将字体更改为serif。网络上的文章最容易用无衬线字体(Arial,Verdana)阅读,但用印刷体阅读,可以试试《新罗马时报》或《佐治亚时报》。

我确保在打印样式表中添加的一件事是:

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

这会将实际链接写在链接文本旁边,这样打印文档的人就知道链接应该被删除了。

我还将正文文本设置为便于打印:

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

你有这个旧的,但仍然相关 article from Eric Meyer 在单子上分开。

<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;
    }

在定义打印样式时,必须考虑纸张和物理单位。

• 以厘米(英寸)为单位设置边距,以点为单位设置字体大小(就像在OpenOffice中一样)。
• 创建一个类似“screen”或“noprint”的类,以便能够轻松删除不需要的内容
• 忘掉花哨的彩色文字吧。白色背景上的黑色文本。
• 考虑删除多余的图像——它们在黑白中可能看起来不太好
• 从链接中删除下划线,并使链接具有合理的文本。读“检查这一页”看起来很傻,其中“这”有下划线。或者,如果你把链接的href放在带下划线的文本之后,那么它可能会更有用,但看起来不太好看。