一、定义分页——CSS分页文档流程
@page {
size: auto;
margin: 0;
}
@media print {
html, body {
width: 210mm;
height: 297mm;
overflow: hidden;
page-break-after: always;
margin: 0 !important;
}
}
CSS Define Paged是CSS3中的一个独特特性,使得网页内容项可以自动分页到多个页面显示,从而实现网页排版效果的类印刷品。CSS Paged Media规范包括定义了一种用于排版文档的样式属性语言,也就是将所定义的具体排版方案按照CSS样式运用到已经编写好的HTML文档当中。
Paged用于定义分页样式,通过对CSS分页文档流程的定义,指定网页的页面大小,边距,分页符,页面数等属性,达到最终的排版效果。 CSS Define Paged使得网页臃肿不堵塞,在视觉呈现上更为流畅。
以经典的A4纸大小及边距为例,定义网页大小为210mm x 297mm,同时限制overflow属性,让网页内容始终在定义的页面内显示,再通过page-break-after属性,实现网页自动分页,其中定义条件@media print用于被打印到纸张上的部分。
二、基本属性——size和margin
@page {
size: A4;
margin: 2cm 1.5cm;
}
size属性定义分页的大小,它可以取固定长度值或者可选的“auto”值。根据不同的媒介指定不同的页面尺寸,例如A4、Letter等。
margin属性定义页面周围的边距,这里的“2cm 1.5cm”表示上、下边距为2厘米,左、右边距为1.5厘米。使用这些属性,可以在定义网页视图时更加精确地控制页面外观,提供良好的可读性。
三、特殊属性——page-break-after和page-break-before
@page {
size: A4;
margin: 2cm 1.5cm;
}
.content{
page-break-after: always;
}
page-break-after和page-break-before属性设置HTML标签在页面分割时断开到下一页或前一页,使整个页面更加美观。page-break-before和page-break-after属性只在分页媒体上应用,比如打印或PDF文档中,对于Web浏览器和屏幕页面则不可见。
在上面的示例中,为每个内容块定了page-break-after: always,使得每个div作为一个独立的页面展示。如需控制每个页面上下文相关性,可以在selector中设置break-before和break-after属性作为分页控制指示元素。
四、自动分页:Paged Media、Overflow、Columns和Region
Paged Media是分页模型,允许自动创建在浏览器之外的相对位置的分页元素,这些元素是基于页面尺寸和规则,直到满足闭合的分页计算结果。
Overflow属性允许包含多列文本块,并定义了一个非分页操作,使文本块只出现在当前没有适合的区域真正可见时。
Columns属性默认情况下为“auto”,this为1,并且需要您通过清晰度或无序适当地分析出工具栏的适当设置,如果内容无法适应给定的列数,则可以生成新的分页元素填充互补空间。
Region可以帮助您处理类似于多列分页的状况,但对于设置分页按钮界面较为复杂,通常不建议使用。
五、在实践中应用
本文展示了如何使用少量的CSS代码来创建真实世界的分页设计,使用简单的CSS代码定义出了页面尺寸、页边距和特殊的分页行为。
在实际应用中,需要注意页面设置的基准,例如针对A4纸张的制作可以使用210mm x 297mm的页面大小属性,页面宽高调整需要确保正确裁剪,保证文档输出的准确性。同时,CSS Define Paged的兼容性较低,不同浏览器的处理方式可能存在差异,需要对不同浏览器做不同的兼容处理。
六、总结
CSS Define Paged提供了分页排版样式的实现,让排版更加简单易懂。通过CSS的定义,网页的排版效果可以在页面上自动分割为多个页面,类似打印出来的纸张。
通过分页样式,可以对页面的大小、边距和分页等属性进行具体的定义,让页面更加精细,页面间隔更加清晰。同时,定义分页样式还可以通过CSS代码轻松控制页面的分页效果,让网站的内容更加美观。