关注联楷|返回首页 | 网站案例 | 帮助中心

合作共赢、快速高效、优质的网站建设提供商

上海网站建设 

服务热线:021-61394118

上海联楷科技

CSS为页面布局命名以及控制窗口和孤立行-CSS建站教程

作者:佚名   时间:2014-03-27   分享到:

CSS为页面布局命名以及控制窗口和孤立行
使用命名的页面

在创建了具有名称的页面布局后,就可以向样式中添加页面属性,随后再将该样式应用到文档中的元素上,从而在自己的文档中应用这种页面布局。如果某个元素的页面布局与前面元素或包含元素布局有所有不同,就会在文档中插入分页符,并继续使用新的页面布局进行格式化。当元素的范围终止时,页面布局会回复为以前的布局,并根据需要进行适当的分页。

例如,该样式在landscape页面上显示了文档中的所有表格:

@page{size:portrait}@page rotated{size:langdscape}table{page:rotated}

在打印时,如果浏览器遇到文档中的<table>元素,而且当前的页面布局是默认的纵向布局,就会开始一个新页面,并在landscape页面上打印出表格。如果表格后面跟随的是非表格化内容,浏览器会插入另一个适当的分页符,而且文本流会在默认的纵向大小的页面上曳光弹显示。一行中有多个表格时,如时它们都很符合,就会在一个单独的langdscape sheet中显示它们。

控制分页

除非另外进行了指定,否则分页符仅在页面格式改变或内容溢出当前页面框的情况下出现。要另外强制或禁止分页的话,可以使用page-break-before、page-break-after和page-break-imside属性。

page-break-before和page-break-after这两个属性都可以接受auto、always、avoid、left和right关键字。auto是默认值;它令浏览器根据需要生成分页符。关键字always强制分页符出现在元素之前或之后,页avoid则禁止分页符紧随在元素之前或之后。left和right关键了强制使用一个或两个分页符,这样元素就会显示在左侧或右侧的页面上。

使用pagination属性是很直截了当的一种方法。假设你的文档用1级标题开始了新的一章,并用2级标题表示其中的小节。你希望每一张都在新页面的右侧开始,但是不希望小节标题与随后的内容被分页符断开。因此,可以编写下列css打印规则:

h1{page-break-before:right}h2{page-break-after: avoid}

仅在page-break-inside属性中使用auto和avoid值。auto允许元素内出现分页符(默认行为),而avoid则禁止它们。虽然如此,大于打印出的页面的元素会被分解;这就是为什么关键了是avoid而不是prevent。

如果你希望自己的表格最好不要在不同的页面上断开,就要编写下列规则;

table{page-break-inside: avoid}

控制窗口和单独行

在印刷术语中,orphans(单独行)是指某个段落由于分页符的原因而位于页面底部的那些行,而widows(短行)是指那些分页符后面保留在页面上部或底部有几行孤零零的文字。多数打印机都试图在每一页的上部或下部至少留出两行或更多行的文字。

如果你想控制这种行为,可以将widows和orphans属性应用到元素中。每个属性的值都分别是可能在页面上下留出的文本行的最小数目。默认值为2,这意味着浏览器会根据需要生成分页符,以确保从元素出现在每个页面上部和底部的时候,至少有两行文字。一般情况下应该把该属性应用于文档中的所有元素,以保证全部的分页都很一致。



如没特殊注明,文章均为上海联楷网络原创,转载请注明来自:http://www.linksj.com/contact/20151229/n7312.html

上海联楷网络新闻

最近新闻