CSS分页媒体：初学者的全面指南

你好，有抱负的网页开发者们！今天，我们将深入探讨CSS分页媒体这个迷人的世界。别担心如果你之前从未听说过它——我们将从最基本的知识开始，逐步深入。在本教程结束时，你将能够使用CSS创建令人惊叹的打印布局。那么，让我们开始吧！

什么是CSS分页媒体？

CSS分页媒体是一组CSS功能，允许你控制网页内容在打印或以分页格式（如PDF）查看时的外观。就像是给你的网站做一个打印机的“改造”！

想象一下，你创建了一个漂亮的网站，但当你尝试打印它时，一切都是混乱的，位置不对。这就是CSS分页媒体发挥作用的地方！它帮助你即使在屏幕之外，也能保持对布局的控制。

CSS分页媒体 - 相关属性

让我们看看一些使CSS分页媒体发挥魔力的关键属性：

属性	描述	示例
@page	定义页面的尺寸和边距	@page { size: A4; margin: 2cm; }
size	设置页面框的尺寸	size: 8.5in 11in;
marks	向文档添加裁剪和/或交叉标记	marks: crop cross;
bleed	指定打印内容的出血区域	bleed: 0.5cm;
page-break-before	控制元素之前的分页	page-break-before: always;
page-break-after	控制元素之后的分页	page-break-after: avoid;
page-break-inside	控制元素内部的分页	page-break-inside: avoid;

让我们看看其中一些属性的实际应用：

@page {
size: A4;
margin: 2cm;
@top-center {
content: "我的超级文档";
}
@bottom-right {
content: counter(page);
}
}

h1 {
page-break-before: always;
}

table {
page-break-inside: avoid;
}

在这个示例中，我们设置了A4页面的2cm边距。我们在每页的顶部中心添加了一个页眉，并在底部右角添加了页码。我们还确保每个h1元素都从新页面开始，表格不会跨页分割。

CSS @规则

CSS @规则是指导CSS如何行为的声明。它们以一个@符号开头，后跟一个标识符。让我们看看一些特定于分页媒体的@规则：

@规则	描述	示例
@page	为分页媒体定义一个页面框	@page :first { margin-top: 10cm; }
@top-left	定义页面左上角的内容	@top-left { content: "第1章"; }
@top-center	定义页面顶部的中心内容	@top-center { content: "我的书"; }
@top-right	定义页面右上角的内容	@top-right { content: date("yyyy-mm-dd"); }
@bottom-left	定义页面左下角的内容	@bottom-left { content: "机密"; }
@bottom-center	定义页面底部的中心内容	@bottom-center { content: "版权2023"; }
@bottom-right	定义页面右下角的内容	@bottom-right { content: counter(page); }

以下是如何使用这些规则的示例：

@page {
@top-center {
content: "爱丽丝梦游仙境";
font-family: "Times New Roman", serif;
font-size: 12pt;
}
@bottom-right {
content: "页 " counter(page);
}
}

@page :first {
@top-center { content: none; }
@bottom-right { content: none; }
}

在这个示例中，我们在每页的顶部添加了书名，底部右角添加了页码。我们还从第一页去除了这些元素，以获得更干净的书名页外观。

CSS伪类

伪类用于定义元素的特殊状态。在分页媒体的上下文中，有几个有用的伪类：

伪类	描述	示例
:first	选择第一页	@page :first { margin-top: 10cm; }
:left	选择所有左侧页面	@page :left { margin-left: 4cm; }
:right	选择所有右侧页面	@page :right { margin-right: 4cm; }
:blank	选择所有空白页面	@page :blank { @top-center { content: none; } }

让我们看看如何使用这些伪类：

@page :first {
margin-top: 10cm;
@top-center { content: none; }
@bottom-right { content: none; }
}

@page :left {
margin-left: 4cm;
margin-right: 3cm;
@top-left {
content: "爱丽丝梦游仙境";
}
}

@page :right {
margin-left: 3cm;
margin-right: 4cm;
@top-right {
content: "第 " counter(chapter);
}
}

在这个示例中，我们为第一页、左侧页面和右侧页面创建了不同的布局。第一页有更大的顶部边距，并且没有页眉或页脚。左侧页面在左上角有书名，而右侧页面在右上角有章节号。

结论

就这样，各位！我们一起穿越了CSS分页媒体的奇妙世界。从设置页面大小和边距到控制分页和添加页眉和页脚，你现在有了用CSS创建漂亮打印布局的工具。

记住，熟能生巧。尝试在你的项目中实验这些属性和@规则。你可能会惊讶于你对打印布局的控制能力！

快乐编码，愿你的打印永远清晰美观！

Credits: Image by storyset