打印样式,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的快捷属性,
打印样式,CSS完结控制打印样式。  你兑现了多个目的——设置了一个反革命背景,并解决了图片——只用很少的代码。
 

  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上实在可以,因而你足足能够领会
  地证实URL以便访问者可以动用他们的浏览器。

 
为了成功这一点,给打印样式表添加一个体制,在各样链接前边打印出URL。你居然足以增加任何文本项
  目比如圆括号,使它更雅观些:
  a:after {content: ” (” attr(href) “) “;}

 
然则,这些CSS不区极度部恐怕其中的链接,由此它也打印出到达同一个网站其余页面的没用的绝对
  文档链接:“访问主页(../../index. html)。”利用一点点CSS
3魔法,就足以强制这一个样式只打
  印相对的URL(即以
  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浏览器菜单栏“文件”中有“打印预览”,可以经过那
打印预览来做测试。

一、添加打印样式 1. 为屏幕彰显和打印分别准备一个css文件,如下所示:
用于显示屏突显的css: l…

本着打印的体裁,而不是显示器显示样式

先是,大家需求利用媒体询问(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
A4纸的正儿八经尺寸为:
21.0cm * 29.7 cm
在96DPI分辨率下,其相应的像素尺寸大概为:
794px * 1123px

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

背景图片和颜料

对于部分网站,颜色和背景图依旧那些要求须要依据的。假使用户是在 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; }}

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

推而广之打印样式里的超链接

假如直白打印,超链接将只是少数文字,而不会产出链接的网址,那样来说,是从未有过意义的。

咱俩得以将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) "> ";
}

富有那些主意都假定用户将继续透过手工输入网址。
一个更好的化解方案是通过提供匹配的QR码的数字版本的页面更易于访问。

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

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

打印链接二维码使之更易于访问

如下图:

亚洲必赢官网 2

俺们要求运用谷歌(谷歌(Google)) 图形API来兑现:

  • 大家意在谷歌提供的图片信息( qr ,在我们的例证中);
  • 表现大小的的QR印记,以像素为单位;
  • URL进行编码;
  • 利用的字符编码方式。

平日大家会在页面顶部的一个题名成分关联的URL:

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=150×150&chl=http://yourdomain.com&choe=UTF-8);
      position: absolute;
      right: 0;
      top: 0;
   }
}

以此办法的弱点是使开发者各种成分都呼吁一个API。尽管你的主机是PHP,则可以自动生成当下页面的URL:

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=150×150
&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=150×150
&chl=http://<?phpthe_permalink();?>&choe=UTF-8);
      position: absolute;
      right: 0;
      top: 0;
   }
}

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

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

应用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) “> “;
}

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

总结

鉴于打印不便宜跟踪,而且贫乏重视。在WEB开发中也数次被忽略,大部分时候我们只阅读线上的网页,而不是打印出来。
另一方面尽管人们只是有时须求打印的事物从网站,那将是十全十美的,若是页面设计符合的打印机,似乎现代的网站适应各类屏幕尺寸和配备。 打印的自适应设计,可用性和可访问性和Web开发的显要组成部分,同样应考虑的另一个上边。
处理打印自适应设计的另一个地点,大家落到实处越多的网站用户的急需-并在同一时间,节省墨水,纸张和别的资源,所有那几个都是紧要的方面可持续发展的设计 。

赞 1 收藏 2
评论

亚洲必赢官网 5

打印链接二维码使之更便于访问
大家须求利用谷歌(Google) 图形API来落实:
我们愿意谷歌(谷歌(Google))提供的图形音讯( qr ,在我们的例证中);
表现大小的的QR印记,以像素为单位;
URL举办编码;
拔取的字符编码方式。

article a[href^=”#”]:after {
content: “”;
}
//链接周围图像是相比较费心的,理想的情事是图像周围的链接将有一个class。
$a:after > img {
content: “”;
}
//CSS选拔器落成将很不难:
a:not(:local-link):after {
content:” <” attr(href) “> “;
}

普普通通大家会在页面顶部的一个标题成分关联的URL:
@media print {
header h1:after {
content:
url(https://chart.googleapis.com/chart?cht=qr&chs=150×150&chl=http://yourdomain.com&choe=UTF-8);
position: absolute;
right: 0;
top: 0;
}
}
那个方法的通病是使开发者每一种元素都呼吁一个API。假如您的主机是PHP,则可以自动生成当下页面的URL:

打印链接二维码使之更便于访问
咱俩必要采纳Google 图形API来落到实处:

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

  • 俺们愿意谷歌(Google)提供的图纸音讯( qr ,在我们的例证中);
  • 显示大小的的QR印记,以像素为单位;
  • URL进行编码;
  • 应用的字符编码方式。
    常常大家会在页面顶部的一个题名成分关联的URL:
    @media print {
    header h1:after {
    content:
    url(https://chart.googleapis.com/chart?cht=qr&chs=150×150&chl=http://yourdomain.com&choe=UTF-8);
    position: absolute;
    right: 0;
    top: 0;
    }
    }
    本条方法的瑕疵是使开发者每种成分都呼吁一个API。假如您的主机是PHP,则可以自动生成当下页面的URL:

使用****CSS3 Filter ****增进打印的成色
浏览器平时会打印出横幅图像,尤其是纵然有标题的旗帜在黑暗的背景是反革命的:

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

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

采纳CSS3 Filter 进步打印的质量
浏览器平常会打印出横幅图像,越发是只要有标题的榜样在昏天黑地的背景是白色的:

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

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

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

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}

页面模块
页面模块定义了页面区域和16个围绕的边距盒。页面区域是页面上一块页面内容流动的空中。当不止了它的容纳范围,就会创建另一个页面。边界盒只在CSS生成的情节上运用。

页面模块
页面模块定义了页面区域和16个围绕的边距盒。页面区域是页面上一块页面内容流动的上空。当不止了它的容纳范围,就会成立另一个页面。边界盒只在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.” }
}

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

浮动内容
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;}

分页符
强制标题处于页面起始
幸免题目前边立刻断页
避免断开图像和表格
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提供了预约义页面计数器;它从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) “. “;
}

自定义****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) “. “;
}

图像的计数
运用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;
}
}

变动内容
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; }


分页
表格

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

分页
表格

网站地图xml地图