CSS 是否有一种方法可以在每一页上打印网页头部和底部

在本文中，我们将介绍如何使用CSS来在每一页上打印网页的头部和底部，并提供相关示例。

阅读更多：CSS 教程

使用CSS的打印样式表

CSS提供了一个特殊的样式表，用于配置打印时的页面布局和样式，称为打印样式表（print style sheet）。我们可以在这个样式表中指定在每一页上显示的头部和底部内容。

首先，我们需要创建一个打印样式表，可以通过在HTML文件的<head>标签内使用<link>标签引入外部样式表，或者直接在<style>标签内编写样式。

<!-- 引入外部样式表 -->
<link rel="stylesheet" href="print.css" media="print">

<!-- 内嵌样式表 -->
<style media="print">
    /* 打印样式表中的样式规则 */
</style>

接下来，我们可以在打印样式表中使用@page规则来指定页面的布局和大小。例如，我们可以将页眉和页脚分别定义为@top-center和@bottom-center，并指定它们的内容和样式。

@media print {
    @page {
        size: A4; /* 设置页面大小为A4纸 */
        margin: 0; /* 取消页面的边距 */

        /* 定义页眉内容和样式 */
        @top-center {
            content: "网页头部内容";
            color: #000;
        }

        /* 定义页脚内容和样式 */
        @bottom-center {
            content: "网页底部内容";
            color: #000;
        }
    }
}

在上面的例子中，我们将页面大小设置为A4纸，并取消了页面的边距。然后，我们在@top-center规则中定义了页眉内容为”网页头部内容”，颜色为黑色。类似地，在@bottom-center规则中定义了页脚内容为”网页底部内容”，颜色也为黑色。

示例说明

假设我们有一个包含标题和内容的网页，并希望在每一页的页眉显示网页的标题，在页脚显示打印日期。我们可以使用CSS的打印样式表来实现这个效果。

首先，我们可以在HTML文件中添加一个包含标题和内容的结构：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="print.css" media="print">
</head>
<body>
    <h1>网页标题</h1>
    <p>网页内容...</p>
</body>
</html>

然后，在打印样式表中，我们可以使用content属性来获取文本，并使用counter来获取打印日期。

@media print {
    @page {
        size: A4;
        margin: 0;

        /* 定义页眉内容和样式 */
        @top-center {
            content: attr(data-title);
            color: #000;
        }

        /* 定义页脚内容和样式 */
        @bottom-center {
            counter-increment: page;
            content: "打印日期：" counter(page) "/" counter(pages);
            color: #000;
        }
    }
}

h1::before {
    content: attr(data-title);
}

在上面的示例中，我们使用attr()函数来获取网页的标题，并在页眉中显示。在页脚中，我们使用counter()函数来获取打印日期，并以”打印日期：”的格式显示。我们还使用了counter-increment属性来自动计数打印页数。

请注意，在实际应用中，您可以根据自己的需求来定义和格式化页眉和页脚的内容和样式。