CSS - 页面

page 属性用于指定命名页面，这是一种由 @page @规则定义的页面类型。

如果多个选择器连续使用命名页面，则需要使用 break-after CSS 属性添加强制分页符。

可能的值

CSS 的 page 属性可以具有以下值之一

auto：这是默认值。
<custom-ident>：这是在 @page @规则中定义的区分大小写的名称。

应用于

所有块级元素。

语法

page = auto | <custom-ident>

CSS page - custom-ident 值

以下示例演示了 page CSS 属性的使用，该属性采用 <custom-ident> 值。

<html>
<head>
<style>
   /* default for all pages */
   @page sample-page {
      margin: 2in;
      page-orientation: rotate-right;
   }

   div {
      page: sample-page;
      font-size: 1.5em;
   }
</style>
</head>
<body>
   <div>
      <h1>page-orientation</h1>
      <p>See the orientation of the text on the page.</p>
      <p>I am turned to right, as it is <b>rotate-right</b>.</p>
      <button style="background-color: green; color: white; font-size: 1em;">Print</button>
   </div>
   <script>
      const button = document.querySelector("button");

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

打印页面