CSS3 其他重要特性 - @page 规则与分页媒体

章节概述

CSS @page 规则是CSS中用于控制分页媒体（如打印文档）布局的重要特性，它允许开发者定义页面大小、边距、页眉页脚以及分页行为。本章节将详细介绍CSS @page规则与分页媒体的核心概念、语法、工作原理以及实际应用场景，帮助读者掌握如何使用这一特性来创建专业的打印样式。

核心知识点讲解

1. CSS @page 规则的基本概念

CSS @page 规则用于定义分页媒体的页面盒子模型，它允许开发者：

设置页面大小和方向
定义页面边距
控制页面分页行为
添加页眉和页脚
处理页面奇数和偶数页的不同样式

2. @page 规则的语法

/* 基本语法 */
@page {
  /* 页面样式规则 */
}

/* 使用伪类 */
@page :first {
  /* 第一页的样式规则 */
}

@page :left {
  /* 左侧页面的样式规则 */
}

@page :right {
  /* 右侧页面的样式规则 */
}

3. 常用的页面属性

3.1 页面大小和方向

@page {
  /* 设置页面大小为A4 */
  size: A4;
  
  /* 设置页面方向为横向 */
  size: A4 landscape;
  
  /* 自定义页面大小 */
  size: 21cm 29.7cm;
}

3.2 页面边距

@page {
  /* 设置页面边距 */
  margin: 2cm;
  
  /* 设置不同方向的边距 */
  margin-top: 3cm;
  margin-right: 2cm;
  margin-bottom: 3cm;
  margin-left: 2cm;
}

3.3 页面分页控制

/* 避免在元素前分页 */
p {
  page-break-before: avoid;
}

/* 避免在元素后分页 */
.section {
  page-break-after: avoid;
}

/* 避免在元素内部分页 */
.table {
  page-break-inside: avoid;
}

4. @page 伪类

CSS定义了以下@page伪类：

:first - 匹配第一页
:left - 匹配左侧页面（偶数页）
:right - 匹配右侧页面（奇数页）
:blank - 匹配空白页

5. 浏览器兼容性

浏览器	支持情况
Chrome	部分支持
Firefox	部分支持
Safari	部分支持
Edge	部分支持

实用案例分析

案例1：创建基本的打印样式

场景：需要为网页创建基本的打印样式，确保内容在打印时布局合理。

解决方案：使用@media print媒体查询和@page规则来定义打印样式。

代码示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>打印样式示例</title>
  <style>
    /* 屏幕样式 */
    body {
      font-family: Arial, sans-serif;
      line-height: 1.6;
      margin: 20px;
      color: #333;
    }
    
    .header {
      background-color: #f0f0f0;
      padding: 20px;
      margin-bottom: 20px;
    }
    
    .navigation {
      background-color: #333;
      color: white;
      padding: 10px;
      margin-bottom: 20px;
    }
    
    .content {
      margin-bottom: 20px;
    }
    
    .footer {
      background-color: #f0f0f0;
      padding: 20px;
      margin-top: 20px;
    }
    
    /* 打印样式 */
    @media print {
      /* 隐藏不需要打印的元素 */
      .navigation {
        display: none;
      }
      
      /* 调整打印字体和行高 */
      body {
        font-family: Georgia, serif;
        line-height: 1.4;
        margin: 0;
        color: #000;
      }
      
      /* 定义页面样式 */
      @page {
        size: A4;
        margin: 2cm;
      }
      
      /* 避免在标题后分页 */
      h1, h2, h3 {
        page-break-after: avoid;
      }
      
      /* 避免在段落内部分页 */
      p {
        page-break-inside: avoid;
      }
    }
  </style>
</head>
<body>
  <div class="header">
    <h1>网站标题</h1>
  </div>
  
  <div class="navigation">
    <a href="#">首页</a> | <a href="#">关于我们</a> | <a href="#">联系我们</a>
  </div>
  
  <div class="content">
    <h2>文章标题</h2>
    <p>这是一段文章内容，在打印时应该保持完整，不应该被分页分割。这段内容足够长，以确保它可能会跨越多个页面。</p>
    <p>这是另一段文章内容，同样不应该被分页分割。</p>
    
    <h3>子标题</h3>
    <p>这是子标题下的内容，也不应该在标题后立即分页。</p>
  </div>
  
  <div class="footer">
    <p>版权所有 © 2023 网站名称</p>
  </div>
</body>
</html>

案例2：创建带有页眉页脚的打印样式

场景：需要为文档创建带有页眉页脚的打印样式，显示页码和文档信息。

