11.4 利用CSS样式打印
利用CSS样式打印是经常使用的一种打印方法，利用它可以非常方便的实现打印页面中的指定内容和分页打印，下面将通过具体实例介绍如何利用CSS样式打印。
实例302 利用CSS样式打印页面中的指定内容
实例说明
普通的Web打印，将会打印页面中的全部内容，但在开发实际网站时，通常只需要打印页面中指定的内容，为了解决该问题，可以应用CSS样式对打印内容进行控制。运行本实例，单击“打印”超级链接即可按用户的设置进行打印。实例运行结果如图11.14、图11.15所示。
图11.14 利用CSS样式打印页面中的指定内容
图11.15 打印预览效果
技巧：在进行Web打印时，可以通过以下操作控制是否打印背景颜色和图像。在IE窗口中，选择“工具”→“Internet选项”选项，在弹出的 “Internet选项”对话框中，选择“高级”选项卡，在“设置”列表中设置“打印背景颜色和图像”前面的复选框是否选中，如果选中，代表打印背景颜色和图像，否则不打印背景颜色和图像。
技术要点
本实例主要应用了CSS样式的media类型。下面进行详细介绍。
media类型是CSS属性媒体类型，用于直接引入媒体的属性。其语法格式如下：
@media screen | print | projection | braille | aural | tv | handheld | all
参数说明
l screen：指计算机屏幕。
l print：指用于打印机的不透明介质。
l projection：指用于显示的项目。
l braille：盲文系统，指有触觉效果的印刷品。
l aural：指语音电子合成器。
l tv：电视类型的媒体。
l handheld：指手持式显示设备。
l all：用于所有媒体。
实现过程
（1）编写用于控制指定内容不打印的CSS样式，代码如下：
<style>
@media print{
div{display:none}
.bgnoprint{
background:display:none;
}
.noprint{
display:none
}
}
</style>
（2）为不需要打印的元素设置CSS样式，关键代码如下：
<table width="757" height="174" border="0" align="center"cellpadding="0"
cellspacing="0">
<tr class="noprint">
<td height="133" align="center" valign="top">
<img src="/Images/top.jpg" width="757" height="133"></td>
</tr>
…… //此处省略了其他HTML代码，具体代码请参见光盘
举一反三
根据本实例，读者可以：
实现打印库存明细；
实现打印库存数量达到预警线的库存商品信息。
实例303 利用CSS样式分页打印
实例说明
在制作数据打印程序时，对于多页数据（指的是一页纸不能全部打印完毕的数据）通常采用分页打印。这里的分页打印是指在每一页数据的顶端都打印表头信息。下面将通过具体实例介绍如何利用CSS样式实现分页打印。运行本实例，如图11.16所示，单击“打印预览”超级链接，可以查看打印效果，如图11.17所示，单击“打印”超级链接即可进行分页打印。
图11.16 利用CSS样式分页打印
图11.17 打印预览效果
技术要点
本实例主要应用了thead标记、tfoot标记和page-break-after属性。下面进行详细介绍。
（1）thead标记
thead用于设置表格的表头。
（2）tfoot标记
tfoot用于设置表格的表尾。
（3）page-break-after属性
page-break-after属性在打印文档时发生作用，用于进行分页打印。但是对于<br>和<hr>对象不起作用。
语法：
page-break-after：auto | always | avoid | left | right | null
参数说明
l page-break：打印时在样式控制的对象前后换页。
l after：设置对象后出现页分割符。设置为always时，始终在对象之后插入页分割符。
l auto：在对象之后自动插入页分割符。
l always：始终在对象之后插入页分割符。
l avoid：未支持。避免在对象后面插入分割符。
l left：未支持。在对象后面插入页分割符，直到它到达一个空白的左页边。
l right：未支持。在对象后面插入页分割符，直到它到达一个空白的右页边。
l null：空白字符串。取消了分割符设置。
实现过程
（1）在要打印的页面中添加用于显示客户信息的表格，并设置好表头、表尾及打印分页，关键代码如下：
<table width="650" border="1" cellpadding="0" align="center" cellspacing="0"
bgcolor="#FE7529" id="pay" bordercolor="#FE7529" bordercolordark="#FE7529"
bordercolorlight="#FFFFFF" style="border-bottom-style:none;">
<!--设置表头-->
<thead style="display:table-header-group;font-weight:bold">
<tr align="center" bgcolor="#FE7529">
<td width="155" height="30">客户名称</td>
<td width="99">电话</td>
<td width="59" >联系人</td>
<td width="84">联系人电话</td>
<td width="175">E-mail</td>
<td width="64">所在地区</td>
</tr>
</thead>
<tr>
<td height="30" bgcolor="#FFFFFF">采虹**集团</td>
<td width="99">电话</td>
<td width="59" >联系人</td>
<td width="84">联系人电话</td>
<td width="175">E-mail</td>
<td width="64">所在地区</td>
</tr>
<tr>
<td height="30" bgcolor="#FFFFFF">吉林省明日科技有限公司</td>
…… //此处省略了显示客户其他信息的HTML代码
</tr>
<tr>
<!--控制分页-->
<td height="30" bgcolor="#FFFFFF" style="page-break-after:always">鑫***有限公司</td>
…… //此处省略了显示客户其他信息的HTML代码
</tr>
<tr>
<td height="30" bgcolor="#FFFFFF">东西南北***通讯公司</td>
…… //此处省略了显示客户其他信息的HTML代码
</tr>
<tr>
<td height="30" bgcolor="#FFFFFF">明*有限责任公司</td>
…… //此处省略了显示客户其他信息的HTML代码
</tr>
<!--设置表尾-->
<tfoot style="display:table-footer-group; border:none;"><tr><td></td></tr></tfoot>
</table>
（2）控制“打印”和“打印预览”超级链接在打印时不显示。关键代码如下：
<style>
@media print{
.noprint{display:none}
}
</style>
<table width="647" align="center" class="noprint">
<tr align="center" bgcolor="#FFFFFF">
<td height="27" colspan="3" align="right">
<a href="#" onClick="document.all.WebBrowser.Execwb(7,1)">打印预览</a>
<a href="#" onClick="document.all.WebBrowser.Execwb(6,1)">打印</a>
<a href="#" onClick="document.all.WebBrowser.Execwb(8,1)"></a> </td>
</tr>
</table>
举一反三
根据本实例，读者可以：
实现打印库存明细；
实现打印库存数量达到预警线的库存商品信息。