CSS @page详解|极客教程

CSS @page详解

在CSS中，“@page`规则用于定义打印文档时的页面特性，例如页面尺寸、页眉页脚等内容。通过@page规则，我们可以控制打印页面的布局和样式，使打印效果更加符合需求。

@page规则语法

@page规则可以在CSS文件中直接定义，也可以通过<style>标签嵌入HTML文档中，其语法规则如下：

@page {
    /* 定义页面属性 */
}

@page规则中可以设置的页面属性有：

size: 用于设置页面尺寸，可以设置为固定值（如A4）或自定义尺寸（如100px 200px）。
margin: 用于设置页面边距，可以设置为固定值（如10mm）或分别设置上右下左边距。
marks: 设置是否显示页眉页脚标记。
bleed: 设置页面内容延伸至页面边缘以避免白边。
@top-left, @top-center, @top-right, @bottom-left, @bottom-center, @bottom-right: 设置页眉页脚内容。

示例代码

下面是一个简单的@page规则示例，设置页面尺寸为A4，边距为2cm，显示页眉页脚标记：

@page {
    size: A4;
    margin: 2cm;
    marks: cross;
}

@page规则示例

设置页面尺寸和边距

我们可以通过@page规则设置打印页面的尺寸和边距，下面是一个设置A4尺寸和1cm边距的示例：

@page {
    size: A4;
    margin: 1cm;
}

显示页眉页脚

通过@page规则，我们可以设置显示页眉页脚标记，下面是一个设置显示页眉页脚的示例：

@page {
    marks: cross;
}

定义页眉页脚内容

除了显示页眉页脚标记，我们还可以通过@page规则定义具体的页眉页脚内容，下面是一个定义页面顶部居中显示“Page X”、页面底部显示日期的示例：

@page {
    @top-center {
        content: "Page " counter(page);
    }
    @bottom-center {
        content: "Date: " attr(data-date);
    }
}

在这个示例中，@top-center定义了页面顶部居中显示内容，使用content属性设置显示的内容为“Page X”，其中counter(page)用于显示页数。@bottom-center定义了页面底部居中显示内容，使用attr(data-date)显示data-date属性的值，通常用于显示日期信息。