打印样式表:确定的指南

分享于 

7分钟阅读

Web开发

  繁體 雙語

介绍

打印样式表格式化网页,以便打印时,它自动以用户友好格式打印。 打印样式表已经有很多年了,已经写了很多年了。 但是很少有网站实现它们,意味着我们的网页不能正确地打印到纸上。 值得注意的是,很少有网站使用打印样式表,如下所示:

  • 极大地打印样式表,提高可用性,尤其是对于包含大量内容( 如这一页)的页面来说,
  • 它们是phenomenally快速和易于设置

有些网站确实提供了页面打印友好版本的链接,但这当然需要设置和维护。 用户在屏幕上选择打印按钮,然后在页面顶部选择打印按钮,就需要用户在屏幕上看到这个链接。 打印友好版本是在同时打印多个网页时有用的,例如跨多个网页的文章。

如何设置打印样式表

打印样式表与常规样式表的工作方式相同,只有在打印页面时才调用它。 要使它的工作,需要将以下内容插入到每个网页的顶部:

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

文件 print.css 是打印样式表,media="print" 命令意味着只有在打印网页时才会调用这个CSS文件。 对于样式表,你可以使用多种不同的媒体,比如手持电视。电视。投影 等等,请参阅这个完整的媒体类型列表( 参见参考资料)。

打印样式表中的内容

打印样式表中的CSS命令实际上在主样式表中重写CSS命令。 因这里,你需要放入打印样式表中的唯一命令是重写主样式表中的CSS命令。 这意味着你不需要重复任何颜色或者品牌CSS命令,因为它们已经从主样式表中获取。 一般而言,当用户点击打印按钮时,你会希望你的打印样式表发生以下情况:

删除不需要的项目

通常只是你的组织 logo 和页面内容,你将希望出现在网页的打印版本上。 你通常要按删除 header,左列和右列。 你可能还希望从打印版本中删除页脚( 或者其中的一些),除非它包含你的联系人详细信息。 可以能有些独立的项目不会被打印出来;你可以在HTML中简单地分配这些 class="noprint"。 要删除这些项目以及 header 和导航( 假设这些被分配给 <div id="header"><div id="nav"> ),请使用 display: none 命令:

#header, #nav,. noprint {display: none;}

你可能还希望删除某些图像和广告,特别是动画图像,因为这些图片在打印时没有意义。

设置页面格式

没有什么比打印一个网页的最后几个单词发出的最后几个单词更糟的了。 当左和右列留下时,这也是令人烦恼的( 浪费了纸张),这样网页就会打印到 15张纸上。 一般而言,你需要的三个CSS命令是:

width: 100%; margin: 0; float: none;

对于包含(。<div> 用于CSS布局,<table> 用于 table 布局) 元素应应用这些命令,以确保内容跨越纸张宽度的。 因此,完整的CSS命令可能是类似的:

#container, #container2, #content {width: 100%;margin: 0;float: none;}

更改字体?

有些打印样式表确实改变了字体大小,但这通常不是一个很好的想法。 如果用户在屏幕上增加文本大小,则文本将以较大的字体大小打印。 除非在打印样式表中指定固定字体大小。

其他打印样式表将 font-family 更改为衬线字体( 例如 Times useful Roman ),因为这在打印时更容易阅读。 无论你选择这样做还是不取决于你,用户可能会看到不同的字体打印出来。

请记住,background 图像和颜色在默认情况下不会打印出来。 因这里,你可以能希望更改文本颜色的颜色,以便它没有背景的合理颜色对比。

链接

打印通常在 black 和白色中。 因此,请确保链接具有良好的颜色对比。 如果没有,在打印输出中指定链接的颜色稍微深一点。 例如:

a:link, a:visited {color: #781351}

为了获得好处,你可以在页面上包含一个脚注,列出页面的所有 URL,每个链接都引用了它的URL,下面有一个数字。 从网页读取打印输出时,不知道链接指向哪里是不可能的。 看这个工作示例和/或者了解如何通过阅读文章,改进链接显示显示的方式来实现这一目的。

制作打印样式表

在制作打印样式表时,将打印CSS命令放置到主CSS文件的底部。 当你继续添加更多命令时,请检查你的网页是如何在计算机屏幕( 不要在现场网站上这么做)。 继续添加命令,直到你对外观满意。 然后从主CSS文件中剪切这些命令并将它们粘贴到打印样式表中。 总之,打印样式表看起来可能类似于下面这样:

/* Remove unwanted elements */#header, #nav,. noprint{
 display: none;}/* Ensure the content spans the full width */#container, #container2, #content{
 width: 100%;margin: 0;float: none;}/* Change text colour to black 
 (useful for light text on a dark background) */.lighttext{
 color: #000
}/* Improve colour contrast of links */a:link, a:visited
{
 color: #781351
}

你现在有了一个打印样式表 ! 对于这种快速而易于设置的事情,可以尽可以能多地提高可以用性。

历史记录

  • 12 2007年04月 --原始版本已经发布
  • 25 2007年05月 --项目已经移动

style  gui  DEF  GUID  print  样式  
相关文章