快捷搜索:
来自 新京葡娱乐场网址 2019-09-01 11:56 的文章
当前位置: 67677新澳门手机版 > 新京葡娱乐场网址 > 正文

【新京葡娱乐场网址】打印样式CSS的技巧和要义

打印样式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
AUDI纸的典型尺寸为:
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) "> ";
}

富有这么些主意都假定客商将连续透过手工业输入网站。 两个越来越好的施工方案是通过提供相称的QENVISION码的数字版本的页面更便于访谈。

增添超链接
@media print {
article a {
font-weight: bolder;
text-decoration: none;
}

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

如下图:

新京葡娱乐场网址 2

我们须要选拔谷歌(Google) 图形API来贯彻:

  • 咱俩意在Google提供的图纸音讯( qr ,在大家的例证中);
  • 表现大小的的QOdyssey印记,以像素为单位;
  • U科雷傲L进行编码;
  • 行使的字符编码情势。

普普通通我们会在页面最上部的三个标题成分关联的U宝马X5L:

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,则能够自动生成当下页面包车型地铁UMuranoL:

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 ,在我们的例子中);
表现大小的的Q奇骏印记,以像素为单位;
U奥迪Q5L进行编码;
运用的字符编码格局。

一般我们会在页面最上部的八个题名成分关联的U福特ExplorerL:
@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:

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


页面模块
页面模块定义了页面区域和15个围绕的边距盒。页面区域是页面上一块页面内容流动的长空。当不独有了它的包容范围,就能够创制另一个页面。边界盒只在CSS生成的剧情上利用。

本文由67677新澳门手机版发布于新京葡娱乐场网址,转载请注明出处:【新京葡娱乐场网址】打印样式CSS的技巧和要义

关键词: