打印样式CSS的技巧和要点,控制打印样式
分类:前端技术

打字与印刷样式CSS的本领和宗旨

2013/08/02 · CSS · 2 评论 · CSS

原来的小说出处: cocss   

不经过任哪管理而直接打字与印刷网址上的页面会获得二个无法的效率。

作者们WEB开荒职员能够简轻便单利用多少个要点来使之达到较为适宜的效力:

  • 采取响应式布局设置打字与印刷的效应
  • 在合适的时候打字与印刷背景图片和颜料
  • 累积体现的网站或页面链接,以供参照他事他说加以考察
  • 采取css filter 提升打字与印刷的图纸效果

引进样式:
<link rel=“” href=“” media=“print”/>
@media print{}

jquery 利用CSS 调控打字与印刷样式,jquerycss

风流浪漫、加多打字与印刷样式 

  1. 为显示器呈现和打印分别打算四个css文件,如下所示:
      用于荧屏显示的css: <link rel="stylesheet" href="css/mainstylesheet.css" media="screen" />
      用于打字与印刷的css:<link rel="stylesheet" href="css/printstylesheet.css" media="print" />

  2. import方式:
      <style type="text/css">
          @import url("css/printstylesheet.css") print;
      </style>

  3. 直白把显示器展现样式和打字与印刷样式写在三个css文件中:
      @media print {}{
        h1 {
          color: black;
        }
        h2 {}{
          color: gray;
        }
      }
      @media print里面包车型大巴内容只对打字与印刷出来的剧情使得,之外的源委就是显示器显示的体制。

其他:
创办贰个不点名媒体类型的体裁表日常很有用(只怕选拔media="all")。当你希图好定义一些专程用
于打字与印刷的平整时,能够只开创多少个独自的样式表,使任何在打字与印刷时看起来不佳的体裁都失效。使用这种措施的三个标题是必得保险打字与印刷机样式实际上确实覆盖了主样式表。能够行使!important.

二、打字与印刷样式注意事项: 

1. 打印样式中不推荐使用背景,因为浏览器默许情状下并无法打字与印刷出CSS中的背景内容,独有当浏览器被
  设置能够打字与印刷背景的处境下本领打字与印刷出背(ie的高端选项中可选)。固然背景可以打字与印刷,它也说不定盖过叠在它上边的别样公文。
  那是确实,特别对于用五彩背景在显示屏上显眼比较的公文,可是在是非打字与印刷机上打字与印刷时会融入那生龙活虎背景。
  background:none;去掉背景
  图片和颜色。

  能够行使background-color属性设置背景颜色为粉红白,像那样: font-family: Arial; line-height: 26px;">  使用background的神速法也能够拿走相像的作用:background: white。因而像background: white;
  那样的宣示不止安装了背景颜色为铁锈棕,并且消亡了具有背景图片。利用那一个background的火速属性,
  你达成了三个目标——设置了二个洋蓟绿背景,并清除了图片——只用比超级少的代码。   

  1. 比方急需在打字与印刷内容中现身图片,请在HTML代码中参加。

3. 打字与印刷设置使用的是情理单位,所以尺寸最为不要用像素(px),能够用pt也足以用cm;

  1. 隐敝无需的或是次要的内容。display:none;

5. 不择花招不要让内容更换,有个别浏览器打字与印刷浮动的div的长河中,会有三个难为,必要特地加以注意。 
 不要在打字与印刷的样式表中浮动的块,像这么:float: none;。比方,基于Gecko的浏览器
 (举个例子Netscape 6 ),当客户用它来浏览叁个打印输出页面时,它会截去浮动成分中的内容。
 那些内容就不会被传送到打字与印刷机,下贰个页面也不会有它的踪影――它消失了。

6. 尽或者的在HTML代码中加强内容根本的程序次序,那样在打字与印刷样式中得以节省数不完的辛勤。

  1. 打字与印刷与网页不相像,打字与印刷一定要预先流出白边,单位用英寸(in)。

