为打印输出创建一个CSS样式-HTML教程-爱易网页

为打印输出创建一个CSS样式

日期：2014-03-28　浏览次数：20836 次

　　有的时候，你可以不必在你的Web站点上创建一个独立的与打印相关的页面。

　　大多数的Web页面都显示在电脑屏幕上，人们通过屏幕观看，但是，有时候用户想要将一些网上的内容打印出来，这就需要与打印媒体连接起来。由于原来采用的是能让Web页面在屏幕上显示的效果很好的那种格式，但在打印时效果并不那么好，Web创建者们通常都会创建一些独立的页面，这些页面与打印机联系紧密，而用户也需要经常打印这些页面。但如果你使用了XHTML标记和CSS，你就没必要再创建一个独立的与打印机相连接的页面了，你仅仅只需要几种CSS样式来将需打印的页面的内容进行格式化，以便于打印输出就行了。

　　以良好的标记开头

　　XHTML和CSS有一种特殊的功能，即内容与表述是各自独立的；你可以随意将其格式改成另一种媒体形式，而不必改变它的内容，也不必改变它的基本标记。不过为了使这一想法能在实践中成为可能，你应该让你的结构标记好一点，干净整洁一点。因此，在你准备用CSS创建一个与打印机相连的页面之前，要仔细看看它的XHTML标记。

　　清除该标记中所有的内嵌样式以及其它固有的表述格式。为了让该打印媒体的CSS文件能发挥应有的作用，所有的样式和格式都必须由它自带的样式表来决定，而不是由它的标记中的格式来决定。同样，将页眉中所有的CSS样式移走，将它们存入一个外部样式表中，这个表是附在（连接在或被输入）该XHTML文档中的。

　　检查标记的时候，你要确定它的内容都是按逻辑分组的，分成了一个个的div，而且每一个div都是通过其ID或类别来鉴别。

　　第一步：添加一个打印样式表

　　用CSS创建一个与打印机密切联系的页面的第一步，是将打印媒体的CSS文件附加到你的XHTML文档中。与下面两个独立的CSS文件相比，我更倾向于使用XHTML页眉中的链接，这两个文件，一个是有关所有媒体的（或者屏幕媒体），另一个是有关打印媒体的。该链接看起来与下面这些有点相似：

　　第二步：设置颜色和字体

　　在屏幕上，那些有色文本，多彩的颜色，以及纹理清晰的背景看起来比较宜人，但是如果是在一张由一台黑白打印机打印出来的纸张上，可能就不那么好了。在这种情况下，通常是简单的黑底白字更好看一些。

　　通常设计师们会在主体标签选择器中设定默认背景和文本颜色。这个选择器还设置默认字体外形和大小，如下所示：

　　body {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
background-color: maroon;
color: silver;
}

　　为了使这种样式与打印机之间配合更好一些，你要将颜色改为白色背景黑色字体，还要设置基本的字体大小。主要的样式像下面这样：

　　body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
background-color: white;
color: black;
}

　　注意一下，在打印样式表中，字体大小是以点（pt）来计的。如果要指定屏幕显示度量单位的话，象素比点和英尺更合适，而在打印中，情况却恰好相反，人们采用的往往是前者。

　　另一方面，许多人建议使用一种有衬线的字体来取代人们在屏幕上广泛使用的无衬线字体，我个人觉得这是一种逐项设计，因此，我不会自动转换每个打印样式表中的字体。

　　第三步：链接的样式

　　对于打印输出中的链接的处理，存在着两种不同的看法，两者各成一派。一种看法是，链接在纸张上并不发挥作用，因此，应该对它们进行一番设计，就像设计文本中其它部份一样。另一种看法则认为，链接对于一个Web的结构来说至关重要，正由于它的重要性，在打印文本中，它应该清楚可见。

　　如果不考虑你的设计意图，不管你是想突出链接还是让它掺入到文本中，有一件事是无可置疑的，那就是你要改变普通的Web页面和打印版之间的链接的样式。由于普通链接与已访问链接之间并没有什么区别，这样你就可以将那两个选择器合并起来，就像这样：

　　a:link,a:visited {
color: #3333CC;
text-decoration: underline;
font-weight: bold;
}

　　这个盒子将链接设为深蓝色（在黑白打印机上则显示为深灰色），粗体，有下划线，这也是链接的一种最普通的无格式样式，即白色背景上的黑色文本。

　　第四步：隐藏导航栏和工具条

　　设计师们设计一种与打印机联系紧密的页面的目的之一在于，要通过消除主要页面内容之外的那些东西，包括导航栏，广告，工具条等。

　　在输出中，导航按纽并不起什么作用；而那些广告也并没有点击进入功能，至于工具条，它为用户提供一些相关信息之间的链接，以此让页面内容更丰富，不过在打印输出时，往往会适得其反，造成不必要的混乱。

　　要想将这些因素从该页面中排除掉，关键在于在标记中将它们分隔开来，将它们分成一个个独立的，但可分辨的div。例如，可以将导航栏分在一个名为navbar的div中，样式如下：

　　div#navBar{
margin: 0 79% 0 0;
padding: 0px;
background-color: #eeeeee;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}

　　你可以用以下的CSS，在该页面中隐藏那个div的内容：

　　div#navBar {
display: none;
}

　　在与打印机相连接的页面中，你可以用同样的方法来移动广告，工具条，页眉，页脚，动画，多余的图片，以及其它一些不重要的部份。

　　第五步：设置宽度和页边空白

　　隐藏了那些不重要的部份之后，就该设计一下余下的内容了，这样才能让它更便于打印。通常，主要内容都在一个div里面，可能已被设计好了，这样它就能与其它一些诸如导航栏和工具条的元件和平共处，共同分享一个屏幕了。

　　div#content{
width: 75%;
margin: 10px;
padding: 10px 15px;
}

　　由于该页面中其它那些元件都已经被排除了，现在我们所要做的，就是设置打印页面中的div，就像这样：

　　div#content{
width: 100%;
margin: 0pt;
padding: 0pt;
}

　　设置宽度：100%，这种设置会填充页面上可以打印的部分。当然，你还可以有其它选择，你可以设一个特定的宽度（以英寸），然后采用页边空白和填料，这样，你就可以更好地控制打印输出，不过，如此一来，你就需要仔细考虑，小心测试，以确保你的设置对大多数打印机都有效。

　　第六步：让内容不可浮动

　　有些浏览

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

为打印输出创建一个CSS样式

相关资料更多>

推荐阅读更多>