[转载]打印样式表(UE之可用性) – sohighthesky – 博客园.
介绍
一个打印样式表设置网页的样式,使页面在打印的时候,呈现更友好的样式。打印样式表已存在数年了,然而,现在很少有网站使用到它,这意味着我们让并 不是很适合的网页打印到纸上。(比如yahoo : http://developer.yahoo.com/performance/rules.html,这个页面打印后,会显示右边的边栏,而通常我们 只是想要这篇文章的内容,而且显示右边后,导致内容宽度太小,字体超小 ,所以如果你打印过个页面,你就会意识到本文的必要性)
- 打印样式表极大的提高了可用性,尤其是有很多内容的页面(比如本页面)
- 它可以简单迅速的设置
一些网站也提供了打印版本的链接,但是很明显这还需要建立和维护。它还需要用户在页面里找到这个链接,然后打开打开这个页面,然后再打印。然而人们通常是 直接“文件-打印“或者 直接按ctrl+p.
如何设置你的打印样式表
打印样式表与我们通常使用的样式表很像,但是它只会在打印的时候调用。要使用一个打印样式表,只需要将下面的代码放到head里
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
print.css就是打印样式表文件,
media="print"
意味着这个样式表只有在打印的时候被调用。属性 media有很多可选项(比如handheld,tv,screen),查看完整列表删除不需要的项目
通常我们只要想要logo和页面的内容在出现在打印版本里,所以通常要移除头部和底部(或者 移除左边和右边的边栏),也许还有其它单独的元素不想显示,只需要在html里加上class="noprint"
,要移除这 些内容,只需要设置:display:none
,这样样式表打概可以写成这样:
#header, #nav, .noprint {display: none;}
设置页面格式
确保页面内容涵盖了充分的宽度(防止像上面yahoo那页面一样打印出来宽度和字体太小,无法阅读的杯具)
#container, #container2, #content {width: 100%; margin: 0; float: none;}
链接样式
a:link, a:visited {color: #781351}
链接打印出来后看不到地址了,我们也可以让其地址显示在链接后面
.printlink a:after{ content:" <" attr(href) ">"; color:#FF0000;font-style:italic; }
制作打印样式表
在制作打印样式表时,可以直接将样式写在主样式 表后面,检查页面在屏幕上显示的内容,直到满意,然后可以剪切到print.css中,给所有的页面使用
- 完整样式下载:print.css
- 中文出处:http://www.uedsky.com/sky/article/print-stylesheet.html
- 英文原文:http://www.codeproject.com/KB/HTML/print-stylesheet.aspx
- 注:本来想在标题加个”译“的,but。。。。