OurJS


OurJS-我们的JS, 我们的技术-IT文摘; 专注JS相关领域;
我们热爱编程, 我们热爱技术;我们是高大上, 有品味的码农;

欢迎您订阅我们的技术周刊


我们会向您分享我们精心收集整理的,最新的行业资讯,技术动态,外文翻译,热点文章;
我们使用第三方邮件列表向您推送,我们不保存您的任何个人资料,注重您的隐私,您可以随时退订,

欢迎分享您的观点,经验,技巧,心得

让我们一起找寻程序员的快乐,探索技术, 发现IT人生的乐趣;


本网站使用缓存技术每次加载仅需很小流量, 可在手机中流畅浏览;
如果您发现任何BUG,请即时告知我们: ourjs(at)ourjs.com

专为控制打印设计的CSS样式


分享到
分类 技术前沿   关键字 前端   发布 ourjs  1423044414118
注意 转载须保留原文链接,译文链接,作者译者等信息。  
大多数Web设计师对打印控制还不是很熟悉,他们往往更迷恋像素,而不是打印机。在现实世界中,很多人依赖从网站上打印网页来参考: 在这个数字时代, 在一些特殊的场合,很多人手中还会拿着纸张。
Web开发人员可以采取一些措施来弥补打印机和液晶屏之间的差距.


为打印机而不是屏幕设计的样式


/* 样式将只应用于打印 */
@media print {

}

注* 也可通单独的CSS文件, 设置link的 media="print" 属性来指定此样式专用于打印

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


为您的网站重塑整个CSS是没有必要的,整体而言,由打印继承默认样;仅对不同的需要加以限定。为了节省打印时的碳粉,大多数浏览器会自动反转颜色。为了达到最佳效果,应使色彩变化明显:

/*白纸黑字*/
@media print {
   body {
      color: #000;
      background: #fff;
   }
}


我们不是在创建整个网页的截图,只是为了展现一个设计良好,可读性强的网站:


/*去除背景图片, 节约笔墨 */

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

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

   nav, aside {
      display: none;
   }
}

为了使打印机更具效率,应只显示主体内容,去除页眉页脚导航栏

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

   nav, aside {
      display: none;
   }

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

   @page {
      margin: 2cm;
   }
}


链接的处理


在打印机上链接是看不到的,应对超链接进行扩展

