2017-4-3 09:01| 作者: antzone
使用css也可以控制打印机对页面的打印样式，当然规则有些许不同。
下面就简单介绍一下它的相关规则，需要的朋友可以做一下参考，如果想要熟练操作，当然要实际应用了。
一.专门为打印指定样式:
/* 样式将只应用于打印 */
@media print {
/*code*/
}
关于媒体查询可以参阅css3 Media Queries媒体查询一章节。
当然我们也可以从外部引入专门针对打印机的css样式，代码如下:
<link rel="stylesheet" type="text/css" href="css/print.css" media="print" />
再来看如下代码:
/*白纸黑字*/
@media print {
body {
color: #000;
background: #fff;
}
}
上面可以设置打印内容ewing白纸黑字。
通常我们不是在创建整个网页的截图,只是为了展现一个设计良好的网站相关内容:
<pre style="overflow-wrap: break-word; margin: 0px; padding: 0px;">
/*去除背景图片, 节约笔黑 */
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;
}
}
二.对于链接的处理:
打印的时候，并不能够将链接展示出来，并不能够像使用正常浏览器一样，使用鼠标点击就可以访问。
但是我们可以通过别的途径进行以下弥补，具体可以参阅css打印如何处理链接地址一章节。
三.控制打印设置选项:
@page规则允许您指定页面的各个方面。例如将要指定页面的尺寸、页边距和页眉页脚等都是非常重要的。
这里不多介绍了，具体可以参阅css利用@page规则控制打印设置选项一章节。
网友评论