引入样式：
<link rel=“” href=“” media=“print”/>
@media print{}
单位****(cm,in****英寸****)
1 inch = 2.54 cm
1cm = 96/2.54 ≈ 37.80 px
1px = 2.54/96 ≈ 0.0265 cm
100px = 2.65 cm
A4纸的标准尺寸为:
21.0cm * 29.7 cm
在96DPI分辨率下,其对应的像素尺寸大约为:
794px * 1123px
web打印总结：
设置基本的打印样式**** @media print { body { color: #000; background: #fff; } }
隐藏不相关的部分如：导航条、背景图片
使用厘米或者英寸作为单位
使用**** @page ****控制打印样式**** @page {margin: 2cm; }
避免标题和内容跨页**** h2, h3 { page-break-after: avoid; }
防止图片过宽超出纸张**** img {max-width: 100% !important;}
articles ****文章内容新分页：**** article {page-break-before: always;}
列表和图片不被页：**** ul, img {page-break-inside: avoid;}
强制打印页面背景图和颜色（****firefox opera ****和****IE****可能不支持）
@media print and (color) { * { -webkit-print-color-adjust: exact;print-color-adjust: exact; }}
扩展超链接
@media print {
article a {
font-weight: bolder;
text-decoration: none;
}
article a[href^=http]:after {
content:" <" attr(href) "> ";
}
}
article a[href^="#"]:after {
content: "";
}
／／链接周围图像是比较麻烦的，理想的情况是图像周围的链接将有一个class。
$a:after > img {
content: "";
}
／／CSS选择器实现将很简单：
a:not(:local-link):after {
content:" <" attr(href) "> ";
}
打印链接二维码使之更容易访问
我们需要使用谷歌 图形API来实现：
我们希望谷歌提供的图表信息（ qr ，在我们的例子中）;
呈现大小的的QR印记，以像素为单位;
URL进行编码;
使用的字符编码形式。
通常我们会在页面顶部的一个标题元素关联的URL：
@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:
@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的样式：
@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 ****提高打印的质量
浏览器通常会打印出横幅图像，特别是如果有问题的旗帜在黑暗的背景是白色的：
@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文件写：
<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或纯黑色背景）的结果是：
*@page****规则**** **
纸张尺寸,方向,页边距,分页
可用尺寸：5.5＊8.5英寸
纸质尺寸：A4 *或 legal
页面方向：portrait 或 landscape
eg： @page{size: A4 landscape; margin:2cm}
页面模块
页面模块定义了页面区域和16个环绕的边距盒。页面区域是页面上一块页面内容流动的空间。当超出了它的容纳范围，就会创建另一个页面。边界盒只在CSS生成的内容上使用。
**左边距**** **@page :left { margin-left: 3cm; }
**右边距**** **@page :right { margin-left: 4cm;}
**:first **@page :first {// 选择器选中是文档的第一页}
**:blank **@page :blank {// 选中任何“故意左侧留白”的页面。要添加这样的文字，我们可以使用目标是边距盒顶部中心的生成内容。
@top-center { content: "This page is intentionally left blank." }
}
生成内容
eg：把书名添加到奇数页边距盒的左下角
@page:right{
@bottom-left {margin: 10pt 0 30pt 0; border-top: .25pt solid *#666; *content: "My book"; font-size: 9pt; color: #333;}
}
分页符
强制标题处于页面开头
避免标题后面立即断页
避免断开图像和表格
h1 { page-break-before: always;}
h1, h2, h3, h4, h5 { page-break-after: avoid;}
table, figure { page-break-inside: avoid;}
计数器
页码：
CSS提供了预定义页面计数器；它从1开始并且每新的一页加1 。放到边距盒的其中之一。
在下面的例子中，我们把页码放在奇数页的右下角和偶数页的左下角。
@page:right{
@bottom-right {content: counter(page); }
}
@page:left{
@bottom-left { content: counter(page); }
}
自定义****css****计数器
为章节创建一个叫chapternum的计数器并且每出现h1增加-
body {
counter-reset: chapternum;// 计数器名
}
h1:before {
counter-increment: chapternum; //计数增加
content: counter(chapternum) ". ";
}
图像的计数
使用chapternum.figurenum。所以“Figure 3-2”代表第三章第二幅图。
body {
counter-reset: chapternum figurenum;
}
h1 {
counter-reset: figurenum; // 重置figurenum让它每章都从1开始
}
h1.title:before {
counter-increment: chapternum;
content: counter(chapternum) ". ";
}
figcaption:before {
counter-increment: figurenum;
content: counter(chapternum) "-" counter(figurenum) ". ";
}
生成内容
string-set的值是你想给这段内容取得名字然后使用content()。随后你可以用string()作为生成内容输出。
h1 {
string-set: doctitle content();
}
@page :right {
@top-right {
content: string(doctitle);
margin: 30pt 0 10pt 0;
font-size: 8pt;
}
}
page-break-after 设置元素后是否应当放置分页符。 auto、always、avoid、left、right
page-break-before 设置元素前否应当放置分页符。 auto、always、avoid、left、right
page-break-inside 设置元素内部是否应当放置分页符。 auto、avoid
orphans 设置当元素内部发生分页时必须在页面底部保留的最少行数。
widows 设置当元素内部发生分页时必须在页面顶部保留的最少行数。比如:
h2, h3 { page-break-after: avoid; }
分页
表格
网友评论