解决方案：使用@page规则和伪元素来创建页眉页脚。

代码示例：

/* 定义页面样式 */
@page {
  size: A4;
  margin: 2cm;
}

/* 第一页样式 */
@page :first {
  margin-top: 4cm;
}

/* 左侧页面样式 */
@page :left {
  margin-left: 3cm;
  margin-right: 2cm;
}

/* 右侧页面样式 */
@page :right {
  margin-left: 2cm;
  margin-right: 3cm;
}

/* 创建页眉 */
@top-right {
  content: "文档标题";
  font-size: 10pt;
  color: #666;
  border-bottom: 1px solid #ddd;
  padding-bottom: 5px;
}

/* 创建页脚 */
@bottom-right {
  content: "第 " counter(page) " 页，共 " counter(pages) " 页";
  font-size: 10pt;
  color: #666;
  border-top: 1px solid #ddd;
  padding-top: 5px;
}

案例3：控制表格的分页行为

场景：需要确保表格在打印时不会被分页分割，或者在合适的位置分页。

解决方案：使用page-break属性来控制表格的分页行为。

代码示例：

/* 避免在表格前分页 */
table {
  page-break-before: avoid;
}

/* 避免在表格后分页 */
table {
  page-break-after: avoid;
}

/* 避免在表格内部分页 */
table {
  page-break-inside: avoid;
}

/* 允许在表格行后分页 */
tr {
  page-break-inside: avoid;
  page-break-after: auto;
}

工作原理深度解析

1. 页面盒子模型

CSS @page 规则基于页面盒子模型，它包含以下部分：

页面区域：整个页面的大小
边距区域：页面边缘与内容区域之间的空间
内容区域：实际内容所在的区域
页眉区域：页面顶部的区域，可用于显示标题、页码等
页脚区域：页面底部的区域，可用于显示页码、日期等

2. @page 规则的工作原理

当应用 @page 规则时，浏览器会：

为每个页面创建一个页面盒子
根据 @page 规则设置页面大小、边距等属性
根据 @page 伪类为不同类型的页面应用不同的样式
在打印时使用这些设置来布局内容

3. 分页控制的工作原理

页面分页控制属性的工作原理：

page-break-before：控制元素前的分页行为
page-break-after：控制元素后的分页行为
page-break-inside：控制元素内的分页行为

这些属性告诉浏览器在打印时如何处理元素的分页，以确保内容布局合理。

代码优化建议

1. 合理使用 @page 规则

为不同类型的页面（第一页、左侧页面、右侧页面）设置不同的样式
使用合适的页面大小和边距，确保内容布局合理
避免过度使用 @page 规则，只设置必要的属性

2. 优化打印样式

使用@media print媒体查询来定义专门的打印样式
隐藏不需要打印的元素（如导航栏、广告等）
调整打印字体和行高，提高可读性
确保颜色和背景在打印时显示合理

3. 注意事项

@page 规则只适用于分页媒体，对屏幕显示无效
不同浏览器对 @page 规则的支持程度不同
某些 @page 属性可能在不同浏览器中有不同的表现
过度使用分页控制可能会导致打印效果不理想

浏览器兼容性与降级方案

浏览器支持情况

Chrome：支持基本的 @page 规则和分页控制
Firefox：支持基本的 @page 规则和分页控制
Safari：支持基本的 @page 规则和分页控制
Edge：支持基本的 @page 规则和分页控制

降级方案

对于不支持高级 @page 特性的浏览器，可以使用以下降级方案：

/* 现代浏览器 */
@page {
  size: A4;
  margin: 2cm;
}

/* 降级方案：使用基本的打印样式 */
@media print {
  body {
    width: 21cm;
    height: 29.7cm;
    margin: 2cm;
  }
}

章节总结

本章节详细介绍了 CSS @page 规则与分页媒体的核心概念、工作原理和应用场景，包括：

基本概念：@page 规则用于控制分页媒体的布局
语法：基本语法和伪类的使用
常用属性：页面大小、边距、分页控制等
实用案例：创建基本打印样式、带有页眉页脚的打印样式、控制表格分页行为
工作原理：页面盒子模型、@page 规则的工作机制、分页控制的工作原理
优化建议：合理使用 @page 规则、优化打印样式、注意事项
兼容性：了解浏览器支持情况和降级方案

通过合理使用 CSS @page 规则与分页媒体，开发者可以创建专业的打印样式，确保内容在打印时布局合理、美观。在实际开发中，应根据具体需求选择合适的 @page 属性，并考虑浏览器兼容性问题。