CSS 打印取页眉页脚的页码|极客教程

CSS 打印取页眉页脚的页码

在网页打印时，有时候我们需要在打印页面的页眉或页脚中显示页码信息，以便于阅读和管理。在 CSS 中，我们可以通过一些特定的属性和伪类来实现这一功能。本文将详细介绍如何在网页打印时取得页眉页脚的页码，并提供相关的示例代码。

1. 在页眉中显示页码

要在页眉中显示页码，我们可以使用 @page 规则和 content 属性来实现。下面是一个简单的示例代码：

@page {
  @top-center {
    content: "Page " counter(page);
  }
}

body {
  counter-reset: page;
}

h1 {
  page-break-before: always;
}

p {
  page-break-inside: avoid;
}

在上面的示例中，我们使用 @page 规则定义了在页眉中显示页码的样式，通过 content: "Page " counter(page); 来显示页码信息。在 body 元素中使用 counter-reset: page; 来初始化页码计数器。在 h1 元素前插入分页符，避免段落中断。

2. 在页脚中显示页码

类似地，我们也可以在页脚中显示页码信息。下面是一个示例代码：

@page {
  @bottom-center {
    content: "Page " counter(page);
  }
}

在上面的示例中，我们使用 @page 规则定义了在页脚中显示页码的样式，通过 content: "Page " counter(page); 来显示页码信息。

3. 在页眉和页脚中显示不同的页码

有时候我们需要在页眉和页脚中显示不同的页码信息，可以通过 @top-left、@top-right、@bottom-left、@bottom-right 等属性来实现。下面是一个示例代码：

@page {
  @top-left {
    content: "Header Page " counter(header);
  }
  @bottom-right {
    content: "Footer Page " counter(footer);
  }
}

body {
  counter-reset: header footer;
}

h1 {
  page-break-before: always;
}

p {
  page-break-inside: avoid;
}

在上面的示例中，我们使用 @top-left 和 @bottom-right 属性分别定义了页眉和页脚中显示不同的页码信息，通过 content: "Header Page " counter(header); 和 content: "Footer Page " counter(footer); 来显示不同的页码信息。

4. 自定义页码格式

除了显示简单的页码信息外，我们还可以自定义页码的格式，比如添加前缀、后缀、间隔符等。下面是一个示例代码：

@page {
  @bottom-center {
    content: "Page " counter(page, upper-roman) " of " counter(pages);
  }
}

在上面的示例中，我们使用 counter(page, upper-roman) 来显示罗马数字格式的页码，使用 counter(pages) 来显示总页数。

5. 控制打印页面的页眉页脚显示与否

有时候我们需要在打印页面时控制页眉页脚的显示与否，可以通过 display 属性来实现。下面是一个示例代码：

@page {
  @top-center {
    content: "Page " counter(page);
    display: none;
  }
}

在上面的示例中，我们使用 display: none; 来控制打印页面的页眉不显示。

6. 控制打印页面的页眉页脚位置

除了显示内容外，我们还可以控制打印页面的页眉页脚的位置，比如居中、居左、居右等。下面是一个示例代码：

@page {
  @top-center {
    content: "Page " counter(page);
  }
  @bottom-left {
    content: "Footer Page " counter(page);
  }
  @bottom-right {
    content: "Footer Page " counter(page);
  }
}

在上面的示例中，我们使用 @top-center、@bottom-left、@bottom-right 属性来控制页眉页脚的位置。

7. 控制打印页面的页眉页脚样式

除了位置外，我们还可以控制打印页面的页眉页脚的样式，比如字体、颜色、大小等。下面是一个示例代码：

@page {
  @top-center {
    content: "Page " counter(page);
    font-family: Arial, sans-serif;
    color: #333;
    font-size: 12px;
  }
}

在上面的示例中，我们使用 font-family: Arial, sans-serif;、color: #333;、font-size: 12px; 来控制页眉的字体、颜色和大小。

8. 控制打印页面的页眉页脚边距

有时候我们需要控制打印页面的页眉页脚的边距，可以通过 margin 属性来实现。下面是一个示例代码：

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

在上面的示例中，我们使用 margin-top: 20px;、margin-bottom: 10px; 来控制页眉的上边距和下边距。

9. 控制打印页面的页眉页脚边框

