語法
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 級 # 使用命名頁面 |
瀏覽器相容性
載入中…