CSS Paged Media：初學者的全面指南

您好，有志於網頁開發的各位！今天，我們將要深入CSS Paged Media的迷人世界。別擔心如果你之前從未聽說過——我們將從最基本的知識開始，逐步深入。到了這個教學的結尾，你將能夠使用CSS創建有震撼力的印刷佈局。那麼，我們開始吧！

什麼是CSS Paged Media？

CSS Paged Media是一組CSS功能，讓你可以控制當你的網頁內容被打印或以頁面格式（如PDF）查看時的外觀。這就像給你的網站進行了一次專為打印設計的改頭換面！

想像一下，你創建了一個美麗的網站，但當你嘗試打印它時，一切都顯得混亂且不合適。這就是CSS Paged Media發揮作用的時候！它幫助你在內容不在螢幕上時，仍然能夠控制佈局。

CSS Paged Media - 相關屬性

我們來看看一些讓CSS Paged Media發揮魔力的關鍵屬性：

屬性	描述	示例
@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: "My Awesome Document";
}
@bottom-right {
content: counter(page);
}
}

h1 {
page-break-before: always;
}

table {
page-break-inside: avoid;
}

在這個例子中，我們設置了一個A4頁面，並有2cm的邊距。我們在每頁的頂部中心添加了一個頁眉，並在底部右側添加了頁碼。我們還確保每個h1標題都從新頁開始，並且表格不會被跨頁分割。

CSS at規則

CSS at規則是用來指導CSS如何行為的聲明。它們以@符號開頭，後跟一個標識符。讓我們看看一些專門針對Paged Media的at規則：

At規則	描述	示例
@page	為頁面媒體定義一個頁面框	@page :first { margin-top: 10cm; }
@top-left	定義頁面頂部左角的內容	@top-left { content: "Chapter 1"; }
@top-center	定義頁面頂部中間的內容	@top-center { content: "My Book"; }
@top-right	定義頁面頂部右角的內容	@top-right { content: date("yyyy-mm-dd"); }
@bottom-left	定義頁面底部左角的內容	@bottom-left { content: "Confidential"; }
@bottom-center	定義頁面底部中間的內容	@bottom-center { content: "Copyright 2023"; }
@bottom-right	定義頁面底部右角的內容	@bottom-right { content: counter(page); }

以下是如何使用這些規則的例子：

@page {
@top-center {
content: "Alice's Adventures in Wonderland";
font-family: "Times New Roman", serif;
font-size: 12pt;
}
@bottom-right {
content: "Page " counter(page);
}
}

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

在這個例子中，我們在每頁的頂部中心添加了書名，並在底部右側添加了頁碼。我們還從第一頁中移除了這些元素，以獲得乾淨的扉頁外觀。

CSS 虛擬類

虛擬類用於定義元素的特殊狀態。在Paged Media的上下文中，有幾個有用的虛擬類：

虛擬類	描述	示例
: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: "Alice's Adventures in Wonderland";
}
}

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

在這個例子中，我們為第一頁、左頁和右頁創建了不同的佈局。第一頁有更大的頂部邊距，並沒有頁眉或頁腳。左頁在頂部左角有書名，而右頁在頂部右角有章節號。

結論

好了，各位！我們已經一起穿越了CSS Paged Media的奇妙世界。從設置頁面尺寸和邊距到控制頁面折行以及添加頁眉和頁腳，現在你可以使用CSS創建有美感的印刷佈局了。

記住，熟練來自練習。嘗試在你的項目中實驗這些屬性和at規則。你可能會對你在打印佈局上能夠擁有的控制權感到驚訝！

開心編程，願你的打印作品永遠清晰美麗！

Credits: Image by storyset