将XHTML CSS页面转换为打印机页面
发布时间：2020-03-15 18:43:29 所属栏目：编程 来源：站长网
导读：在早年，为Web页面建设一个打印机友爱的版本意味着要计一律个机关和名目都颠末修改的单独页面，这样才气够在打印的时辰得到令人满足的结果。此刻，通过行使布局化的XHTML和CSS，你可以实现同样的结果而只用耗费少得多的精神。 从屏幕表现到打印结果 大大都
|
在早年，为Web页面建设一个打印机友爱的版本意味着要计一律个机关和名目都颠末修改的单独页面，这样才气够在打印的时辰得到令人满足的结果。此刻，通过行使布局化的XHTML和CSS，你可以实现同样的结果而只用耗费少得多的精神。 从屏幕表现到打印结果 大大都的Web页面都是计划合用于在计较机屏幕上寓目标。然而，有的时辰用户必要将某些页面打印出来，大概就是为了保存一个恒久的记录，可能将其用作利便的离线参考资料。 此刻的贫困是，让Web页面在计较机彩色屏幕上看起来引人注目和花团锦簇的许多特征，都无法在打印版的Web页面上示意出沟通的结果——尤其当打印机是利害的时辰。在被降级为灰度打印的时辰，彩色的组合会失去（原有的）比拟结果；图形会看起来失真，并且淹灭太长的打印时刻；在Web页面上起着重要浸染的导航按钮在打印页面上也毫无用处。 为了降服这些题目，Web的建设者经常会为页面专门计一律个打印机友爱的版本，这样会见者就有打印的欲望。打印机友爱的版本凡是都包罗有和首要Web页面沟通的内容，可是会省略掉大大都的图形、配景和导航元素。页面还会把彩色转换成某种情势，以便天生可以或许让人接管的灰度图像。 CSS的办理方案 行使布局化的XHTML标示和CSS名目将内容和暗示分分开来的一个上风在于，通过变动CSS样式，你可以很等闲就把内容从头名目化。因此，建设一个打印机友爱的页面就是把一个差异的CSS文件链接到沟通的XHTML页面上。 你可以同时把屏幕样式表和打印样式表链接到统一个XHTML文件里，以是就没有须要单独建设一个打印机友爱的页面，只必要一个打印机友爱的样式表就行了。当你在链接代码里插手多媒体范例的文件时，这就是在汇报赏识器为了举办屏幕输出要遵循可能忽略哪些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。它们是彼此排出的，因此在为屏幕表现而天生页面的时辰，赏识器会忽略掉打印样式表，反之亦然。以是，每个样式表都必要包括沟通的样式选择器，可是有差异的法则声明，以便为差异的输出装备别离天生页面样式。 简化CSS 假如你乐意放弃照顾老版本的赏识器，并假设你的用户正在行使支持CSS2的赏识器（好比说IE5及以上版本可能Netscape6及以上版本），你可以行使新的all媒体描写符来极大地简化CSS代码。 下面就是行使CSS2媒体描写符的链接的例子： 以下为引用的内容： <linkrel="stylesheet"type="text/css"media="all"href="mysite-all.css"/> <linkrel="stylesheet"type="text/css"media="print"href="mysite-print2.css"/> 这些链接险些和前面的完全一样；差异之处在于CSS文件里包括有效于打印媒体的样式。 CSS文件里同media="all"接洽在一路的样式可以应用于屏幕表现、打印，以及其他全部的媒体，以是你可以把全部建设的样式都放到这个文件里。同media="print"单独接洽在一路的CSS文件可以小得多，由于页面从全部的媒体文件担任了全部的样式，这就没有须要再复制打印媒体文件里的这些样式了。 打印媒体CSS文件里独一必要的样式是那些为打印输出而变动可能添加页面样式。一样平常来说，这只不外是一些榨取表现包括有图形和导航内容的div的样式，和把主体标签以及首要div的宽度和空缺配置替代成得当打印输出的配置。 这个能力可以或许起浸染是由于全部的媒体CSS文件和打印媒体CSS文件都组合成了沟通的层叠样式法则。因此，对这些CSS文件的链接次序相等重要。全部的媒体文件链接都必必要放在打印媒体文件链接之前。 下面是一些关于行使打印媒体CSS文件的提醒： 假如榨取某个div的表现，就要行使display:none而不能用visibility:hidden。 点（pt）和英寸（in）都不是用于屏幕表现的正确怀抱单元，可是它们是打印输出的正确怀抱单元。 在打印媒体文件里行使的选择器要和你在全部媒体文件里行使的选择器完全沟通。譬喻，假如你行使div#sidenav来选择全部媒体文件里id为sidenav的div，那么在打印媒体文件里行使#sidenav就也许无法乐成地到达你的目标。 不要健忘明晰地逼迫更换从一个文件到另一个文件城市产生改变的法则声明。譬喻，假如你在全部的媒体文件里为一个元素配置了padding，并但愿在打印输出里去掉这个padding，那么在打印媒体文件里插手一个忽略padding声明的样式是不足的——你必需明晰地配置padding:0pt，以代替前面的配置。 假如你正在行使诸如Dreamweaver这样的图形编辑器，你就可以预览天生页面的屏幕结果，而不是打印输出的结果。要在Dreamweaver的计划（Design）查察窗里预览打印样式，就要把到打印媒体CSS文件的链接改成media="screen"。这就让你可以预览打印媒体文件里的CSS样式。不要忘了在宣布你的页面之前把媒体描写符改回到media="print"。 当你必要为本身的会见者提供一个打印机友爱的Web页面，你不再必要为原有的页面建设一个单独的版本。添加一个对带有media="print"媒体描写符的CSS样式表的链接，就可以或许把任何XHTML／CSS页面转换成为一个打印机友爱的页面。 （编辑：湖南网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
站长推荐
热点阅读