大多数Web设计师对打印控制还不是很熟悉，他们往往更迷恋像素，而不是打印机。在现实世界中，很多人依赖从网站上打印网页来参考： 在这个数字时代, 在一些特殊的场合，很多人手中还会拿着纸张。Web开发人员可以采取一些措施来弥补打印机和液晶屏之间的差距。

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

1
2
3
4
5
/* 样式将只应用于打印 */
@media print {
}

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

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

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

1
2
3
4
5
6
7
/*白纸黑字*/
@media print {
   body {
      color: #000;
      background: #fff;
   }
}

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/*去除背景图片, 节约笔黑 */
h1 {
   color: #fff;
   background: url(banner.jpg);
}
@media print {
   h1 {
      color: #000;
      background: none;
   }
   nav, aside {
      display: none;
   }
}

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
@media print {
   h1 {
      color: #000;
      background: none;
   }
   nav, aside {
      display: none;
   }
   body, article {
      width: 100%;
      margin: 0;
      padding: 0;
   }
   @page {
      margin: 2cm;
   }
}

　　链接的处理

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

1
2
3
4
5
6
7
8
9
10
11
12
/*在超链接后面添加带<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英寸高.

1
2
3
@page {
  size: 5.5in 8.5in;
}

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

1
2
3
@page {
  size: A4;
}

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

1
2
3
@page {
  size: A4 landscape;
}

　　PAGE模型　The Page Model

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

　　注*　支持浏览器较少

1
@page { width: 50em; }

　　PAGE边距模型　 Page-Margin Boxes

　　在进一步讨论之前，我们应该了解的页面的盒子模型，因为它的行为跟如何在屏幕上的工作有些不同。

　　页面模型定义了页面区域，然后划分了16个周边缘盒。可以控制页区域的大小和页区域的边缘和页面本身的端部之间的余量的尺寸。

　　左右页边距

1
2
3
4
5
6
7
8
@page :left {
  margin-left: 30cm;
}
@page :right {
  margin-left: 4cm;
}

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
@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 规范

转载于:https://www.cnblogs.com/ranzige/p/4401465.html

专为控制打印设计的CSS样式相关推荐

  1. php控制打印机打印设置,专为控制打印设计的CSS样式

    大多数Web设计师对打印控制还不是很熟悉,他们往往更迷恋像素,而不是打印机.在现实世界中,很多人依赖从网站上打印网页来参考: 在这个数字时代, 在一些特殊的场合,很多人手中还会拿着纸张.Web开发人员 ...

  2. web网页打印设计的CSS样式

    大多数Web设计师对打印控制还不是很熟悉,而不是打印机.在现实世界中,很多人依赖从网站上打印网页来参考: 为打印机而不是屏幕设计的样式 1 2 3 4 5 /* 样式将只应用于打印 */ @media ...

  3. 网页设计的css样式,网页设计引入CSS样式的五种方式_css

    一.使用STYLE属性 将STYLE属性直接加在个别的元件标签里,<元件(标签) STYLE="性质(属性)1: 设定值1; 性质(属性)2: 设定值2; -} 例如: <TD ...

  4. angular 打印 lodop 引入css样式

    官网地址 http://www.lodop.net/LodopDemo.html 本机需要安装lodap综合版 http://www.lodop.net/download.html 下载的压缩包内部会 ...

  5. CSS样式－网页响应式设计

    响应式设计-网页CSS样式知识 百分比布局 弹性布局 网格布局 最大最小宽度 视图窗口 多媒体查询 最大最小宽度 竖屏横屏 尺寸比 容器属性 容器查询单位 伪类has 百分比布局 简单的讲就是将元素按 ...

  6. css 超链接的颜色,用css样式控制超链接颜色显示

    用css样式控制超链接颜色显示 用css样式控制超链接颜色显示,阅读用css样式控制超链接颜色显示,很多人在网页上实现不同链接有不同的颜色上不知如何处理,如果改a的属性,好像所有的链接的颜色都改了.事 ...

  7. 超文本css样式换行

    之前有关于LODOP中纯文本换行的相关博文:Lodop纯文本英文-等符号自动换行问题 纯文本的遇到不拆分的单词的时候,可以通过LODOP 语句设置允许标点溢出,且英文单词拆开. 超文本需要通过css样 ...

  8. 外链式样式表_引入CSS样式表（书写位置）

    CSS初识 CSS(Cascading Style Sheets) 美化样式 CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体.大小.对齐方式等).图片 ...

  9. div 设置a4大小_设计适用于打印的CSS样式

    大多数Web设计师对打印控制还不是很熟悉,他们往往更迷恋像素,而不是打印机.在现实世界中,很多人依赖从网站上打印网页来参考: 在这个数字时代, 在一些特殊的场合,很多人手中还会拿着纸张.Web开发人员 ...

最新文章

  1. linux怎么允许远程root登录
  2. Asp.net Mvc 多级控制器 路由重写 及 多级Views目录 的寻找视图的规则 （多级路由） 如：Admin/Test/Index...
  3. 泊松图像融合(泊松融合)
  4. grep / egrep
  5. Scala 类中声明方法
  6. 如何在windows下使用linux命令
  7. 水晶易表调用C#的WebService,返回数据集合
  8. 【MapBox】5种地图（底图）样式自由切换附源码
  9. cloud foundry_将Spring Boot应用程序绑定到Cloud Foundry中的服务的方法
  10. 关于图像质量评测的分析
  11. Python编程 whl文件安装库
  12. python随机生成11位手机号码的用户数据并存入excel表格
  13. 企业级代码静态测试工具Helix QAC——技术规格
  14. JVM(1.8)GC日志解析与分析
  15. CentOS 安装NTFS-3G，支持NTFS分区的方法
  16. echarts实现颜色渐变
  17. Dummy variable (变量dummy化）
  18. 云计算时代的域名解析
  19. 明源售楼系统技术解析（一）搭建MVC3框架
  20. 2019年春季学期《C语言程序设计II》助教注意事项

热门文章

  1. Protocol Buffers proto语言语法说明
  2. oracle 中EXP、IMP 命令详解
  3. 获取屏幕，浏览器，网页高度宽度
  4. LeetCode（771）——宝石与石头（JavaScript）
  5. chrome http请求，测试webapp接口之DHC - REST/HTTP API Client
  6. jQuery实现影院选座订座效果
  7. 操作系统的概念,功能和目标
  8. 自己的父母，能把钱交给他们存吗？
  9. 每天早上喝一杯豆浆不吃饭，一个月后会是什么反应？
  10. 肝火旺的人，哪些食物打死都不要碰？