标记语言——打印样式(4)
揭露链接
还有个巧妙的技巧(可惜只能在完整支持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) ") ";
}
当然,也可以在此任意选择颜色,现在我是用预设的蓝色并加上下划线,因为一般人一眼就能将它看成超链接,对黑白打印来说,能够试验出某种灰色,让链接与一般文字产生足够的对比.