页面
page
CSS 属性用于指定命名页面,这是一种由 @page
at 规则 定义的特定页面类型。
如果有多个选择器连续使用命名页面,则可能需要使用 break-after
强制分页符。
语法
css
/* set a named page */
page: exampleName;
page: chapterIntro;
/* Use ancestors named page */
page: auto; /* default value */
/* Global values */
page: inherit;
page: initial;
page: revert;
page: revert-layer;
page: unset;
值
auto
-
默认值。使用最近祖先中非
auto
值的值。如果祖先没有设置命名页面值,则 auto 的使用值为空字符串。 <custom-ident>
-
在
@page
at 规则中定义的区分大小写的名称。
正式定义
正式语法
page =
auto |
<custom-ident>
示例
命名页面示例
HTML
此 HTML 包含两个部分
- 打印控件
- 要打印的内容
打印控件允许用户选择 article
中的 section
如何打印。
html
<!-- print options -->
<fieldset id="printStyle">
<legend>How would you like to print</legend>
<label for="single"
><input type="radio" id="single" name="type" value="single" checked />No
Pages</label
>
<label for="double"
><input type="radio" id="grouped" name="type" value="grouped" />Pages with
Grouped Chapters</label
>
<label for="double"
><input type="radio" id="paged" name="type" value="paged" />Chapters
Paged</label
>
<button id="print">Print</button>
</fieldset>
<!-- Content to be printed -->
<article id="print-area" data-print="single">
<section id="toc">
<h2>Table of contents</h2>
<ul>
<li>Foreword</li>
<li>Introduction</li>
<li>Chapter One - named pages</li>
<li>Chapter Two - page orientation</li>
<li>Chapter Three - page margins</li>
<li>Conclusion</li>
</ul>
</section>
<section id="foreword">
<h2>Foreword</h2>
<p>
This book is all about how the CSS <code>@page</code> at-rule can help
with printing HTML books.
</p>
</section>
<section id="introduction">
<h2>Introduction</h2>
<p>
This book is a concept to show how an <em>HTML</em> document can easily be
printed out in pages.
</p>
</section>
<section id="chapter1" class="chapter">
<h2>Named pages</h2>
<p>Lorem ipsum</p>
</section>
<section id="chapter2" class="chapter">
<h2>Page Orientation</h2>
<p>Lorem ipsum</p>
</section>
<section id="chapter3" class="chapter">
<h2>Page Margins</h2>
<p>There are 16 page margins that can be set:</p>
<ul>
<li>@top-left-corner</li>
<li>@top-left</li>
<li>@top-center</li>
<li>@top-right</li>
<li>@top-right-corner</li>
<li>@left-top</li>
<li>@left-middle</li>
<li>@left-bottom</li>
<li>@right-top</li>
<li>@right-middle</li>
<li>@right-bottom</li>
<li>@bottom-left-corner</li>
<li>@bottom-left</li>
<li>@bottom-center</li>
<li>@bottom-right</li>
<li>@bottom-right-corner</li>
</ul>
<p>They can be used to show what appears in these parts of the margin</p>
</section>
<section id="conclusion">
<h2>Conclusion</h2>
<p>Now go ahead and write books.</p>
</section>
</article>
CSS
CSS 的第一部分设置了 **命名** 页面,包括尺寸和方向,以及要在打印页面的 @top-center
边距 中放置的内容。
css
@page toc {
size: a4 portrait;
@top-center {
content: "Table of contents";
}
}
@page foreword {
size: a4 portrait;
@top-center {
content: "Foreword";
}
}
@page introduction {
size: a4 portrait;
@top-center {
content: "Introduction";
}
}
@page conclusion {
size: a4 portrait;
@top-center {
content: "Conclusion";
}
}
@page chapter {
size: a4 landscape;
@top-center {
content: "Chapter";
}
}
CSS 的下一部分使用 属性选择器 将在前面 CSS 部分中定义的命名 @page
规则中定义的打印尺寸、方向和边距应用于使用 page
属性的元素。
具有 class="chapter"
的部分是并发且显示为一页。break-after: page;
用于将它们拆分,这会将每个章节拆分为单独打印的页面。
css
@media print {
fieldset {
display: none;
}
section {
font-size: 2rem;
font-family: Roboto;
}
.chapter {
border: tomato 2px solid;
}
[data-print="grouped"] > #toc,
[data-print="paged"] > #toc {
page: toc;
font-family: Courier;
}
[data-print="grouped"] > #foreword,
[data-print="paged"] > #foreword {
page: foreword;
font-family: Courier;
}
[data-print="grouped"] > #introduction,
[data-print="paged"] > #introduction {
page: introduction;
font-family: Courier;
}
[data-print="grouped"] > #conclusion,
[data-print="paged"] > #conclusion {
page: conclusion;
font-family: Courier;
}
[data-print="grouped"] > .chapter,
[data-print="paged"] > .chapter {
page: chapter;
}
[data-print="paged"] > .chapter {
border: none;
break-after: page;
}
.chapter > ul {
columns: 2;
}
}
JavaScript
JavaScript 在您选择不同的打印选项时更新 data-print
属性的值,该属性是应用命名页面的属性。
js
const printArea = document.querySelector("#print-area");
const printButton = document.querySelector("#print");
const printOption = document.querySelector("#printStyle");
printOption.addEventListener("change", (event) => {
if (event.target.value === "single") {
printArea.dataset.print = "single";
} else if (event.target.value === "grouped") {
printArea.dataset.print = "grouped";
} else {
printArea.dataset.print = "paged";
}
});
printButton.addEventListener("click", () => {
window.print();
});
结果
打印的内容以及在打印预览对话框中显示的内容将根据所选的打印样式单选按钮而改变。
规范
规范 |
---|
CSS 分页媒体模块 Level 3 # using-named-pages |
浏览器兼容性
BCD 表格仅在浏览器中加载