CSS 如何为8.5×11英寸打印页面格式化CSS

在本文中，我们将介绍如何使用CSS格式化8.5×11英寸打印页面。打印页面的格式化对于确保打印出的文档整洁清晰非常重要。通过使用一些简单的CSS代码，我们可以控制页面的布局、字体样式和大小，以及页面的边距和页眉页脚等内容，以满足打印需求。

阅读更多：CSS 教程

页面尺寸与边距

首先，我们需要设置页面的尺寸和边距。8.5×11英寸是美国常见的打印纸张尺寸，约等于21.6×27.9厘米。我们可以使用CSS的@page规则来定义页面的尺寸和边距。下面是一个示例：

@page {
  size: 8.5in 11in;
  margin: 1in;
}

在上面的代码中，size属性设置页面的尺寸，使用英寸作为单位。margin属性设置页面的边距，同样使用英寸作为单位。这里我们将边距设置为1英寸，你可以根据实际需求进行调整。

字体样式和大小

在打印页面中，我们通常希望字体大小较大且清晰易读。我们可以使用font-size属性来设置字体的大小，使用font-family属性来设置字体的样式。下面是一个示例：

body {
  font-size: 12pt;
  font-family: Arial, sans-serif;
}

在上面的代码中，font-size属性将字体的大小设置为12pt，使用pt作为单位。font-family属性将字体设置为Arial，并指定了一个备用字体样式sans-serif，以便在Arial不可用时能够有一个合适的替代字体。

打印页眉页脚

打印页眉页脚对于标识打印页面的信息非常重要。我们可以使用CSS的@top-center和@bottom-center规则来定义打印页面的页眉和页脚。下面是一个示例：

@page {
  @top-center {
    content: "打印页眉";
  }

  @bottom-center {
    content: "打印页脚";
  }
}

在上面的代码中，@top-center规则定义了打印页面的页眉内容，@bottom-center规则定义了打印页面的页脚内容。你可以根据需要自定义页眉和页脚的内容和样式。

分页控制

在打印长文档时，我们可能需要控制分页，以确保每一页的内容完整且易读。我们可以使用CSS的page-break属性来控制分页。下面是一些常用的分页控制属性：

page-break-before：在元素前插入分页。
page-break-after：在元素后插入分页。
page-break-inside：阻止元素内部的内容跨页。

下面是一个示例：

h1 {
  page-break-before: always;
}

p {
  page-break-inside: avoid;
}

在上面的代码中，h1元素前将始终插入分页，而p元素内部的内容将避免跨页。你可以根据具体需求自定义分页控制属性。

示例

为了更好地理解如何使用CSS格式化8.5×11英寸打印页面，以下是一个完整的示例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>打印页面示例</title>
  <style>
    @page {
      size: 8.5in 11in;
      margin: 1in;
      @top-center {
        content: "打印页眉";
        font-size: 10pt;
      }
      @bottom-center {
        content: "打印页脚";
        font-size: 10pt;
      }
    }

    body {
      font-size: 12pt;
      font-family: Arial, sans-serif;
    }

    h1 {
      page-break-before: always;
      font-size: 18pt;
    }

    p {
      page-break-inside: avoid;
      line-height: 1.5;
    }
  </style>
</head>
<body>
  <h1>这是标题</h1>
  <p>这是一段内容。Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor justo at enim laoreet congue. Duis tincidunt finibus nisi eget vulputate.</p>

  <h1>这是另一个标题</h1>
  <p>这是另一段内容。Suspendisse felis orci, scelerisque sit amet vulputate in, feugiat ut purus. Donec lorem lorem, egestas nec sollicitudin sed, finibus at lacus.</p>
</body>
</html>

上面的示例中，我们定义了一个带有标题和段落的简单页面，并进行了格式化。每一页都有页眉和页脚，标题具有较大的字体大小，段落之间避免了跨页。