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>

列印頁面