8. 要保障页面上的具有文件以彩虹色打字与印刷,就用通配选拔器(见第54页)和!important来创建把每种
  标签都格式化为青蓝文本的单个样式:
  *{ color: ##000# !important }

9. 在打字与印刷中展现链接url的音讯:利用三个高端的选用器:after和一个高等的CSS属性称作content,
  把不在荧屏上显示的文印在一个体裁成分的前边。
  不幸的是,:after选拔器和content属性才能在Internet Explorer 6只怕更早的本子上不起成效
  (到编辑本书结束,在IE 7上也要命)。不过它在Firefox和Safari上真正能够,由此你足足能够清楚
  地印证UMuranoL以便媒体人能够接纳他们的浏览器。

  为了造成这一点,给打字与印刷样式表增添三个体裁,在各样链接后面打字与印刷出URAV4L。你以至足以加多任何文本项
  目比方圆括号,使它更加美观些:
  a:after {content: " (" attr(href) ") ";}

  但是,那几个CSS不区极其部也许此中的链接,由此它也打印出达到同二个网址其余页面包车型地铁没用的周旋
  文书档案链接:“访谈主页(../../index. html)。”利用一小点CSS 3法力,就能够强制那一个样式只打
  印绝对的U宝马7系L(即以
  a[href^=" {content: " (" attr(href) ") ";}

10.给打字与印刷增多分页符:二种被布满承认的质量是page-break-before和page-break-after。
  page-break-before告诉网页浏览器在一个点名样式从前插入一个分页符。利用page-break-before
  属性使图片打字与印刷在一张新页面上,并且符合整张页面。
  要使贰个因素作为打字与印刷页上的末梢三个连串显得,就给那一个成分的体制增添page-break-after: always。

  成立多少个类样式,以看似于.break_after和.break_before的名字来命名,像那样:
  .break_before { page-break-before: always; }
  .break_after { page-break-after: always; }

  然后您能够选拔性地把那几个样式应用给相应打字与印刷在网页最上端也许底部的要素。

三、测验打印样式 

不足为道来讲大家不可能用打字与印刷机来进展测量试验,在IE浏览器菜单栏“文件”中有“打印预览”,能够经过那
打字与印刷预览来做测验。

利用CSS 调节打字与印刷样式,jquerycss 风流倜傥、增添打字与印刷样式 1. 为显示屏展现和打字与印刷分别企图二个css文件,如下所示: 用于显示屏显示的css: link r...

本着打字与印刷的体裁,实际不是显示屏展现样式

首先,我们供给利用媒体询问(media query)针对打字与印刷样式设置。

JavaScript

@media print { }

1
2
3
@media print {
 
}

双重针对打印写CSS样式是从未须求的,大家只需求针对间距设置打字与印刷的体制覆盖掉早前的暗许样式。

大部的浏览器会自动遵照打字与印刷矫正颜色,以节约打字与印刷原料,可是大家依旧尽量的手工业安装一下。

为了达到最好效果与利益,使颜色清晰明了,大家足足要求饱含一下主干的打印样式。

JavaScript

@media print { body { color: #000; background: #fff; } }

1
@media print { body { color: #000; background: #fff; } }

对于打字与印刷,大大多气象下大家不供给打字与印刷整个页面,只必要打字与印刷贰个轻松的能够鼓起须求音讯的页面,那么大家将不相干的部分隐敝掉(如:导航条、背景图片)。

JavaScript

/* Default styles */ h1 { color: #fff; background: url(banner.jpg); } @media print { h1 { color: #000; background: none; } nav, aside { display: none; } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* Default styles */
 
h1 {
   color: #fff;
   background: url(banner.jpg);
}
 
@media print {
   h1 {
      color: #000;
      background: none;
   }
 
   nav, aside {
      display: none;
   }
}

在编写制定打印样式表的时候,你要当心要选择分米可能英寸作为单位实际不是显示屏像素单位,实际的单位对打字与印刷非常实用。

为了确认保证打字与印刷样式有用,写CSS样式使打印的内容距离纸张边缘,看起来更加好,要求利用 @page 这些语法:

JavaScript

@media print { h1 { color: #000; background: none; } nav, aside { display: none; } body, article { width: 100%; margin: 0; padding: 0; } @page { margin: 2cm; } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
@media print {
   h1 {
      color: #000;
      background: none;
   }
 
   nav, aside {
      display: none;
   }
 
   body, article {
      width: 100%;
      margin: 0;
      padding: 0;
   }
 
   @page {
      margin: 2cm;
   }
}

为了确定保证不被跨页打字与印刷,如三个题名和内容在页面尾部被分别:

JavaScript

h2, h3 { page-break-after: avoid; }

1
h2, h3 { page-break-after: avoid; }

另一中状态是要防止图片过宽而高于纸张边缘:

JavaScript

img { max-width: 100% !important; }

1
2
3
img {
   max-width: 100% !important;
}

其六当中央是承接保险 articles 文章标签的原委,在新的生龙活虎页先导:

JavaScript

article { page-break-before: always; }

1
2
3
article {
   page-break-before: always;
}

末段,还要小心列表和图片不被分别在分歧的页:

JavaScript

ul, img { page-break-inside: avoid; }

1
2
3
ul, img {
   page-break-inside: avoid;
}

固然这么些还不到家,然则那是叁个优良的上马

单位****(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
凯越纸的标准尺寸为:
21.0cm * 29.7 cm
在96DPI分辨率下,其相应的像素尺寸大致为:
794px * 1123px

背景图片和颜料

对于一些网址,颜色和背景图依然不行必要须要根据的。若是客户是在 webkit 内核浏览器上打字与印刷的话,大家得以强制打印机打字与印刷显示器上所看见的颜料(即强制在打字与印刷页面上现身别的的背景图和颜料),常常的话彩色打字与印刷机能够做到那点,大家供给八个独自的媒体询问:

JavaScript

@media print and (color) { * { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

1
2
3
4
5
6
@media print and (color) {
   * {
      -webkit-print-color-adjust: exact;
      print-color-adjust: exact;
   }
}

不满的是,这无法立刻采纳于firefox opera 和IE.

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

扩充打字与印刷样式里的超链接

假定直白打字与印刷,超链接将只是少数文字,而不会产出链接的网址,那样来讲,是还未意思的。

大家得以将url链接显示在打字与印刷的页面上,我们能够利用:after伪类来促成而不影响周边的要素布局:

JavaScript

@media print { article a { font-weight: bolder; text-decoration: none; } article a[href^=http]:after { content:" <" attr(href) "> "; } }

1
2
3
4
5
6
7
8
9
10
@media print {
   article a {
      font-weight: bolder;
      text-decoration: none;
   }
 
   article a[href^=http]:after {
      content:" <" attr(href) "> ";
   }
}

看下边这是HTML:

JavaScript

<p>You’ve explored this <a href="/blog">website</a>; now it’s time to <a href=" other Web development documentation</a>.</p>

1
<p>You’ve explored this <a href="/blog">website</a>; now it’s time to <a href="http://www.webplatform.org/">read other Web development documentation</a>.</p>

上面是显示的效果:
图片 1
内部贰个题目是,打字与印刷页面上的锚文本和图像链接也将扩张。大家得以很好的用CSS准则修复。

JavaScript

article a[href^="#"]:after { content: ""; }

1
2
3
article a[href^="#"]:after {
   content: "";
}

链接周边图疑似相比麻烦的,理想的景色是图像周围的链接将有二个class。

JavaScript

$a:after > img { content: ""; }

1
2
3
$a:after > img {
   content: "";
}

CSS接收器实现将很简短:

JavaScript

a:not(:local-link):after { content:" <" attr(href) "> "; }

1
2
3
a:not(:local-link):after {
   content:" <" attr(href) "> ";
}

怀有这么些艺术都假定顾客将三回九转通过手工业输入网站。 叁个越来越好的解决方案是因此提供相配的Q揽胜码的数字版本的页面更易于访谈。

扩马珂链接
@media print {
article a {
font-weight: bolder;
text-decoration: none;
}

打字与印刷链接二维码使之更便于访谈

如下图:

图片 2

咱俩供给动用谷歌(Google) 图形API来落实:

  • 我们盼望谷歌(Google)提供的图纸新闻( qr ,在我们的例子中);
  • 呈现大小的的Q奇骏印记,以像素为单位;
  • U奇骏L举办编码;
  • 应用的字符编码方式。

平凡我们会在页面最上部的多个题名成分关联的UHighlanderL:

XHTML

<header> <h1>Lizabeth’s Salon</h1> <h2>Providing Intellectual Stimulation Online Since 2001</h1> </header>

1
2
3
4
<header>
<h1>Lizabeth’s Salon</h1>
<h2>Providing Intellectual Stimulation Online Since 2001</h1>
</header>

为了创设预期的打字与印刷结果,大家将提供丰硕的间距给H1用来放置二维码,因为那些二维码需求追加到各个页面,我们需求扩展一条CSS准则:

JavaScript

@media print { header h1:after { content: url(); position: absolute; right: 0; top: 0; } }

1
2
3
4
5
6
7
8
@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,则能够自动生成当下页面包车型客车USportageL:

JavaScript

@media print { h1:after { content: url( &chl=; &choe=UTF-8); position: absolute; right: 0; top: 0; } }

1
2
3
4
5
6
7
8
9
10
@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的样式:

JavaScript

@media print { h1:after { content: url( &chl=); position: absolute; right: 0; top: 0; } }

1
2
3
4
5
6
7
8
9
@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;
   }
}

article a[href^=http]:after {
content:" <" attr(href) "> ";
}
}

行使CSS3 Filter 提升打印的品质

浏览器日常会打字与印刷出横幅图像,特别是如果不时的模范在漆黑的背景是反动的:

图片 3

JavaScript

@media print { header { background: none; color: #000; } header img { filter: url(inverse.svg#negative); -webkit-filter: invert(100%); filter: invert(100%); } }

1
2
3
4
5
6
7
8
9
10
11
12
@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文件写:

JavaScript

<svg xmlns="; <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>

1
2
3
4
5
6
7
8
<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或纯石黄背景)的结果是:

 图片 4

article a[href^="#"]:after {
content: "";
}
//链接周边图疑似比较麻烦的,理想的意况是图像左近的链接将有二个class。
$a:after > img {
content: "";
}
//CSS接收器完成将很简短:
a:not(:local-link):after {
content:" <" attr(href) "> ";
}

总结

由于打字与印刷不低价追踪,况且缺少注重。在WEB开垦中也屡屡被忽略,大非常多时候大家只阅读线上的网页,并不是打印出来。 另一面纵然大家只是有时供给打字与印刷的东西从网址,那将是了不起的,假设页面设计相符的打字与印刷机,就好像今世的网址适应各个显示器尺寸和设备。 打字与印刷的自适应设计,可用性和可访谈性和Web开荒的要紧组成都部队分,同样应惦念的另二个上边。 管理打字与印刷自适应设计的另三个地方,大家贯彻越多的网址客商的要求-并在同一时候,节省墨水,纸张和其余能源,全部这一个都以首要的地点可持续发展的设计 。

赞 1 收藏 2 评论

图片 5

打字与印刷链接二维码使之更便于访谈
咱俩必要接受Google 图形API来兑现:
笔者们期待谷歌(Google)提供的图纸音信( qr ,在我们的例子中);
显示大小的的QSportage印记,以像素为单位;
ULacrosseL进行编码;
接纳的字符编码情势。

平日我们会在页面最上端的二个题名成分关联的U帕杰罗L:
@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,则能够自动生成当下页面的U奥迪Q3L:

@media print {
h1:after {
content: url(https://chart.googleapis.com/chart?cht=qr&chs=150x150
&chl=;
&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=);
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=";
<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}


页面模块
页面模块定义了页面区域和17个围绕的边距盒。页面区域是页面上一块页面内容流动的上空。当不仅了它的宽容范围,就能创立另一个页面。边界盒只在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; }

分页
表格

本文由pc28.am发布于前端技术,转载请注明出处:打印样式CSS的技巧和要点,控制打印样式

上一篇:选用器汇总,伪类选用器 下一篇:没有了
猜你喜欢
热门排行
精彩图文