来自 软件资讯 2019-09-19 08:22 的文章
当前位置: 威尼斯国际官方网站 > 软件资讯 > 正文

奥门威尼斯网址:打印样式CSS的技巧和要点

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

如下图:

奥门威尼斯网址 1

大家须求利用谷歌(Google) 图形API来完成:

  • 大家愿意谷歌(Google)提供的图样新闻( qr ,在我们的例子中);
  • 表现大小的的Q卡宴印记,以像素为单位;
  • UGL450L进行编码;
  • 利用的字符编码方式。

常常我们会在页面最上端的贰个题名成分关联的U奥德赛L:

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

page-break-after 设置成分后是或不是合宜放置分页符。 auto、always、avoid、left、right
page-break-before 设置成分前否应当放置分页符。 auto、always、avoid、left、right
page-break-inside 设置成分内部是还是不是应当放置分页符。 auto、avoid

总结

鉴于打字与印刷不便宜追踪,并且紧缺尊敬。在WEB开荒中也每每被忽视,大非常多时候大家只阅读线上的网页,并不是打字与印刷出来。 另一方面固然大家只是不经常必要打字与印刷的东西从网址,那将是完美的,假若页面设计符合的打字与印刷机,就像当代的网站适应各个显示器尺寸和道具。 打字与印刷的自适应设计,可用性和可访问性和Web开采的显要组成都部队分,一样应思量的另三个上边。 处理打字与印刷自适应设计的另三个地点,大家落实更加的多的网站客户的须要-并在同时,节省墨水,纸张和任何能源,全体这几个都是重视的地点可持续发展的设计 。

赞 1 收藏 2 评论

奥门威尼斯网址 2

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

针对打字与印刷的样式,并非荧屏显示样式

率先,大家要求利用媒体询问(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;
}

尽管这么些还不圆满,不过这是一个佳绩的始发

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

应用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

分页符
强制标题处于页面开头
幸免题目后边即刻断页
幸免断开图像和表格
h1 { page-break-before: always;}
h1, h2, h3, h4, h5 { page-break-after: avoid;}
table, figure { page-break-inside: avoid;}

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

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

咱俩得以将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>

上面是呈现的法力:
奥门威尼斯网址 5
其间二个主题素材是,打字与印刷页面上的锚文本和图像链接也将扩大。大家能够很好的用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) "> ";
}

装有这个方法都假定客商将持续通过手工业输入网站。 四个更加好的缓慢解决方案是因而提供相称的QENCORE码的数字版本的页面更易于访谈。

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

打字与印刷样式CSS的手艺和宗旨

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

初稿出处: cocss   

不经过任何管理而一向打字与印刷网址上的页面会拿到四个不地道的效应。

作者们WEB开采职员能够轻巧利用几个要点来使之达到较为合适的机能:

  • 应用响应式布局设置打字与印刷的成效
  • 在方便的时候打字与印刷背景图片和颜料
  • 累加显得的网站或页面链接,以供参考
  • 应用css filter 提升打字与印刷的图样效果

分页
表格

背景图片和颜色

对于一些网址,颜色和背景图照旧那些须要须要依据的。假诺客商是在 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.

自定义****css****计数器
为章节创制八个叫chapternum的计数器而且每出现h1扩展-
body {
counter-reset: chapternum;// 计数器名
}
h1:before {
counter-increment: chapternum; //计数增加
content: counter(chapternum) ". ";
}

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

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


article a[href^="#"]:after {
content: "";
}
//链接周边图疑似相比麻烦的,理想的情景是图像周围的链接将有三个class。
$a:after > img {
content: "";
}
//CSS选用器完成将很轻巧:
a:not(:local-link):after {
content:" <" attr(href) "> ";
}

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

页面模块
页面模块定义了页面区域和14个围绕的边距盒。页面区域是页面上一块页面内容流动的空间。当不仅了它的包容范围,就能创立另一个页面。边界盒只在CSS生成的内容上行使。

orphans 设置当成分里边发素不相识页时必需在页面尾部保留的最少行数。
widows 设置当成分中间产生疏页时必需在页面最上端保留的最少行数。比如:


本文由威尼斯国际官方网站发布于软件资讯,转载请注明出处:奥门威尼斯网址:打印样式CSS的技巧和要点

关键词: