Css 简明教程

CSS Printing

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

Printing is an important aspect of any application or webpage. Print of a content can be made very different from its interface look. While printing a user may want to:

Use images with higher resolution for more clearer and better result.
Adjust the application’s or website’s layout, as per the size and shape of the page.
Enhance the overall appearance of the application or website on printing.
Provide additional styles only applicable for printing.

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

In order to manage all your printing needs and process, you may take an account of the points referred in this article.

CSS Printing - Using A Print Style Sheet

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

You can have a stylesheet explicitly for printing needs and link it to your code. Add the following code block in your 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 。

CSS provides the @media at-rule, that can be used to set different styling needs for your webpage when printed on a page or displayed on screen, using the options print and screen, respectively.

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

You can add the following code block at the end of your stylesheet. This is an example.

@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 的样式。

The above code snippet will not print the styles of #header-part, #footer-part, and #nav-part, while printing.

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

The various aspects of pages, such as, orientation, dimension, margin, etc. can be adjusted and modified using the @page at-rule. All the pages or sub-set of some pages can be targeted using this rule, while taking the print.

CSS Printing - Print Requests Detection

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

The events beforeprint and afterprint are sent by the browsers to let the content determine, when the printing may have occurred. This feature can be used to adjust the printing layout and the user interface during printing process.

CSS Printing - Using @page at-rule

在以下示例中，网页的内容被划分为节，这些节在以打印格式打开时会分成不同的页面，而且页面的边距也已在打印格式中设置好。

In the following example, the content of the webpage is divided into sections, which when opened in print format, breaks into different pages and the margin of the pages is also set in the print format.

<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) 的用法，此查询会为屏幕显示指定一个格式或样式，而同样的内容会针对打印格式进行更改。单击“打印”按钮后，页面布局和样式会发生改变。

The following example demonstrates the use of a media query (@media), where a format or style is specified for screen display and the same content is changed for print format. On click of Print button, the page layout and style changes.

<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 事件和打印完成后页面自动关闭并返回上一页的用法。

Following example demonstrates the use of afterprint event and post printing the page closes itself and goes back to the last page.

<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 代码。参考以下示例：

The print styles can be added in a file and the same CSS file can be linked to your html code, as an external stylesheet. Refer the example below:

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