说说打印样式CSS的技巧和要点
转载自品略图书馆 http://www.pinlue.com/article/2019/12/2414/179850085500.html
不经过任何处理而直接打印网站上的页面会得到一个不理想的效果。
我们WEB开发人员可以简单采用几个要点来使之达到较为合适的效果：
使用响应式布局设置打印的效果
在合适的时候打印背景图片和颜色
添加显示的网址或页面链接，以供参考
使用css filter 提高打印的图形效果
针对打印的样式，而不是屏幕显示样式
首先，我们需要使用媒体查询（media query）针对打印样式设置。
1
2
3
@media print {
}
重新针对打印写CSS样式是没有必要的，我们只需要针对差异设置打印的样式覆盖掉之前的默认样式。
大多数的浏览器会自动根据打印更改颜色，以节省打印原料，但是我们还是尽可能的手工设置一下。
为了达到最佳效果，使颜色清晰明了，我们至少需要包含一下基本的打印样式。
1
@media print { body { color: #000; background: #fff; } }
对于打印，大多数情况下我们不需要打印整个页面，只需要打印一个简洁的能够突出需要信息的页面，那么我们将不相关的部分隐藏掉（如：导航条、背景图片）。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* Default styles */
h1 {
color: #fff;
background: url(banner.jpg);
}
@media print {
h1 {
color: #000;
background: none;
}
nav, aside {
display: none;
}
}
在编写打印样式表的时候，你要注意要使用厘米或者英寸作为单位而不是屏幕像素单位，实际的单位对打印非常有用。
为了保证打印样式有用，写CSS样式使打印的内容距离纸张边缘，看起来更好，需要使用 @page 这个语法：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
@media print {
h1 {
color: #000;
background: none;
}
nav, aside {
display: none;
}
body, article {
width: 100%;
margin: 0;
padding: 0;
}
@page {
margin: 2cm;
}
}
为了保证不被跨页打印，如一个标题和内容在页面底部被分开：
1
h2, h3 { page-break-after: avoid; }
另一中情况是要防止图片过宽而超出纸张边缘：
1
2
3
img {
max-width: 100% !important;
}
第三个要点是确保 articles 文章标签的内容，在新的一页开始：
1
2
3
article {
page-break-before: always;
}
最后，还要注意列表和图片不被分开在不同的页：
1
2
3
ul, img {
page-break-inside: avoid;
}
尽管这些还不完美，不过这是一个良好的开始
背景图片和颜色
对于一些网站，颜色和背景图还是非常必要需要遵循的。如果用户是在 webkit 内核浏览器上打印的话，我们可以强制打印机打印屏幕上所看到的颜色（即强制在打印页面上出现任何的背景图和颜色），一般来说彩色打印机可以做到这点，我们需要一个单独的媒体查询：
1
2
3
4
5
6
@media print and (color) {
* {
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
}
遗憾的是，这不能马上应用于firefox opera 和IE.
扩展打印样式里的超链接
如果直接打印，超链接将只是一点文字，而不会出现链接的网址，这样来说，是没有意义的。
我们可以将url链接展示在打印的页面上，我们可以使用:after伪类来实现而不影响周围的元素布局：
1
2
3
4
5
6
7
8
9
10
@media print {
article a {
font-weight: bolder;
text-decoration: none;
}
article a[href^=http]:after {
content:" <" attr(href) "> ";
}
}
看下面这是HTML:
1
<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规则修复。
1
2
3
article a[href^="#"]:after {
content: "";
}
链接周围图像是比较麻烦的，理想的情况是图像周围的链接将有一个class。
1
2
3
$a:after > img {
content: "";
}
CSS选择器实现将很简单：
1
2
3
a:not(:local-link):after {
content:" <" attr(href) "> ";
}
所有这些方法都假定用户将继续通过手工输入网址。 一个更好的解决方案是通过提供匹配的QR码的数字版本的页面更容易访问。
打印链接二维码使之更容易访问
如下图：
我们需要使用谷歌 图形API来实现：
我们希望谷歌提供的图表信息（ qr ，在我们的例子中）;
呈现大小的的QR印记，以像素为单位;
URL进行编码;
使用的字符编码形式。
通常我们会在页面顶部的一个标题元素关联的URL：
1
2
3
4
<header>
<h1>Lizabeth’s Salon</h1>
<h2>Providing Intellectual Stimulation Online Since 2001</h1>
</header>
为了创造预期的打印结果，我们将提供足够的间距给H1用来放置二维码，因为这个二维码需要增加到每个页面，我们需要增加一条CSS规则：
1
2
3
4
5
6
7
8
@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:
1
2
3
4
5
6
7
8
9
10
@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的样式：
1
2
3
4
5
6
7
8
9
@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 提高打印的质量
浏览器通常会打印出横幅图像，特别是如果有问题的旗帜在黑暗的背景是白色的：
1
2
3
4
5
6
7
8
9
10
11
12
@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文件写：
1
2
3
4
5
6
7
8
<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开发的重要组成部分，同样应考虑的另一个方面。
说说打印样式CSS的技巧和要点相关推荐
- 打印样式CSS的技巧和要点
不经过任何处理而直接打印网站上的页面会得到一个不理想的效果.我们WEB开发人员可以简单的采用几个要点来使之达到较为合适的效果: 使用响应式布局设置打印的效果 打印背景图片和颜色,在合适的时候 添加显示 ...
- 打印样式CSS的技巧和要点介绍
不经过任何处理而直接打印网站上的页面会得到一个不理想的效果. 我们WEB开发人员可以简单采用几个要点来使之达到较为合适的效果: 使用响应式布局设置打印的效果 在合适的时候打印背景图片和颜色 添加显示的 ...
- 打印样式CSS的技巧和要点。
转自:微点阅读 http://www.weidianyuedu.com/ 不经过任何处理而直接打印网站上的页面会得到一个不理想的效果. 我们WEB开发人员可以简单采用几个要点来使之达到较为合适的效果 ...
- 打印样式CSS的技巧浅谈
不经过任何处理而直接打印网站上的页面会得到一个不理想的效果. 我们WEB开发人员可以简单采用几个要点来使之达到较为合适的效果: 使用响应式布局设置打印的效果 在合适的时候打印背景图片和颜色 添加显示的 ...
- file html5 样式,CSS小技巧之自定义个性的file表单样式
每当看到别人家的东西,总是那么的优美,他们的是这样的: 再想想自己家的是这样的. 样式没个性就算了,还那么多的废字,今天我们分享的就是如何把file表单做的漂亮些,废话不多说,直接进入正题. 其实当初 ...
- html标记语言格式,标记语言——打印样式
标记语言--打印样式 互联网 发布时间:2008-10-17 18:56:01 作者:佚名 我要评论 点击这里返回网页教学网 HTML教程 栏目．想浏览CSS教程请点这里. 上文:标记语言 ...
- css设置打印样式表,[CSS] 创建打印样式表
[CSS] 创建打印样式表 Chrome浏览器有一项非常好用的功能, 就是直接将网页保存为PDF(Ctrl+P), 虽然部分人觉得没有用, 但我经常使用这个功能 比如说, 有的博文写得不错, 想保存, ...
- jquery 利用CSS 控制打印样式
一.添加打印样式 1. 为屏幕显示和打印分别准备一个css文件,如下所示: 用于屏幕显示的css: <link rel="stylesheet" href=" ...
- CSS控制print打印样式
一.添加打印样式 1. 为屏幕显示和打印分别准备一个css文件,如下所示: 用于屏幕显示的css: <link rel="stylesheet" href="c ...
最新文章
- 赠书 | 读懂生成对抗神经网络 GAN，看这文就够了
- 最后2周 | 高级转录组分析和R语言数据可视化第十一期 (报名线上课还可免费参加线下课)...
- JDBC+Servlet+JSP整合开发之29-JSP表达式语言（EL）
- 书评 | 产品的事可以简化为两件，产品团队有两种...
- python模块下载过程出错_尝试导入已安装的python模块时收到错误
- LRU（Least Recently Used）算法的理解
- Java内存泄露的理解与解决
- cfF. Boring Queries
- P4011 孤岛营救问题
- Java中Map的使用
- oracle 中DATETIME与TIMESTAMP区别
- 手把手教你写一个微信小程序日历组件
- 【jvm】jvisualvm 离线下载安装插件
- ubuntu17.04 UHD 驱动出错
- 2021年最推荐的十大进销存管理软件排名
- Python二进制内容转为中文（二进制转中文）
- SLC、MLC、TLC闪存颗粒
- 爬了世纪佳缘后发现了一个秘密，世纪佳缘找对象靠谱吗？
- c++/c/java 资源共享群
- arduino与蓝牙模块
热门文章
- 微博快捷登录提示21322重定向地址不匹配（解决方案）
- CRF as RNN 代码解读
- html中搜索栏怎么写,html搜索框怎么做
- ubuntu lotus testnet-staging
- 基于改进yolov4和unet的飞机目标的分割
- 程序员向 GitHub 仓库提交 PR，结果 “轰炸” 了近 40 万开发者
- 泵引理 Pumping Lemma
- 07-07-Exchange Server 2019-配置-脱机地址簿
- Internal: Invoking ptxas not supported on WindowsRelying on driver to perform ptx compilation.
- Android适配解决方案