打印样式CSS的技巧和要点

标签: 打印 css 技巧 | 发表时间:2013-11-08 06:13 | 作者:天梯梦
出处:http://www.iteye.com

不经过任何处理而直接打印网站上的页面会得到一个不理想的效果。我们WEB开发人员可以简单的采用几个要点来使之达到较为合适的效果:

  • 使用响应式布局设置打印的效果
  • 打印背景图片和颜色,在合适的时候
  • 添加显示的网址或页面链接,以供参考
  • 使用css filter 提高打印的图形效果

 

针对打印的样式,而不是屏幕显示样式

首先,我们需要使用媒体查询(media query)针对 打印样式设置。

@media print {

}

 

重新针对打印写CSS样式是没有必要的,我们只需要针对差异设置打印的样式覆盖掉之前的默认样式。大多数的浏览器会自动根据打印更改颜色,以节省打印原料,但是我们还是尽可能的手工设置一下。为了达到最佳效果,使颜色清晰明了。我们至少需要包含一下基本的打印样式。

@media print { body { color: #000; background: #fff; } }

 

对于打印,大多数情况下我们不需要打印整个页面,只需要打印一个简洁的能够突出需要信息的页面,那么我们将不相关的部分隐藏掉(如:导航条、背景图片)。

/* Default styles */

h1 {
   color: #fff;
   background: url(banner.jpg);
}

@media print {
   h1 {
      color: #000;
      background: none;
   }

   nav, aside {
      display: none;
   }
}

 

在编写打印样式表的时候,你要注意要使用厘米或者英寸作为单位而不是屏幕像素单位,实际的单位对打印非常有用。为了保证打印样式有用,写CSS样式使打印的内容距离纸张边缘,看起来更好,需要使用 @page 这个语法:

@media print {
   h1 {
      color: #000;
      background: none;
   }

   nav, aside {
      display: none;
   }

   body, article {
      width: 100%;
      margin: 0;
      padding: 0;
   }

   @page {
      margin: 2cm;
   }
}

 

为了保证不被跨页打印,如一个标题和内容在页面底部被分开:

h2, h3 { page-break-after: avoid; }

 

另一中情况是要防止图片过宽而超出纸张边缘:

img {
   max-width: 100% !important;
}

 

第三个要点是确保 articles 文章标签的内容,在新的一页开始:

article {
   page-break-before: always;
}

 

最后,还要注意列表和图片不被分开在不同的页:

ul, img {
   page-break-inside: avoid;
}

 

尽管这些还不完美,不过这是一个良好的开始

 

背景图片和颜色

对于一些网站,颜色和背景图还是非常必要需要遵循的。如果用户是在 webkit 内核浏览器上打印的话,我们可以强制打印机打印屏幕上所看到的颜色(即强制在打印页面上出现任何的背景图和颜色),一般来说彩色打印机可以做到这点,我们需要一个单独的媒体查询:

@media print and (color) {
   * {
      -webkit-print-color-adjust: exact;
      print-color-adjust: exact;
   }
}

 

遗憾的是,这不能马上应用于firefox opera 和IE.

 

扩展打印样式里的超链接

如果直接打印,超链接将只是一点文字,而不会出现链接的网址,这样来说,是没有意义的。我们可以将url链接展示在打印的页面上,我们可以使用:after伪类来实现而不影响周围的元素布局:

@media print {
   article a {
      font-weight: bolder;
      text-decoration: none;
   }

   article a[href^=http]:after {
      content:" <" attr(href) "> ";
   }
}

 

看下面这是HTML:

<p>You’ve explored this <a href="/blog">website</a>; now it’s time to <a href="http://www.webplatform.org/">read other Web development documentation</a>.</p>

 

下面是显示的效果:

 

其中一个问题是,打印页面上的锚文本和图像链接也将扩大。我们可以很好的用CSS规则修复

article a[href^="#"]:after {
   content: "";
}

 

链接周围图像是比较麻烦的,理想的情况是图像周围的链接将有一个class.

$a:after > img {
   content: "";
}

 

CSS4选择器实现将很简单:

a:not(:local-link):after {
   content:" <" attr(href) "> ";
}

 

所有这些方法都假定用户将继续通过手工输入网址。 一个更好的解决方案是通过提供匹配的QR码的数字版本的页面更容易访问。

 

打印链接二维码使之更容易访问

如下图: 我们需要使用谷歌 图形API来实现:

  • 我们希望谷歌提供的图表信息(  qr ,在我们的例子中);
  • 呈现大小的的QR印记,以像素为单位;
  • URL进行编码;
  • 使用的字符编码形式。

通常我们会在页面顶部的一个标题元素关联的URL:

<header>
<h1>Lizabeth’s Salon</h1>
<h2>Providing Intellectual Stimulation Online Since 2001</h1>
</header>

 

为了创造预期的打印结果,我们将提供足够的间距给H1用来放置二维码。因为这个二维码需要增加到每个页面。我们需要增加一条CSS规则:

@media print {
   header h1:after {
      content: url(https://chart.googleapis.com/chart?cht=qr&chs=150x150&chl=http://yourdomain.com&choe=UTF-8);
      position: absolute;
      right: 0;
      top: 0;
   }
}

 

这个方法的缺点是使开发者每个元素都请求一个API。如果你的主机是PHP,则可以自动生成当前页面的URL:

@media print {
   h1:after {
      content: url(https://chart.googleapis.com/chart?cht=qr&chs=150x150
&chl=http://<?=$_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];?>
&choe=UTF-8);
      position: absolute;
      right: 0;
      top: 0;
   }
}

 

给wordpress的样式:

@media print {
   h1:after {
      content: url(https://chart.googleapis.com/chart?cht=qr&chs=150x150
&chl=http://<?phpthe_permalink();?>&choe=UTF-8);
      position: absolute;
      right: 0;
      top: 0;
   }
}

 

使用CSS3 Filter 提高打印的质量

浏览器通常会打印出横幅图像,特别是如果有问题的旗帜在黑暗的背景是白色的:

@media print {
   header {
      background: none;
      color: #000;
   }

   header img {
      filter: url(inverse.svg#negative);
      -webkit-filter: invert(100%);
      filter: invert(100%);
   }
}

 

CSS3的过滤器做什么,你所期望的 – 在头图像反色,变成黑白色,反之亦然 – 但它们只能在Chrome和Safari。 为了弥补Firefox,我们需要一种不同的方法 – 相当于过滤器作为一个单独的SVG文件写:

<svg xmlns="http://www.w3.org/2000/svg">
<filter id="negative">
<feColorMatrix values="-1 0 0 0 1
0 -1 0 0 1
0 0 -1 0 1
0 0 0 1 0" />
</filter>
</svg>

 

从理论上讲,你可以使用一个CSS sprite 之间进行切换不同版本的打印的标志,但是这将意味着增加一倍的文件大小可能没有什么好处。 相反,我建议使用CSS过滤器(和SVG当量,为 Firefox)的反转图像之前,打印的页面: 印刷两种形式的标志(即α-蒙面PNG或纯黑色背景)的结果是:

 

 

总结

由于打印不方便跟踪,而且缺乏重视。在WEB开发中也往往被忽略,大多数时候我们只阅读线上的网页,而不是打印出来。 另一方面即使人们只是偶尔需要打印的东西从网站,这将是理想的,如果页面设计适合的打印机,就像现代的网站适应各种屏幕尺寸和设备。 打印的自适应设计, 可用性和可访问性和Web开发的重要组成部分,同样应考虑的另一个方面。 处理打印自适应设计的另一个方面,我们实现更多的网站用户的需求-并在同一时间,节省墨水,纸张和其他资源,所有这些都是重要的方面 可持续发展设计 。

 

转载: cocss » 打印样式CSS的技巧和要点

 

 



已有 0 人发表留言,猛击->> 这里<<-参与讨论


ITeye推荐



相关 [打印 css 技巧] 推荐:

打印样式CSS的技巧和要点

- - Web前端 - ITeye博客
不经过任何处理而直接打印网站上的页面会得到一个不理想的效果. 我们WEB开发人员可以简单的采用几个要点来使之达到较为合适的效果:. 使用响应式布局设置打印的效果. 打印背景图片和颜色,在合适的时候. 添加显示的网址或页面链接,以供参考. 使用css filter 提高打印的图形效果. 针对打印的样式,而不是屏幕显示样式.

10个非常不错的CSS技巧

- - CSDN博客Web前端推荐文章
在这里,巧妙的运用CSS的技巧,可以让你不用修改HTML就能得到很好的博客或者模板外观. 我收集了一些非常有用的CSS技巧让我们设计博客时更炫更酷. 设计模版和博客主题时,我经常“不断推敲和尝试CSS(Hit and Trial CSS ),我只看哪种配色方案和哪种CSS属性的结合能使页面的元素更完美.

CSS技巧荟萃:了解CSS页面布局和加载流程

- - 前端观察
如果你开发web相关应用或者网站的话,肯定知道CSS对于页面布局的重要性. 在本篇CSS技巧中我们将介绍页面加载的流程来帮助你更好的实现页面布局. 在我们开始正式的介绍页面流程前,我们需要简单了解几种不同类型的html元素,以及它们的缺省显示方式. 这里我们主要重点介绍两个类型的元素:. 如果大家关心html5的话,你应该知道在HTML5中也包含了几个新的元素,例如,section,article等等,但是仍旧遵循这里我们介绍的显示类型.

响应式设计的5个CSS实用技巧

- - Web App Trend
正如我在教程 响应式Web设计三步走当中所讲的,响应式的Web设计其实并不难,但是要让元素在布局切换时能够平滑过渡就比较考验技巧了. 现在我分享在编码时常用的五个CSS技巧并举例说明. 这些技巧都是使用简单的CSS属性,如min-width、max-width、overflow 和相对属性值,但是这些属性在响应式设计中发挥着很大的作用.

[讀書筆記] CSS 基礎技巧懶人包

- - Blog.XDite.net
前幾天 Code School 的 CSS Cross Country 課程釋出了. 這一集是我相當期待的一集,整理和澄清了非常多「非常基礎但如果觀念不好」就會搞得一塌糊塗的 CSS 知識. 看完把筆記整理在這裡,不過相較於原網站,我寫的算是非常簡陋的版本. 我相當強烈推薦大家購買回去和練習,相信會對自己的 CSS 掌握能力有高度的提升.

【转载】最新的Javascript和CSS应用技巧荟萃

- - HTML5研究小组
随着前端技术的发展, javascript和 css在网站和web应用中展现出强大的统治力,特别是随着HTML5和CSS3的标准的成熟,我们可以使用javascript和css开发出你想都没有想到过的特效和动画,在今天的这篇文章中,我们将介绍一组相关CSS和javascript的强大教程和插件,希望大家喜欢.

网页设计师必备的10个CSS技巧

- - 博客 - 伯乐在线
CSS是网页设计师的基础,对CSS的了解能使他们能够设计出更加美观别致的网页. 使用CSS技巧来巧妙地处理CSS是非常令设计师着迷的事情. 在CSS的深海世界里有很多有意思的东西,你只需要找到最适合你的就好. 当然我们不可能一下子就记住所有CSS的规则和语法,但为了以后的发展我们还是应该记住那些非常有用的CSS技巧.

前端工程師必看: 十大 CSS 技巧

- - 小惡魔 - 電腦技術 - 工作筆記 - AppleBOY
底下內容來自於原網站,在加上筆者的一些補充. 用 firebug 或 console 來除錯. 在 Firefox 還沒有推出 Developer Tools 時,大家一定是用 Firebug 來除錯,2006 年 Firebug 第一版 release 出來,讓 web 開發者可以更快速的瞭解網站除錯,也可以透過 Firebug 來瞭解網站的 performance.

你需要知道的三个CSS技巧

- - 外刊IT评论
各种浏览器之间的竞争的白热化意味着越来越多的人现在开始使用那些支持最新、最先进的W3C Web标准的设备,以一种更具交互性的方式来访问互联网. 这意味着我们终于能够利用更强大更灵活的 CSS来创造更简洁,更好维护的浏览器前端代码. 现在让我们来看一看一些也许你还不知道的让人兴奋的CSS 功能. 在CSS中用attr()显示HTML属性值.

用于响应式设计的9个CSS技巧

- - CSDN博客Web前端推荐文章
现在越来越多的网站文本链接已取消下划线,而这已成为一种 WEB设计趋势,尤其是在做响应式网站时. 下面提供一段简单的CSS代码,可以轻松取消文本链接下划线:. tjkdesign.com给大家,里面提供了许多CSS技巧,帮助你在页面中嵌入响应式视频( . 3.Rollover文本链接. 越来越多的人喜欢在手机上浏览网页,这使得Rollover链接变得越来越流行.