除了边距外，我们还可以控制打印页面的页眉页脚的边框，比如线型、颜色、粗细等。下面是一个示例代码：

@page {
  @top-center {
    content: "Page " counter(page);
    border-top: 1px solid #333;
    border-bottom: 1px dashed #666;
  }
}

在上面的示例中，我们使用 border-top: 1px solid #333;、border-bottom: 1px dashed #666; 来控制页眉的上边框和下边框。

10. 控制打印页面的页眉页脚背景

除了边框外，我们还可以控制打印页面的页眉页脚的背景颜色、图片等。下面是一个示例代码：

@page {
  @top-center {
    content: "Page " counter(page);
    background-color: #f0f0f0;
  }
}

在上面的示例中，我们使用 background-color: #f0f0f0; 来控制页眉的背景颜色。

11. 控制打印页面的页眉页脚透明度

除了背景色外，我们还可以控制打印页面的页眉页脚的透明度。下面是一个示例代码：

@page {
  @top-center {
    content: "Page " counter(page);
    background-color: rgba(255, 255, 255, 0.5);
  }
}

在上面的示例中，我们使用 background-color: rgba(255, 255, 255, 0.5); 来控制页眉的背景透明度。

12. 控制打印页面的页眉页脚固定位置

有时候我们需要在打印页面时固定页眉页脚的位置，可以通过 position 属性来实现。下面是一个示例代码：

@page {
  @top-center {
    content: "Page " counter(page);
    position: fixed;
  }
}

在上面的示例中，我们使用 position: fixed; 来固定页眉的位置。

13. 控制打印页面的页眉页脚浮动位置

除了固定位置外，我们还可以控制打印页面的页眉页脚的浮动位置，比如居左、居右、居中等。下面是一个示例代码：

@page {
  @top-center {
    content: "Page " counter(page);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
}

在上面的示例中，我们使用 position: absolute;、left: 50%;、transform: translateX(-50%); 来控制页眉居中显示。

14. 控制打印页面的页眉页脚旋转角度

有时候我们需要在打印页面时旋转页眉页脚的角度，可以通过 transform 属性来实现。下面是一个示例代码：

@page {
  @top-center {
    content: "Page " counter(page);
    transform: rotate(45deg);
  }
}

在上面的示例中，我们使用 transform: rotate(45deg); 来旋转页眉的角度。

15. 控制打印页面的页眉页脚隐藏

有时候我们需要在打印页面时隐藏页眉页脚，可以通过 display 属性来实现。下面是一个示例代码：

@page {
  @top-center {
    content: "Page " counter(page);
    display: none;
  }
}

在上面的示例中，我们使用 display: none; 来隐藏页眉。

16. 控制打印页面的页眉页脚显示

除了隐藏外，我们还可以控制打印页面的页眉页脚的显示，比如显示在所有页面、只显示在第一页等。下面是一个示例代码：

@page {
  @top-center {
    content: "Page " counter(page);
    display: block;
  }
  @page :first {
    @top-center {
      display: none;
    }
  }
}

在上面的示例中，我们使用 display: block; 来显示页眉，在 @page :first 中使用 display: none; 来隐藏第一页的页眉。

17. 控制打印页面的页眉页脚打印时显示

有时候我们需要在打印页面时才显示页眉页脚，可以通过 @media print 媒体查询来实现。下面是一个示例代码：

@media print {
  @page {
    @top-center {
      content: "Page " counter(page);
    }
  }
}

在上面的示例中，我们使用 @media print 媒体查询来控制打印时显示页眉。

18. 控制打印页面的页眉页脚页面间距

有时候我们需要控制打印页面的页眉页脚与页面内容的间距，可以通过 margin 属性来实现。下面是一个示例代码：

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

在上面的示例中，我们使用 margin: 20mm; 来控制页眉与页面内容的间距。

19. 控制打印页面的页眉页脚页面大小

有时候我们需要控制打印页面的页眉页脚的大小，可以通过 size 属性来实现。下面是一个示例代码：

@page {
  size: A4;
  @top-center {
    content: "Page " counter(page);
  }
}

在上面的示例中，我们使用 size: A4; 来控制页眉页脚的页面大小。

通过以上示例代码，我们可以灵活地控制打印页面的页眉页脚的显示、样式、位置等，以满足不同需求。

CSS 打印取页眉页脚的页码