位置：首页>> 网络编程>> 网页设计>> [翻译]标记语言和样式手册 Chapter 11 打印样式（5）

[翻译]标记语言和样式手册 Chapter 11 打印样式（5）

作者：zhaozy　来源：3user.com　发布时间：2008-02-11 18:44:00　

标签：样式,标记,css,手册,打印

揭露链接

还有个巧妙的技巧(可惜只能在完整支持CSS2规范的浏览器中产生作用),那就是揭露链接URLs,让他们在打印结果中出现在超链接文字后面.

我们能用:after 这个伪类来编写CSS,让支持的浏览器在超连接文字后面打印出它所连接的URL,目前Mozilla,Safari与Netscape 7.0都支持这个功能,同时,对不支持:after 的浏览器使用者来说也不吃亏,他们只会看到超链接文字本身(Eric Meyer, "CSS Design: Going to Print" , http://www.alistapart.com/articles/goingtoprint/).

让我们为打印样式表加上一条新规则,凸显内容部分里面的超链接URL:

body {
  font-family: "Times New Roman", serif;
  font-size: 12pt;
  }
#nav, #sidebar, #search {
  display: none;
  }
#content a:link:after, #content a:visited:after {
  content: " (" attr(href) ") ";
  }

这条规则会使打印出来的页面在超链接文字后面加上URL.URL会被放在一组括号里面,前后各留一个空格,这只会在页面的#content区域发生作用.虽然可以编写一条通用规则揭露所有超链接,但在这里我们选择只揭露内容部分里的超链接 -- 排除页首,页尾与其他区域的链接.

再次提醒,虽然这个功能目前只有少数几个浏览器支持,但是对不支持:after 伪类的浏览器完全无害,他们只会直接忽略这项规则.

链接文字

刚刚我们对连接URL动了些巧妙的手脚,但是也别忘了以独特的方式强调链接文字,让读者能在阅读一般内容时,轻易辨别夹杂在内的超链接.

body {
  font-family: "Times New Roman", serif;
  font-size: 12pt;
  }
#nav, #sidebar, #search {
  display: none;
  }
a:link, a:visited {
  color: blue;
  text-decoration: underline;
  }
#content a:link:after, #content a:visited:after {
  content: " (" attr(href) ") ";
  }

当然,也可以在此任意选择颜色,现在我是用预设的蓝色并加上下划线,因为一般人一眼就能将它看成超链接,对黑白打印来说,能够试验出某种灰色,让链接与一般文字产生足够的对比.

预览打印节省墨水

另一个节省墨水的技巧,是以浏览器的预览打印功能试着显示页面的打印效果,而不是真的把整份页面印到纸上.

在大多数浏览器里,文件 - 打印对话框对有个预览选项,让你查看页面的打印效果,你能在这里好好观察一下打印样式表的效果.

第一页上一页 2 3 4

6 下一页

投稿

[翻译]标记语言和样式手册 Chapter 11 打印样式（5）

猜你喜欢