CSS - @page

CSS 中的 @page at-rule 用于指定网页打印时打印页面的样式。它允许您控制从网页生成的打印文档的布局和外观。使用 @page at-rule，您可以为页面边距框、页面大小、页眉、页脚等定义不同的规则。

它有助于自定义页面的尺寸、方向和边距。您可以使用 CSS 的伪类来定位文档的所有页面或其子集。

语法

@page = 
   @page <page-selector-list> { <declaration-list> }

建议不要在 @page at-rule 中使用与视口相关的 <length> 单位，例如 vh、vw、vmin 和 vmax。

@page at-rule 允许用户为规则命名。此名称在声明中使用 CSS 属性 page 调用。

page: 允许选择器使用用户定义的 命名页面。
<page-body> 包括页面属性和页面边距属性
<pseudo-selector> 包括以下伪类
- :first
- :left
- :right

边距 at-rules

@page at-rule 包含 边距 at-rules。这些边距 at-rules 负责定位文档的不同部分，从而根据样式块中设置的属性值对打印页面区域进行样式设置。

各种 边距 at-rules 如下所示

@top-left
@top-left-corner
@top-center
@top-right
@top-right-corner
@bottom-left-corner
@bottom-left
@bottom-center
@bottom-right
@bottom-right-corner
@left-top
@left-middle
@left-bottom
@right-top
@right-middle
@right-bottom

命名页面

打印时执行每页布局并在声明中添加分页符，可以使用 命名页面 来启用。这些 命名页面 可以使用 page 属性应用。因此，用户可以创建不同的页面配置以用于打印布局。

示例

以下是 @page at-rule 的示例。

<html>
<head>
<style> 
   @page {
      size: landscape;
      margin: 15%;
   }

   section {
      page-break-after: always;
      break-after: page;
      background-color: aquamarine;
      width: 500px;
   }

   @media print {
   button {
      display: none;
   }
   }
</style>
</head>
<body>
   <article>
      <section>
      <h2>Header1</h2>
      <p>
         Section one
      </p>
      </section>
      <section>
         <h2>Header2</h2>
         <p>
         Section two
         </p>
      </section>
      <section>
         <h2>Header3</h2>
         <p>
         Section three
         </p>
      </section>
   </article>
   <button style="background-color: green; color: white; font-size: 1em;">Print</button>
   <script>
      const button = document.querySelector("button");

      button.addEventListener("click", () => {
      window.print();
      });
   </script>
</body>
</html>

在上面的示例中

为 div 元素指定了一个样式块。
文档被分成三个部分，每个部分都换页。
当点击“打印”按钮时，文档以打印格式打开，您可以看到每个页面边距的变化，这些变化是使用 @page at-rule 设置的，其中大小为横向，边距为 15%。

描述符或相关属性

下表列出了与 @page 相关的所有描述符

描述符/属性	描述
page	指定命名页面，即由 @page at-rule 定义的特定类型的页面。
margin	设置元素四侧的边距区域。
page-orientation	确定页面的方向。
size	定义用于表示页面的框的大小和方向。
:first	表示打印文档的第一页。
:left	表示打印文档的所有左侧页面。
:right	表示打印文档的所有右侧页面。

打印页面