在几分钟内创建定制的打印样式表

您之前已经看过它：您设计了一个漂亮的布局，有人打开打印，然后在艰苦的工作地点畏缩地走进您的办公室，这被打印机犯了很多。 网页设计的印刷版本很少是您期望的。他们需要进行一些额外的调整和一些舞台。但是，了解如何设置打印视图，以便一旦您掌握了它的内容，内容就不会太困难。 在本文中，我将向您展示如何设置样式表，以便在网站上打印您的内容。我将使用WordPress网站作为起点，因为它是一个受欢迎的框架，但是只要您应用相同的原理，它将适用于任何网站。

>快速注意：没有简单的方法使网络打印完美。您必须跳入那里，并通过要量身定制的每个元素进行工作。我首先进入页面并打印它以查看我的开始。然后，我按照我需要的东西和需要更改的内容来打破每个元素或结构性部分。这需要时间，但值得。 您需要打印版本吗？

> 在建立网站的印刷版本之前，我要问自己的第一件事是我是否需要一个。我中的细致设计师倾向于开始，在大多数情况下，我倾向于“是”。但是，通常不需要打印样式表，具体取决于您网站的性质和目的。 另外，当人们在您的网站上打印一页时，他们的目标是什么？通常，他们只是想要您的内容，仅此而已 - 他们不想要所有图形，漂亮的布局，标题，侧边栏等。 （而且，他们可能不想在不必要的元素上使用昂贵的墨水。）因此，考虑实际需要的东西。

打印注意事项

我总是将文本转换为黑色，以便打印机了解不需要阴影（这是一个大型墨水）。我也从像素的字体大小转换为点。如果您要匹配字体尺寸，这可能是一个挑战，但这是一个光滑的图表，可以帮助您快速从

> px

转换为> pt> pt>假设您有基础字体尺寸为16px： > pixels =>点

• 6px => 5pt
• 7px => 5pt
• 8px => 6pt
• 9px => 7pt
• 10px => 8pt
• 11px => 8pt
• 12px => 9pt
• 13px => 10pt
• 14px => 11pt
• > 15px => 11pt
• 16px => 12pt
• 17px => 13pt
• > 18px => 14pt
• > 19px => 14pt
• 20px => 15pt
• 21px => 16pt
• > 22px => 17pt
• 23px => 17pt
• 24px => 18pt
针对您的内容

WordPress通常具有看起来像这样的内置结构：

>标题

1. content
2. >评论
3. sidebar
4. >页脚

每个页面都有这些结构性元素，您可以轻松地使用CSS靶向。即使您的网站没有这种确切的结构，关键是为了您的目的自定义打印样式表。 使用#header在CSS中的每个结构中为这些部分使用ID或.header的部分，如果是类别。 最后，也许最重要的是，我们将使用@media Print css来定义何时正确应用某些CSS样式。 例如，要从打印样式中删除所有内容，您将在样式中做一些简单的事情。CSS： [sourcecode language =“ css”] @Media打印{ #header {display：none;} #content {display：none;} #comments {display：none;} #sidebar {display：none;} #footer {display：none;} 。 。 } [/源代码] 这适用于WordPress的20个十二个主题，并为我提供了一个很好，干净的空白板。 如果您正在努力删除Straggler元素，那么最简单的事情就是右键单击浏览器中的元素，并在源文档中找到它。 Chrome具有“检查元素”功能，该功能可直接跳到该元素的代码，因此很容易找到有问题的元素。查找ID或类定义，然后相应地定位它。 在此示例中，我们可能在印刷品中弹出了这个散乱的人。在这里，您可以看到ID： 现在，我们可以使用以下CSS来定位此元素： [sourcecode language =“ css”] ＃Contact-popup {Display：none;} [/源代码] 页面断裂

假设您要打印多个页面，打印机将您的内容分为页面。您可以告诉浏览器以避免在某些点上的页面中断。您可以在W3.org页面上的CSS中阅读所有有关页面中断的信息。简而言之，您的选择如下：

页面break-before：始终|避免 - 始终/避免在项目
• >之前避免页面中断
page-break-ferter：始终|避免 - 始终/避免在项目
• 之后的页面中断
页面破线：始终|避免 - 始终/避免在项目中间的页面中断
• >
请记住，页面断开仅适用于块内容。一个常见的示例是列表 - 您可能需要列出列表块，然后防止列表中间发生的页面中断。例外是文本，您的 can

