css print 样式【彩民之家高手论坛】

2019-09-19 05:08 来源:未知

动用CSS3 Filter 升高打字与印刷的成色

浏览器平常会打字与印刷出横幅图像,极度是一旦有题指标理所必然在昏天黑地的背景是反革命的:

彩民之家高手论坛 1

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或纯深蓝背景)的结果是:

 彩民之家高手论坛 2


orphans 设置当元素内部发面生页时必需在页面底部保留的最少行数。
widows 设置当成分里面发面生页时必须在页面顶上部分保留的最少行数。比方:

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

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

初稿出处: cocss   

不通过任何管理而间接打字与印刷网址上的页面会获得二个不佳好的成效。

咱们WEB开拓职员能够省略利用多少个要点来使之达到较为适宜的机能:

  • 应用响应式布局设置打字与印刷的成效
  • 在适度的时候打字与印刷背景图片和颜料
  • 增进显得的网站或页面链接,以供参照他事他说加以考察
  • 使用css filter 进步打字与印刷的图样效果

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

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

总结

由于打印不平价追踪,而且贫乏爱惜。在WEB开荒中也每每被忽视,大繁多时候大家只阅读线上的网页,并不是打字与印刷出来。 另一方面固然大家只是不常须求打印的东西从网址,那将是名符其实的,要是页面设计适合的打字与印刷机,如同今世的网址适应各类荧屏尺寸和设施。 打字与印刷的自适应设计,可用性和可访问性和Web开拓的根本组成都部队分,一样应思量的另八个上边。 管理打印自适应设计的另一个地点,大家达成更加多的网址客户的要求-并在同期,节省墨水,纸张和任何能源,全体这么些都以致关重大的地点可持续发展的设计 。

赞 1 收藏 2 评论

彩民之家高手论坛 3

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或纯灰湖绿背景)的结果是:

计数器
页码:
CSS提供了约定义页面计数器;它从1伊始还要每新的一页加1 。放到边距盒的在那之中之一。
在底下的例证中,大家把页码放在奇数页的右下角和偶数页的左下角。
@page:right{
@bottom-right {content: counter(page); }
}
@page:left{
@bottom-left { content: counter(page); }
}

背景图片和颜料

对于部分网址,颜色和背景图依旧极度须求须要遵从的。纵然客商是在 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.


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

针对打字与印刷的体裁,并非显示器展现样式

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

固然那几个还不到家,可是那是三个美丽的上马

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

转换内容
string-set的值是你想给这段内容得到名字然后利用content()。随后你能够用string()作为转换内容输出。
h1 {
string-set: doctitle content();
}
@page :right {
@top-right {
content: string(doctitle);
margin: 30pt 0 10pt 0;
font-size: 8pt;
}
}

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

如下图:

彩民之家高手论坛 4

咱俩须要利用谷歌(Google) 图形API来实现:

  • 笔者们愿意谷歌(Google)提供的图片音信( qr ,在大家的例子中);
  • 呈现大小的的Q哈弗印记,以像素为单位;
  • UKugaL进行编码;
  • 使用的字符编码格局。

平日大家会在页面最上端的贰个题名成分关联的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;
   }
}

