语法
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>-
在
@pageat-rule 中定义的区分大小写的名称。
正式定义
正式语法
page =
auto |
<custom-ident>
示例
命名页面示例
在此示例中，HTML 分为两部分：打印控件和要打印的内容。打印控件允许用户选择 article 中的 section 如何打印。
html
<!-- print options in a fieldset -->
<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="grouped">
<input type="radio" id="grouped" name="type" value="grouped" />Pages with
Grouped Chapters
</label>
<label for="paged">
<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 的第一部分设置了命名页面，其中包括大小和方向，以及一些要放置在打印页面 @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", sans-serif;
}
.chapter {
border: tomato 2px solid;
}
[data-print="grouped"] > #toc,
[data-print="paged"] > #toc {
page: toc;
font-family: "Courier New";
}
[data-print="grouped"] > #foreword,
[data-print="paged"] > #foreword {
page: foreword;
font-family: "Courier New";
}
[data-print="grouped"] > #introduction,
[data-print="paged"] > #introduction {
page: introduction;
font-family: "Courier New";
}
[data-print="grouped"] > #conclusion,
[data-print="paged"] > #conclusion {
page: conclusion;
font-family: "Courier New";
}
[data-print="grouped"] > .chapter,
[data-print="paged"] > .chapter {
page: chapter;
}
[data-print="paged"] > .chapter {
border: none;
break-after: page;
}
.chapter > ul {
columns: 2;
}
}
当你选择不同的打印选项时，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 分页媒体模块第 3 级 # 使用命名页面 |
浏览器兼容性
加载中…