将其定义为一个块，然后使用页面断开来更改其打印的方式，但通常文本应该流动，您可以允许浏览器找出放置位置。 >样本案例 现在我们有了空白的板岩，让我们开始添加打印时实际要显示的结构件。内容部分是一个显而易见的候选人，因此让我们将其添加回并将段落字体大小转换为点： [sourcecode language =“ css”] @Media打印{ #content P { 字体大小：11pt; 颜色：黑色; }#content img { 显示：块; 页面破坏：避免； page-break-inside：避免； } #content ul，li { 显示：块; page-break-inside：避免； } #header {display：none;} #comments {display：none;} #sidebar {display：none;} #footer {display：none;} 。 。 } [/源代码] 我删除了显示：无;内容CSS，并将我们的段落文本从14px转换为11pt。您可以浏览页面的每个元素，并自定义每个元素以使用此方法进行打印。

总结

从网络到打印可能会令人沮丧，但是 @media Print媒体查询使我们能够对打印内容的打印方式和打印方式非常有针对性。 没有真正的快捷方式。如果您需要您的网站在印刷品上看起来不错，那么您可能必须在每个元素级别上创建一个单独的CSS定义，直到完美。 >印刷样式是您标准设计过程的一部分，还是您认为它们是彻底设计的网站的额外，不错的补充？ 经常询问有关创建自定义打印样式

的问题

>创建打印样式表的重要性是什么？它使您可以控制打印时页面的外观，从而删除不必要的元素，例如导航菜单，背景颜色和广告。这不仅可以节省墨水，还可以确保打印版本的重点关注基本内容，从而使阅读和理解更容易。

在打印网页时如何隐藏某些元素？通过使用“ display：none”属性在打印样式表中打印网页时，可以隐藏特定的元素。例如，如果要隐藏导航菜单，则将目标定位为包含菜单的元素，并将其显示属性设置为无。这将确保未打印元素。

>我可以更改网页的打印版本中的字体大小和颜色吗？打印版本的网页。您可以通过针对打印样式表中的身体元素并设置所需的字体尺寸和颜色来做到这一点。如果要确保易于读取网页的印刷版本，这可能很有用。

如何创建单独的打印样式？在链接元素中使用引用样式表的链接元素中的“媒体”属性。媒体属性应设置为“打印”，表明在打印网页时应使用样式表。这使您可以为屏幕显示器提供一个样式表，而另一个则用于打印版本。

>我可以控制网页的打印版本中的页面中断吗？您可以在打印样式表中使用“ page-break-befor”和“ page-break-ffter”属性来做到这一点。这些属性允许您指定应在何处出现页面断开，从而有助于防止内容中间的尴尬中断。

>

>如何测试我的打印样式表？

您可以测试您的打印样式图通过在Web浏览器中使用“打印预览”功能。这将向您展示打印时的网页外观如何，从而使您可以对您的打印样式表进行任何必要的调整。

我可以在WebPage的打印版本中包含标头和页脚吗？是的，您可以在网页的打印版本中包含标题和页脚。您可以在打印样式表中使用“位置：修复”属性来做到这一点。这将确保标题和页脚出现在每个打印的页面上。

>如何更改用于打印的网页的布局？

您可以通过使用用于打印的网页的布局来使用您的打印样式表中的“ float”属性。这使您可以控制页面上元素的定位，以确保它们以打印时有意义的方式排列。

我可以控制网页的打印版本中的边距和填充吗？ >

是的，您可以控制网页的打印版本中的边距和填充。您可以在打印样式表中使用“边距”和“填充”属性来做到这一点。这使您能够确保您的内容在打印时的内容适当间隔且易于阅读。

我可以在网页的打印版中使用图像吗？打印版本的网页。但是，您应该注意它们在打印时的外观。您可能需要删除背景图像，并确保任何重要的图像清晰易于黑白。您可以使用打印样式表中的“显示”属性控制图像的显示。

以上是在几分钟内创建定制的打印样式表的详细内容。更多信息请关注PHP中文网其他相关文章！