/*在超链接后面添加带<http://XXX>的完整地址*/
@media print {
   article a {
      font-weight: bolder;
      text-decoration: none;
   }

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

显示效果可能是这样的





控制打印设置选项



该@page规则允许您指定页面的各个方面。例如,你将要指定页面的尺寸。页边 距,页眉页脚等都是非常重要的。[很多浏览器均己支持]

@PAGE规则纸张大小设置


通过下面这条CSS您可以设置纸张大小,5.5英寸宽,8.5英寸高.

@page {
  size: 5.5in 8.5in;
}


你还可以通过别名控制纸张大小,如"A4"或“legal.”

@page {
  size: A4;
}


你还可以控制打印方向, portrait: 纵向打印地,  landscape: 横向


@page {
  size: A4 landscape;
}


PAGE模型 The Page Model


在分页媒体格式模型中,文档被转移到一个或多个页面框。该页框是映射到一个矩形平面。这大致类似于css盒子模型。

注* 支持浏览器较少





@page { width: 50em; }



PAGE边距模型  Page-Margin Boxes



在进一步讨论之前,我们应该了解的页面的盒子模型,因为它的行为跟如何在屏幕上的工作有些不同。
页面模型定义了页面区域,然后划分了16个周边缘盒。可以控制页区域的大小和页区域的边缘和页面本身的端部之间的余量的尺寸。




左右页边距


@page :left {
  margin-left: 30cm;
}

@page :right {
  margin-left: 4cm;
}


下面的CSS将在底部左边显示标题,在右下角的网页计数器,并在右上角显示一章的标题。


@page:right{ 
  @bottom-left {
    margin: 10pt 0 30pt 0;
    border-top: .25pt solid #666;
    content: "Our Cats";
    font-size: 9pt;
    color: #333;
  }

  @bottom-right { 
    margin: 10pt 0 30pt 0;
    border-top: .25pt solid #666;
    content: counter(page);
    font-size: 9pt;
  }

  @top-right {
    content:  string(doctitle);
    margin: 30pt 0 10pt 0;
    font-size: 9pt;
    color: #333;
  }
}


显示效果如下:








注* 此文整理自:Tips And Tricks For Print Style Sheets 和 Designing For Print With CSS 和 css3 page 规范



社区评论 ( Beta版 )
  • #0 most 1429762284267

    @page规则似乎不起作用呢?我是希望打印页面的一部分,能用吗?要是有一个简单的HTML案例就更好了

  • #1 ourjs 1429865609361

    @most #0

    目前的浏览器支持并不完美。

OnceDoc 您自己的企业内容管理系统——文档、流程、知识库、报表、网盘All In One

访问404页面,寻找丢失儿童
 热门文章 - 分享最多
  1. 从一行CSS调试代码中学到的JavaScript知识
  2. 理解Node.js的事件循环(Event Loop)和线程池
  3. 在nodejs中使用Redis缓存和查询数据及Session持久化(Express)
  4. 什么是Viewport Meta(width详解)及在手机上的应用
  5. 即将推出的CSS4 Level 4 Selectors(第4级选择器)
  6. JavaScript中的$$(*)代表什么和$选择器的由来
  7. io.js新支持的ECMAScript 6功能特性详解
  8. RedMonk的语言排名:JavaScript,Java保持领先;Go未进前20
  9. Node.JS开发者常犯的10个错误(一)
  10. Node.js安全教程:防止阻塞Event Loop的潜在攻击
  11. AirJD-简单好用的免费建站工具

 相关阅读 - 技术前沿
  1. 什么是Viewport Meta(width详解)及在手机上的应用
  2. io.js新支持的ECMAScript 6功能特性详解
  3. NodeJS连接Redis:安装及开机自动启动设置
  4. Duktape:一个新的小巧的超精简可嵌入式JavaScript引擎
  5. HTML5的TCP和UDP Web Socket API草案定稿
  6. SpiderMonkey的JavaScript引擎[Firefox]性能超越V8[Chrome]
  7. 基于 Web 的 Go 语言 IDE
  8. Nginx的大计划:将原生支持JavaScript
  9. 不需要密码的登录
  10. 15个最好的HTML5前端响应式框架(2014)

 关键字 - 前端
  1. 我为什么选择 D3.js
  2. CSS3实现的响应式字体:自适应视图窗口大小的新单位
  3. 用纯css改变下拉列表select框的默认样式
  4. AngularJS在大型单页面应用中的性能优化(一)
  5. 我们抛弃了AngularJS:单页面应用的5大缺陷
  6. 5个经典的前端面试问题
  7. 我被问得最多的十个JavaScript前端面试问题
  8. 超简易——Bootstrap可关闭tab标签页
  9. 什么是Viewport Meta(width详解)及在手机上的应用
  10. Animate.css让添加CSS动画像喝水一样容易

 欢迎订阅 - 技术周刊

我们热爱编程, 我们热爱技术; 我们是高端, 大气, 上档次, 有品味, 时刻需要和国际接轨的码农; 欢迎您订阅我们的技术周刊; 您只需要在右上角输入您的邮箱即可; 我们注重您的隐私,您可以随时退订.
加入我们吧! 让我们一起找寻码农的快乐,探索技术, 发现IT人生的乐趣;


 关注我们

我们的微信公众号: ourjs-com
打开微信扫一扫即可关注我们:
IT文摘-程序员(码农)技术周刊

ourjs官方微信号