与打印相关的CSS样式 @ 11/27/2017

技术类
引入打印样式:
方法1:
<link rel="stylesheet" href="print.css" media="print" />

方法2:
<style type="text/css">
@media print selector {
  ...
}
@media print {
  selector{
    ...
  }
}
</style>

方法3:
<style type="text/css">
@import url(print.css) print;
</style>

度量单位:
打印时要使用物理单位,比如cm或in(英寸)。
A4纸的标准尺寸为: 21.0cm * 29.7 cm
1 inch = 2.54 cm
1 cm = 96/2.54 ≈ 37.80 px
1 px = 2.54/96 ≈ 0.0265 cm

@page规则:
@page规则指定了打印页面的一些属性,包括纸张尺寸,方向,页边距,分页等特性。
@page :pseudo-class {
  size: A4 landscape;
  margin: 2cm;
}
CSS3里面增加了几个新的样式:
•marks: none | [ crop || cross ] 裁切
•bleed: auto | <length> 出血
•box-decoration-break: slice | clone 如果元素被分页,边框怎么处理

打印相关样式表
以下样式都可以在@page的伪类中使用。
•page-break-before 用于设置元素前面的分页行为,可取值:
    •auto 默认值。如果必要则在元素前插入分页符。
    •always 在元素前插入分页符。
    •avoid 避免在元素前插入分页符。
    •left 在元素之前足够的分页符,一直到一张空白的左页为止。
    •right 在元素之前足够的分页符,一直到一张空白的右页为止。
    •inherit 规定应该从父元素继承 page-break-before 属性的设置。
•page-break-after 设置元素后的分页行为。取值与page-break-before一样。
•page-break-inside 设置元素内部的分页行为。取值如下:
    •auto 默认。如果必要则在元素内部插入分页符。
    •avoid 避免在元素内部插入分页符。
    •inherit 规定应该从父元素继承 page-break-inside 属性的设置。
•orphans 设置当元素内部发生分页时必须在页面底部保留的最少行数。
•widows 设置当元素内部发生分页时必须在页面顶部保留的最少行数。

比如:
@media print {
  section {page-break-before: always;}
  h1 {page-break-after: always;}
  p {page-break-inside: avoid;}
}
@media print {
  p {orphans:3; widows:2;}
}

其他:
1. 对于页面上有显示而不想打印的内容,可以将其display设置为none来避免打印。
2. 需要打印的内容尽量避免float,有些浏览器不会正确的打印浮动的内容。
发布于 11/27/2017 18:10:52 | 评论:0

看帖要回帖...

categories
archives
links
statistics
  • 网志数:1126
  • 评论数:2008