CSS 如何在新版Chrome中打印HTML时显示页码

在本文中，我们将介绍如何使用CSS在新版Chrome中打印HTML时显示页码。打印是许多人在工作和学习中常用的功能之一，而显示页码可以帮助我们更好地组织和查看打印出来的内容。

阅读更多：CSS 教程

使用CSS的@page规则

在CSS中，我们可以使用@page规则来定义打印页面的特定样式。通过使用这个规则，我们可以为打印页面设置各种属性，包括页眉、页脚和页码。对于每一页，我们都可以单独设置这些属性。

首先，我们需要在样式表中使用@page规则，并通过选择器选择要应用样式的页面。例如，我们可以为所有页面设置相同的样式，或者为特定页面设置不同的样式。

下面是一个使用CSS的@page规则来显示页码的示例：

@page {
  counter-increment: page;
  margin-bottom: 20mm;
  margin-top: 20mm;
  @bottom-center {
    content: "Page " counter(page);
  }
}

在这个示例中，我们使用了counter-increment: page;来递增页码计数器，margin-bottom和margin-top用于设置页边距，@bottom-center选择器用于指定页眉或页脚位置，content: "Page " counter(page);用于显示页码。

示例

让我们通过一个简单的示例来验证以上所述的方法。首先，我们需要创建一个HTML文件，并在其内部添加一些内容。我们将使用以下HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Print Page Number Example</title>
  <style>
    @page {
      counter-increment: page;
      margin-bottom: 20mm;
      margin-top: 20mm;
      @bottom-center {
        content: "Page " counter(page);
      }
    }
  </style>
</head>
<body>
  <h1>打印页面示例</h1>
  <p>这是一些示例内容。</p>
  <p>这是第二个段落。</p>
</body>
</html>

在上述代码中，我们在<style>标签内使用了@page规则，并定义了一个带有页码的页脚。

接下来，我们需要使用新版Chrome浏览器打开这个HTML文件。你可以通过点击文件，然后选择新版Chrome来打开。

在浏览器中打开后，你会看到一个包含示例内容的页面。接下来，我们将尝试打印这个页面并查看是否显示了页码。

选中浏览器的菜单按钮，然后选择“打印”选项。在打印预览页面中，你应该可以看到页码在每一页的底部中心位置显示出来。