CSS @meida print @page … 打印的另类样式写法

当前位置: 首页 » 记录 » css » CSS @meida print @page … 打印的另类样式写法

分类: css 2,076阅读阅读模式

CSS 控制打印样式累总。

 

1、专属样式

CSS 有专属于打印的样式表达,通过媒体查询 @media print{ ... }表示样式在打印时才起作用,控制打印页面的有 @page { ... }

 

2、页面大小

默认的,size 的默认值为 auto ;

定义页面大小时,可通过 size 调节大小,定义大小同时会去除默认页脚页眉。默认的具有几个尺寸供选择。

  • A5 :A5 的规定大小等同于 14.8cm x 21.0cm
  • A4 :A4 的规定大小等同于 21.0cm x 29.7cm
  • A3 :A3 的规定大小等同于 29.7cm x 42.0cm
  • B5 :B5 的规定大小等同于 17.6cm x 25.0cm
  • B4 :B4 的规定大小等同于 25.0cm x 35.3cm
  • letter :letter 的规定大小等同于信纸大小,常用英尺单位 8.5in x 11in
  • legal :legal 的规定大小等同于法律用纸大小,常用英尺单位 8.5in x 11in
  • ledger :ledger 的规定大小等同于账簿大小,常用英尺单位 11in x 17in

当然也可以根据需求自定义大小,如

  1. @page{
  2. size: A3;
  3. }

可以写成

  1. @page{
  2. size: 29.7cm 42.0cm;
  3. }

对于默认的给定的尺寸,可以控制页面的横向「landscape」及纵向「portrait」,奇怪的是,对于自定义尺寸的,横纵向的控制是无效的,并且导致样式失效。

正确的写法

  1. @page{
  2. size: A3 landscape;
  3. }

错误的写法

  1. @page{
  2. size: 29.7cm 42.0cm landscape;
  3. }

注:定义页面大小后,无法通过设备再次调节(如谷歌浏览器的打印页面的设置大小将无效)。

 

3、页面模块

截止目前 CSS 打印模块尚在草案。

4、页面边距

页面边距通过 margin 控制,在 @page 中写 margin ,支持 %,px,cm,mm ... 。

@page 中还有个封面页的概念,可单独对封面页进行操作,用到:first 伪类

如:封面页边距为 6cm ,内容页为 3cm

  1. @page {
  2. margin: 3cm;
  3. }
  4. @page :first {
  5. margin: 6cm;
  6. }

同时还可以操作左侧面「:left」或右侧面「:right」 ,在伪类的操作中,可以控制border、background、margin、padding ,其他的一概不可控。

相对页面从左往右的左侧面生效的边距则为左边距,右侧面生效的为右边距,同理,反向的话,左侧右边距,右侧左边距。

如左侧面边距为3cm,右侧面边距5cm

  1. @page :left {
  2. margin: 3cm;
  3. }
  4. @page :right {
  5. margin: 5cm;
  6. }

 

5、分页控制

页面有完整的展示的需求,可以通过相应的分页控制来调节。

5.1、page-break-inside

该属性定义相应标签是否要分页,当内容区定义了 avoid 属性,那么就优先不分页。

优先不分页是指两种情况,第一内容区高度小于打印单页面高度,第二内容去高度大于打印单页面高度。

第一种小于的情况,内容区不会分页,如果内容区刚刚在分页中间,那么将会另起一页,如图

第二种大于的情况,内容区仍然会分页,但会在新页面展示,超出新页面的续在新页面往后的页面。

5.2、page-break-before

page-break-before 有几种情况

  • auto :默认值,根据情况自动调节分页。
  • avoid : 指定内容区页面前面允许有内容。
  • always :指定内容区页面前面不允许有内容,即内容区在新页面页头开始展示。
  • left :指定内容区页面前面不允许有内容,即内容区在新左页面页头开始展示,
  • right :指定内容区页面前面不允许有内容,即内容区在新右页面页头开始展示。

5.3、page-break-after

page-break-after 几种情况与 page-break-before 相反

  • auto :默认值,根据情况自动调节分页。
  • avoid : 指定内容区页面后面允许有内容。
  • always :指定内容区页面后面不允许有内容,即内容区后面内容在新页面页头开始展示。
  • left :指定内容区页面后面不允许有内容,即内容区后面内容在新左页面页头开始展示,
  • right :指定内容区页面后面不允许有内容,即内容区后面内容在新右页面页头开始展示。

如图,always 情况下,不允许页面内容区「即绿色部分」后面「即红框部分」有内容,留空

 

6、页面计数

后续补充。

7、页面功能

显式外链,顾名思义给外链在相应链接出显示出来。

如下方代码,内部链接及空链接不显示,外部链接将在打印时显示出来

CSS

  1. a[href^=http]:after {
  2. content:" <" attr(href) "> ";
  3. }

HTML

  1. 内部链接:<a href="/index.html">链接1</a>
  2. 外部链接:<a href="http://www.darlang.com">链接2</a>
  3. 空链接或描点 <a href="#linkThree">链接3</a>

例图:

 

参考

https://developer.mozilla.org/en-US/docs/Web/CSS/@page

https://www.w3.org/TR/css3-page/#page-selector

https://www.smashingmagazine.com/2015/01/designing-for-print-with-css/

https://www.smashingmagazine.com/2013/03/tips-and-tricks-for-print-style-sheets/#force-background-images-and-colors

相关文章

评论一下

【注意1】:首次评论使用表情将会进入审核状态。
【注意2】:无意义回复、乱打文字内容将会进入审核状态。
【注意3】:涉及辱骂、色情、政治、毒品、赌博内容将会进入审核状态。
【注意】:首次评论使用表情将会进入审核状态。
暂无评论