变动内容
eg:把书名增添到奇数页边距盒的左下角
@page:right{
@bottom-left {margin: 10pt 0 30pt 0; border-top: .25pt solid *#666; *content: "My book"; font-size: 9pt; color: #333;}
}

web打字与印刷总括:
设置基本的打字与印刷样式 @media print { body { color: #000; background: #fff; } }
遮盖不相干的片段如:导航条、背景图片
动用分米只怕英寸作为单位
应用 @page 调控打字与印刷样式 @page {margin: 2cm; }
制止题目和内容跨页 h2, h3 { page-break-after: avoid; }
防止图片过宽超过纸张 img {max-width: 百分之百 !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>

上面是突显的职能:
彩民之家高手论坛 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) "> ";
}

装有那几个点子都假定用户将继续透过手工业输入网址。 七个更加好的缓和方案是经过提供相称的Q揽胜码的数字版本的页面更易于访谈。

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

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

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

  • 我们盼望谷歌(Google)提供的图样新闻( qr ,在我们的例证中);
  • 表现大小的的Q哈弗印记,以像素为单位;
  • UENVISIONL举行编码;
  • 应用的字符编码格局。
    普普通通大家会在页面最上部的贰个标题成分关联的UEnclaveL:
    @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:

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

页面模块
页面模块定义了页面区域和16个围绕的边距盒。页面区域是页面上一块页面内容流动的半空中。当不仅了它的包容范围,就可以创造另三个页面。边界盒只在CSS生成的内容上选取。

*@page***规则**** **
纸张尺寸,方向,页边距,分页
可用尺寸:5.5*8.5英寸
纸质尺寸:A4 legal
页面方向:portrait 或 landscape
eg: @page{size: A4 landscape; margin:2cm}

分页
表格

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

转移内容
eg:把书名加多到奇数页边距盒的左下角
@page:right{
@bottom-left {margin: 10pt 0 30pt 0; border-top: .25pt solid #666; content: "My book"; font-size: 9pt; color: #333;}
}

打字与印刷链接二维码使之更易于访谈
小编们需求动用谷歌(Google) 图形API来兑现:
大家盼望Google提供的图样音讯( qr ,在大家的例证中);
表现大小的的QPAJERO印记,以像素为单位;
UPAJEROL实行编码;
应用的字符编码格局。

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 :left { margin-left: 3cm; }
**右边距**** **@page :right { margin-left: 4cm;}
**:first **@page :first {// 选拔器选中是文书档案的率先页}
**:blank **@page :blank {// 选中任何“故意左边留白”的页面。要增加那样的文字,我们得以采用对象是边距盒顶端中央的生成内容。
@top-center { content: "This page is intentionally left blank." }
}

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

变动内容
string-set的值是您想给这段内容获取名字然后利用content()。随后你能够用string()作为调换内容输出。
h1 {
string-set: doctitle content();
}
@page :right {
@top-right {
content: string(doctitle);
margin: 30pt 0 10pt 0;
font-size: 8pt;
}
}

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

使用****CSS3 Filter ****增加打字与印刷的身分
浏览器平时会打字与印刷出横幅图像,特别是一旦有失常态的标准在昏天黑地的背景是深褐的:

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

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

引进样式:

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

@media print {
header {
background: none;
color: #000;
}

计数器
css print 样式【彩民之家高手论坛】。页码:
CSS提供了预定义页面计数器;它从1初步还要每新的一页加1 。放到边距盒的内部之一。
在上边包车型地铁事例中,大家把页码放在奇数页的右下角和偶数页的左下角。
@page:right{
@bottom-right {content: counter(page); }
}
@page:left{
@bottom-left { content: counter(page); }
}

利用CSS3 Filter 进步打字与印刷的成色
浏览器平日会打字与印刷出横幅图像,特别是一旦有题指标理当如此在万籁无声的背景是反动的:

orphans 设置当元素里边发生疏页时必需在页面底部保留的最少行数。
widows 设置当成分中间发生疏页时必需在页面顶端保留的最少行数。例如:

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

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

article a[href^="#"]:after {
content: "";
}
//链接左近图疑似比较劳碌的,理想的事态是图像周边的链接将有三个class。
$a:after > img {
content: "";
}
//CSS选拔器完成将异常的粗略:
a:not(:local-link):after {
content:" <" attr(href) "> ";
}


左边距 @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." }
}

一般说来大家会在页面最上部的贰个题名成分关联的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,则足以自动生成当下页面包车型大巴UCRUISERL:

自定义css计数器
为章节创设三个叫chapternum的计数器並且每出现h1扩展-
body {
counter-reset: chapternum;// 计数器名
}
h1:before {
counter-increment: chapternum; //计数扩充
content: counter(chapternum) ". ";
}

分页
表格

@page规则
纸张尺寸,方向,页边距,分页
可用尺寸:5.5*8.5英寸
纸质尺寸:CIMA 或 legal
页面方向:portrait 或 landscape
eg: @page{size: A4 landscape; margin:2cm}

@media print {
header {
background: none;
color: #000;
}

图像的计数
应用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) ". ";
}

article a[href^="#"]:after {
content: "";
}
//链接左近图像是比较费心的,理想的场所是图像周边的链接将有三个class。
$a:after > img {
content: "";
}
//CSS选用器达成将一点也不细略:
a:not(:local-link):after {
content:" <" attr(href) "> ";
}

  1. <link rel=“” href=“” media=“print”/>
  2. @media print{}

打字与印刷链接二维码使之更易于访问
大家必要选择谷歌(Google) 图形API来达成:


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

图像的计数
行使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) ". ";
}

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

TAG标签: 技术 css 前端
版权声明:本文由彩民之家高手论坛发布于前端知识,转载请注明出处:css print 样式【彩民之家高手论坛】