极客教程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; 来控制页眉页脚的页面大小。
通过以上示例代码，我们可以灵活地控制打印页面的页眉页脚的显示、样式、位置等，以满足不同需求。