代码笔记

关于print.css打印机样式的一些总结

阅读

之前在一些项目里曾用过此样式,但那时候主要针对的是文章,最近做了一个项目需要打印表格,并且还要控制行数,于是对打印机样式又作了一番深入的整理学习。

先说说样式的应用:

打印机专用样式标签大法:

/* 打印样式开始 */
@media print {}

或者你可以通过设置link的 media="print" 属性来指定CSS样式专用于打印

<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;}
}

链接的处理

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

/*在超链接后面添加带<
@media print {
article a {font-weight: bolder;text-decoration: none;}
article a[href^=http]:after {content:" <" attr(href) "> ";}
}

显示效果可能是这样的

QQ截图20160325094125.jpg

控制打印设置选项

该@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盒子模型。

注* 支持浏览器较少

QQ截图20160325094351.jpg

@page { width: 50em; }


PAGE边距模型  Page-Margin Boxes

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

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

2203106108-2.jpg

左右页边距

@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;
}
}

显示效果如下:

2203103G5-3.jpg

以上这些,希望对你会有所帮助!



推荐阅读

window.print打印按钮,打印
window.print打印按钮,打...