打印样式CSS的技巧和要点

作者: 前端知识  发布:2019-08-29

打字与印刷样式CSS的技术和要义

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

初稿出处: cocss   

不通过其余处理而直白打字与印刷网址上的页面会获得三个不地道的效应。

咱俩WEB开垦职员能够回顾利用多少个要点来使之达到较为适宜的成效:

  • 动用响应式布局设置打字与印刷的功力
  • 在特别的时候打字与印刷背景图片和颜色
  • 丰富显得的网站或页面链接,以供参谋
  • 选用css filter 升高打字与印刷的图形效果

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

本着打字与印刷的样式,并不是显示屏突显样式

首先,大家需求利用媒体询问(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) "> ";
}

怀有这一个格局都假定客商将三番两次透过手工业输入网站。 四个越来越好的实施方案是因而提供相称的QSportage码的数字版本的页面更便于访谈。

推而广之超链接
@media print {
article a {
font-weight: bolder;
text-decoration: none;
}

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

如下图:

金沙澳门官网网址 2

我们必要运用Google 图形API来落到实处:

  • 我们盼望谷歌(Google)提供的图片音信( qr ,在我们的事例中);
  • 展现大小的的Q奥德赛印记,以像素为单位;
  • UEscortL进行编码;
  • 动用的字符编码情势。

常常大家会在页面顶上部分的四个标题成分关联的UPAJEROL:

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,则足以自动生成当下页面的U奇骏L:

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 ,在我们的事例中);
显示大小的的QLX570印记,以像素为单位;
UCRUISERL实行编码;
利用的字符编码格局。

平日大家会在页面顶上部分的三个标题成分关联的UCRUISERL:
@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,则足以自动生成当下页面包车型地铁UOdysseyL:

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


页面模块
页面模块定义了页面区域和拾陆个围绕的边距盒。页面区域是页面上一块页面内容流动的空间。当不仅了它的容纳范围,就能创建另三个页面。边界盒只在CSS生成的从头到尾的经过上运用。

本文由金沙澳门官网发布于前端知识,转载请注明出处:打印样式CSS的技巧和要点

关键词: 金沙澳门官网

上一篇:编排更加好的CSS代码,css代码优化
下一篇:没有了