开发者社区> 华山青竹> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

简介: 来源:http://ourjs.com/detail/54d1ef3e232227083e000026   大多数Web设计师对打印控制还不是很熟悉,他们往往更迷恋像素,而不是打印机。在现实世界中,很多人依赖从网站上打印网页来参考: 在这个数字时代, 在一些特殊的场合,很多人手中还会拿着纸张。
+关注继续查看

来源:http://ourjs.com/detail/54d1ef3e232227083e000026

 

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

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

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

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

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

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

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

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

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

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

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

链接的处理

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

 1 /*在超链接后面添加带<http://XXX>的完整地址*/
 2 @media print {
 3    article a {
 4       font-weight: bolder;
 5       text-decoration: none;
 6    }
 7 
 8    article a[href^=http]:after {
 9       content:" <" attr(href) "> ";
10    }
11 }

显示效果可能是这样的:

 

 

 

 

控制打印设置选项

该@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将在底部左边显示标题,在右下角的网页计数器,并在右上角显示一章的标题。

 1 @page:right{ 
 2   @bottom-left {
 3     margin: 10pt 0 30pt 0;
 4     border-top: .25pt solid #666;
 5     content: "Our Cats";
 6     font-size: 9pt;
 7     color: #333;
 8   }
 9 
10   @bottom-right { 
11     margin: 10pt 0 30pt 0;
12     border-top: .25pt solid #666;
13     content: counter(page);
14     font-size: 9pt;
15   }
16 
17   @top-right {
18     content:  string(doctitle);
19     margin: 30pt 0 10pt 0;
20     font-size: 9pt;
21     color: #333;
22   }
23 }

显示效果如下:

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

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
ECS安装Fedora CoreOS操作系统版本34
ECS安装Fedora CoreOS操作系统版本34
44 0
使用ECS服务器真实体验
本着学习的目的,经过老师介绍来使用阿里云服务器,使用十分方便,困难度不高,在老师教程结束要求我们更换系统后要求我们根据自己的印象在进行一遍操作,我已十分熟悉,再加上阿里云ECS服务器使用操作简单明了不久便完成作业。
31 0
使用ECS服务器真实体验
本着学习的目的,经过老师介绍来使用阿里云服务器,使用十分方便,困难度不高,在老师教程结束要求我们更换系统后要求我们根据自己的印象在进行一遍操作,我已十分熟悉,再加上阿里云ECS服务器使用操作简单明了不久便完成作业。
168 0
win7系统想要用iis7远程桌面管理,可是他显示说你没有开通远程权限怎么解决?
  iis7远程桌面管理连接不上具体的操作如下:  首先打开桌面“计算机”图标,右键属性打开计算机属性菜单,  打开计算机属性(控制面板----系统和安全---系统选项)找到左侧的“远程设置”功能,  出现的“系统属性”菜单中,找到“远程‘选项卡,其中下方的“远程桌面”选项,选择其中一个(注意 远程...
871 0
ECS控制台支持资源组
为了提升企业管理云资源的效率,阿里云提出了资源组的概念,将云资源加入到资源组中,不仅易于管理和维护云资源,也企业管理层面提供了不同的管理视角,关于资源组的更多信息请到企业控制台了解详情 [企业控制台](https://enterprise.console.aliyun.com/)
1989 0
.NET Core 控制台应用程序使用异步(Async)Main方法
C# 7.1 及以上的版本允许我们使用异步的Main方法
7296 0
ECS 控制台诊断系统
控制台诊断系统,旨在为您提供快速反馈问题的渠道,在降低您的反馈成本的同时,第一时间为您提供解决方案,减少您的损失,给您提供更加平滑的控制台操作体验。
7035 0
C++的那些事:类的拷贝控制
C++的那些事:类的拷贝控制 1,什么是类的拷贝控制 当我们定义一个类的时候,为了让我们定义的类类型像内置类型(char,int,double等)一样好用,我们通常需要考下面几件事: Q1:用这个类的对象去初始化另一个同类型的对象。
989 0
+关注
华山青竹
一个喜欢玩代码的小青年呵呵呵
543
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载