您的位置：首页 > Web前端 > CSS

如何优化网页的打印样式？

2014-12-30 20:10 162 查看

1、指定媒体的两种方法：

方法A:Media属性
<link rel="stylesheet" type="text/css" media="screen" href="screenstyles.css"
/>

方法B:@media或@import

<style type="text/css">

@import url("screenstyles.css") screen;

@media print {

/* 打印时使用的样式放置在此 *

}

</style>

2、分开屏幕显示与打印的样式

在页面的<head>里,链接到主体样式表styles.css

<link rel="stylesheet" type="text/css" href="/css/style.css" />

同时也建立另一个特别针对打印设计的样式表(print.css).在print.css里,我写了只在页面打印时适用的样式.Webjx.Com

<link rel="stylesheet" type="text/css" href="/css/style.css" />

<link rel="stylesheet" type="text/css" href="/css/print.css" />

然后,现在要如何确保这些CSS只会针对各自适合的媒体发挥作用呢?

为<link>标签加上media属性就可以了(与方法A一样). 网页教学网

<link rel="stylesheet" type="text/css" media="screen" href="/css/styles.css" />

<link rel="stylesheet" type="text/css" media="print" href="/css/print.css" />

通过为styles.css指定screen,就能确保styles.css包含的样式只会对电脑屏幕使用,同样的,把media属性设为print就能确保print.css包含的样式只在使用者打印页面时使用.

现在已经把屏幕与打印样式分开了,接着让我们看看有哪些样式适合放在打印样式表里头。

3、设计一份打印样式表



  这份style.css可能包含了排版布局,字体,定位,背景等规则,但是print.css却是一张白纸,等着我们自定义打印时应用的样式.

设计打印样式要注意的关键就是媒体类型,由于现在正在处理一张纸(而不是浏览器窗口),因此像素长度,大小并不是最佳选择.

（1）用点数指定大小

在打印样式表里,用点数制定字体大小是件十分合理的事情.在这份打印样式表中,首先就为<body>标签定义基础字体大小 -- 使用"点"单位.

4000
body {

font-family: "Times New Roman", serif;

font-size: 12pt;

}

实在太简单了,比起用像素单位来说,这个应该更能想象12点字体会印多大,同时我们也选用serif字体,这种字体打印出来比较细致,而且比较容易阅读.

（2）隐藏不必要的标签节省墨水

网站上或许有不少页面元素在打印版本上完全没有用,像是导航链接,侧边栏,表单以及广告栏之类的元素在打印时经常只会浪费墨水,我们可以在打印样式表内使用display属性将它们设为不显示.使用者经常只想打印页面的内容.

举例来说,如果网站以#nav,#sidebar,#advertising与#search分别存放导航条,侧边栏,广告项目与搜索表单的话,就能在打印样式表里用以下这段声明把这些内容全部隐藏起来:

body {

font-family: "Times New Roman", serif;

font-size: 12pt;

}

#nav, #sidebar, #advertising, #search {

  display: none;

  } Webjx.Com

通过在打印样式表里设定display:none;我们就能使打印结果隐藏掉这些元素.

试着隐藏页面上不必要的元素,很快就能以同一份标记代码轻松为你的网站作出"打印友好"的版本.不必在服务器上用另一份缩减过的模板输出一份完全一样的网站内容 -- 只需要一份额外的CSS文件,指定print媒体类型,搞定!

（3）去掉背景图片和颜色

举例来说,如果先前为<body>标签指定了背景图片或是颜色,现在就像这样就能把它去掉:

body {

background: none;

} Webjx.Com

当然也能用这个方法去掉其他标签在屏幕样式里指定的背景图片,颜色.

这样做节省了=墨水,并且让打印结果更容易阅读。

（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/). Webjx.Com

让我们为打印样式表加上一条新规则,凸显内容部分里面的超链接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 伪类的浏览器完全无害,他们只会直接忽略这项规则.

（5）链接文字

刚刚我们对连接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) ") ";

}

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

（6）预览打印节省墨水

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

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

看起来如何

在我的个人网站上使用打印样式表与先前我们一同制作的示例十分类似,你能比较一下图11-1和11-2,看看我是怎么设计打印样式的,去掉导航,侧边栏,同时揭露链接内容,调整字体和字体大小让本文更容易阅读.

图11-1 SimpleBits 以浏览器查看,使用屏幕样式表

图11-2 SimpleBits打印版

从图11-1和11-2可以清楚的发现,只要一个小小的CSS文档,就能为任何页面提供专门用来打印的特殊版本.这是个任何项目都很容易加入的功能,同时能在使用者尝试打印你的页面时增加体验.

归纳

讨论了打印样式表里面能包含的规则.由于可以指定媒体类型,将打印,屏幕显示所有的样式分开,因此为每种媒体调整细节变得十分简单,容易维护与管理.不再需要为整个网站建立一份打印友好的副本,因为你可以使用相同的标记源代码,配上一份打印专用的CSS文档完成相同的功能.

总之，可以这样回答：

<link rel="stylesheet" type="text/css" media="screen" href="xxx.css" />
其中media指定的属性就是设备，显示器上就是screen，打印机则是print，电视是tv，投影仪是projection。
<link rel="stylesheet" type="text/css" media="print" href="yyy.css" />
但打印样式表也应有些注意事项：
1、打印样式表中最好不要用背景图片，因为打印机不能打印CSS中的背景。如要显示图片，请使用html插入到页面中。
2、最好不要使用像素作为单位，因为打印样式表要打印出来的会是实物，所以建议使用pt和cm。
3、隐藏掉不必要的内容。（@print div{display:none;}）
4、打印样式表中最好少用浮动属性，因为它们会消失。

5、揭露链接

6、突现链接文字
7、如果想要知道打印样式表的效果如何，直接在浏览器上选择打印预览就可以了。

http://www.wzsky.net/html/Website/htmlcss/98626.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航