• 欢迎访问搞代码网站,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站!
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏搞代码吧

把XHTML/CSS页面转换成为打印机页面_css

css 搞代码 7年前 (2018-06-10) 169次浏览 已收录 0个评论

在以前,为Web页面创建一个打印机友好的版本意味着要设计一个布局和格式都经过修改的单独页面,这样才能够在打印的时候获得令人满意的效果。现在,通过使用结构化的Xhtmlcss,你可以实现同样的效果而只用花费少得多的精力。
 
从屏幕显示到打印效果

大多数的Web页面都是设计适用于在计算机屏幕上观看的。然而,有的时候用户需要将某些页面打印出来,也许就是为了保留一个长期的记录,或者将其用作方便的离线参考资料。

现在的麻烦是,让Web页面在计算机彩色屏幕上看起来引人注目和五彩缤纷的很多特性,都无法在打印版的Web页面上表现出相同的效果――尤其当打印机是黑白的时候。在被降级为灰度打印的时候,彩色的组合会失去(原有的)对比效果;图形会看起来失真,而且耗费太长的打印时间;在Web页面上起着重要作用的导航按钮在打印页面上也毫无用处。

为了克服这些问题,Web的创建者常常会为页面专门设计一个打印机友好的版本,这样访问者就有打印的欲望。打印机友好的版本通常都包括有和主要Web页面相同的内容,但是会省略掉大多数的图形、背景和导航元素。页面还会把彩色转换成某种形式,以便生成能够让人接受的灰度图像。

CSS的解决方案

使用结构化的XHTML标示和CSS格式将内容和表示分离开来的一个优势在于,通过更改CSS样式,你可以很轻易就把内容重新格式化。因此,创建一个打印机友好的页面就是把一个不同的CSS文件链接到相同的XHTML页面上。

你可以同时把屏幕样式表和打印样式表链接到同一个XHTML文件里,所以就没有必要单独创建一个打印机友好的页面,只需要一个打印机友好的样式表就行了。当你在链接代码里加入多媒体类型的文件时,这就是在告诉浏览器为了进行屏幕输出要遵循或者忽略哪些CSS的规则,而为了打印输出要使用哪些规则。

下面是链接到一对CSS文件的例子:

<link rel=”stylesheet” type=”text/css” media=”screen” href=”mysite-screen.css”
/>
<link rel=”stylesheet” type=”text/css” media=”print” href=”mysite-print.css” />

如果需要支持老版本的浏览器,那你就必须坚持使用CSS1的媒体描述符screen和print。它们是相互排斥的,因此在为屏幕显示而生成页面的时候,浏览器会忽略掉打印样式表,反之亦然。所以,每个样式表都需要包含相同的样式选择器,但是有不同的规则声明,以便为不同的输出设备分别生成页面样式。

欢迎大家阅读《把XHTML/CSS页面转换成为打印机页面_css》,跪求各位点评,若觉得好的话请收藏本文,by 搞代码


搞代码网(gaodaima.com)提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected],我们会在看到邮件的第一时间内为您处理,或直接联系QQ:872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:把XHTML/CSS页面转换成为打印机页面_css

喜欢 (0)
[搞代码]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址