5

我知道的

现在我知道如何在网页中添加打印样式表来设计打印布局。它类似于：

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

但我不想那样。

在此博客中，转到任何文章或帖子并打印预览页面（使用谷歌浏览器）。现在，如果您向下浏览页面（在保存 PDF 模式下），您将看到附加的额外文本（此故事最初发表于 Digital Inspiration.. ..此打印机友好版本仅供您个人和非商业用途使用) . 仅当您打印（-preview）时才能看到该消息，而不是通常在网页上。

我试图找出的

当我查看页面的页面源时，只有两个样式表附加，一个是主样式表，一个是 webfont 样式表。对于 JavaScript，只附加了一个主要的 JavaScript 文件，其余的用于 webfont、CSS3 MediaQueries、HTML5-Shiv 和我不怀疑包含任何印刷相关内容的广告。当我尝试查找那些主要的 CSS 和 JavaScript 文件（带有CTRL-功能）时，对打印机友好F的搜索没有匹配任何内容。

我没有尝试过的

我没有问过网站所有者他是怎么做到的，也没有去问；）

问题

他是怎么做到的？这里涉及 JavaScript 吗？还是CSS？在 [noscript] 标记中，该标记内的文本仅在用户禁用 javascript 时才会显示。打印有什么相同的吗？[onlyonprint] 标签之类的东西？

4

2 回答 2

5

他正在使用:after伪元素：

#content:after {
    content: "This story was originally published at Digital Inspiration...";
    font-size: 90%;
    font-style: italic;
    line-height: 1.5em;
    margin: 3em 0;
}

这存在于他的打印样式表中。

于 2012-05-20T03:58:29.467 回答
0

您可以使用伪元素:after或:before将文本附加到打印样式表上，或者简单地将元素添加到您的页面中display: none;并将其更改display为block打印样式表上。

于 2012-05-20T04:01:54.197 回答