CSS 打印HTML时不同页面方向设置

在本文中，我们将介绍如何使用CSS在打印HTML时设置不同的页面方向。打印HTML时，我们通常希望在打印纸张上获得最佳的可阅读体验。有时，我们可能需要在不同的页面上使用不同的页面方向，例如在打印一本书时，封面和内容页可能需要使用不同的页面方向。

阅读更多：CSS 教程

CSS @page规则

CSS提供了@page规则，用于控制在页面打印中的格式。通过在@page规则中设置size和orientation属性，我们可以设定纸张尺寸和方向。在书写CSS样式时，我们可以根据需要为每个页面设置不同的@page规则。

下面是一个示例，展示了如何使用@page规则为封面和内容页设置不同的页面方向：

@page cover {
  size: A4 portrait;
}

@page content {
  size: A4 landscape;
}

在上面的示例中，我们定义了两个@page规则，一个用于封面页(cover)，另一个用于内容页(content)。封面页的页面方向设置为纵向(portrait)，而内容页的页面方向设置为横向(landscape)。

CSS 样式选择器

在上述示例中，我们定义了两个不同的@page规则，但没有指定何时使用哪个规则。为了应用这些规则，我们可以使用CSS样式选择器。

例如，我们可以为封面元素和内容元素分别定义一个类，并在CSS样式中使用这些类选择器：

<div class="cover">封面内容</div>
<div class="content">书籍内容</div>

@page cover {
  size: A4 portrait;
}

@page content {
  size: A4 landscape;
}

.cover {
  page: cover;
}

.content {
  page: content;
}

上述示例中，我们为封面和内容分别定义了.cover和.content类，并在CSS样式中使用这些类选择器。这样，打印时封面将适用于cover页面规则，内容页将适用于content页面规则。

示例

以下是一个完整的示例，展示了如何使用CSS为打印HTML设置不同的页面方向：

<!DOCTYPE html>
<html>
<head>
<style>
@page cover {
  size: A4 portrait;
}

@page content {
  size: A4 landscape;
}

.cover {
  page: cover;
}

.content {
  page: content;
}
</style>
</head>
<body>
<div class="cover">
  <h1>这是封面</h1>
  <p>这里是封面的内容。</p>
</div>

<div class="content">
  <h1>这是正文</h1>
  <p>这里是书籍的内容。</p>
</div>
</body>
</html>

在上述示例中，我们定义了两个@page规则，一个用于封面页(cover)，另一个用于内容页(content)。同时，我们使用.cover类选择器将封面模块应用到封面部分，使用.content类选择器将内容模块应用到内容部分。