Css 简明教程

CSS Printing

打印是任何应用程序或网页的重要方面。内容的打印可以与其界面外观大不相同。在打印时，用户可能希望：

  1. 使用高分辨率图像以获得更清晰、更好的结果。

  2. 根据页面的大小和形状调整应用程序或网站的布局。

  3. 在打印时增强应用程序或网站的整体外观。

  4. 仅提供适用于打印的其他样式。

为了管理您所有的打印需求和流程，您可以考虑本文中所讨论的要点。

CSS Printing - Using A Print Style Sheet

您可以专门针对打印需求进行样式表并将其链接到您的代码。在您的 html 中添加以下代码块：

<link href="/path/to/print.css" media="print" rel="stylesheet" />

CSS Printing - Using Media Queries and @page At-Rule

CSS 提供了 @media at 规则，可以使用它在页面上打印或在屏幕上显示时为您的网页设置不同的样式需求，分别使用选项 print 和 screen 。

您可以在样式表的末尾添加以下代码块。这是一个例子。

@media print {
   /* All print related styles to be added here */
   #header-part,
   #footer-part,
   #nav-part {
      display: none !important;
   }
}

上面的代码段在打印时不会打印 #header-part、#footer-part 和 #nav-part 的样式。

使用 @page at 规则可以调整和修改页面的各个方面，例如方向、尺寸、边距等。采取打印时，可以使用此规则定位所有页面或某些页面的子集。

CSS Printing - Print Requests Detection

事件 beforeprint 和 afterprint 由浏览器发送，让内容确定打印何时可能发生。此功能可用于在打印过程中调整打印布局和用户界面。

CSS Printing - Using @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>

CSS Printing - Using @media Query

以下示例展示了媒体查询 (@media) 的用法，此查询会为屏幕显示指定一个格式或样式，而同样的内容会针对打印格式进行更改。单击“打印”按钮后，页面布局和样式会发生改变。

<html>
<head>
<style>
      @media screen {
         h2 {
            font-size: large;
            font-family: Verdana, Geneva, Tahoma, sans-serif;
            color: blue;
            font-style: normal;
         }
      }

      @media print {
         h2 {
            font-family: cursive;
            font-style: italic;
            color: red;
         }

      }

      @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>

CSS Printing - Use Of afterprint Event

下面的示例展示了 afterprint 事件和打印完成后页面自动关闭并返回上一页的用法。

<html>
<head>
<style>
   @media screen {
      h2 {
         font-size: large;
         font-family: Verdana, Geneva, Tahoma, sans-serif;
         color: blue;
         font-style: normal;
      }
   }

   @media print {
      h2 {
         font-family: cursive;
         font-style: italic;
         color: red;
      }
   }

   @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();
      });

      window.addEventListener("afterprint", () => self.close);
   </script>
</body>
</html>

CSS Printing - Link To An External Style Sheet

可以将打印样式添加到一个文件中，并且可以将同一个 CSS 文件作为外部样式表链接到 HTML 代码。参考以下示例：

<html>
<head>
   <link href="print.css" media="print"  rel="stylesheet" />
<style>
   @media screen {
         h2 {
            font-family: Verdana, Geneva, Tahoma, sans-serif;
            font-style: normal;
            color: rebeccapurple;
         }

      }
</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>