把xhtml+css页面转换成为打印机页面

《把xhtml+css页面转换成为打印机页面》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、把XHTML+CSS页面转换成为打印机页面>>edu.5151doc.教育资源库在以前，为L和CSS，你可以实现同样的效果而只用花费少得多的精力。从屏幕显示到打印效果　大多数的L标示和CSS格式将内容和表示分离开来的一个优势在于，通过更改CSS样式，你可以很轻易就把内容重新格式化。因此，创建一个打印机友好的页面就是把一个不同的CSS文件链接到相同的XHTML页面上。你可以同时把屏幕样式表和打印样式表链接到同一个XHTML文件里，所以就没有必要单独创建一个打印机友好的页面，只需要一个打印机友好的样式表就行了。当你在链接代码里加入多媒体类型的文

2、件时，这就是在告诉浏览器为了进行屏幕输出要遵循或者忽略哪些CSS的规则，而为了打印输出要使用哪些规则。下面是链接到一对CSS文件的例子：<linkrel="stylesheet"type="text/css"media="screen"href="mysite-screen.css"/><linkrel="stylesheet"type="text/css"media="print"href="mysite-print.css"/>如果需要支持老版本的浏览器，那你就必须坚持使用CSS1的媒体描述符screen和print。它们是

3、相互排斥的，因此在为屏幕显示而生成页面的时候，浏览器会忽略掉打印样式表，反之亦然。所以，每个样式表都需要包含相同的样式选择器，但是有不同的规则声明，以便为不同的输出设备分别生成页面样式。简化的CSS如果你愿意放弃照顾老版本的浏览器，并假设你的用户正在使用支持CSS2的浏览器（比如说IE5及以上版本或者Netscape6及以上版本），你可以使用新的all媒体描述符来极大地简化CSS代码。下面就是使用CSS2媒体描述符的链接的例子：<linkrel="stylesheet"type="text/css"media="all"href="m

4、ysite-all.css"/><linkrel="stylesheet"type="text/css"media="print"href="mysite-print2.css"/>这些链接几乎和前面的完全一样；不同之处在于CSS文件里包含有用于打印媒体的样式。CSS文件里同media="all"联系在一起的样式可以应用于屏幕显示、打印，以及其他所有的媒体，所以你可以把所有创建的样式都放到这个文件里。同media="print"单独联系在一起的CSS文件可以小得多，因为页面从所有的媒体文件继承了所有的样式，这就没有必要再复制打印媒体文

5、件里的这些样式了。打印媒体CSS文件里唯一需要的样式是那些为打印输出而更改或者添加页面样式。一般来说，这只不过是一些禁止显示包含有图形和导航内容的div的样式，和把主体标签以及主要div的宽度和空白设置替换成适合打印输出的设置。这个技巧能够起作用是因为所有的媒体CSS文件和打印媒体CSS文件都组合成了相同的层叠样式规则。因此，对这些CSS文件的链接顺序相当重要。所有的媒体文件链接都必须要放在打印媒体文件链接之前。下面是一些关于使用打印媒体CSS文件的提示：如果禁止某个div的显示，就要使用display:none而不能用visibility

6、:hidden。点（pt）和英寸（in）都不是用于屏幕显示的正确度量单位，但是它们是打印输出的正确度量单位。在打印媒体文件里使用的选择器要和你在所有媒体文件里使用的选择器完全相同。例如，如果你使用div#sidenav来选择所有媒体文件里id为sidenav的div，那么在打印媒体文件里使用#sidenav就可能无法成功地达到你的目的。不要忘记明确地强制替代从一个文件到另一个文件都会发生改变的规则声明。例如，如果你在所有的媒体文件里为一个元素设置了padding，并希望在打印输出里去掉这个padding，那么在打印媒体文件里加入一个忽略pa

7、dding声明的样式是不够的——你必须明确地设置padding:0pt，以取代前面的设置。如果你正在使用诸如Dreamedia="screen"。这就让你可以预览打印媒体文件里的CSS样式。不要忘了在发布你的页面之前把媒体描述符改回到media="print"。当你需要为自己的访问者提供一个打印机友好的L／CSS页面转换成为一个打印机友好的页面。[这篇文章来自..，]