CSS 打印樣式，可以讓我們設計出適合打印輸出的網頁布局，使得打印結果更加美觀、易讀。接下來，我們來學習一下如何定義 css 打印的頁碼。

@media print {
@bottom-center {
content: counter(page);
}
}

上面的代碼段是定義頁碼的基本語法，它使用了 CSS 的 @page 規則以及 counter() 函數。

首先，我們通過 @page 規則來定義每一頁的基本樣式。比如，可以設置頁面的尺寸、邊距、背景顏色等。

@page {
size: A4;
margin: 2cm;
background-color: #ffffff;
}

接下來，我們可以通過 @bottom-center 偽元素來定義頁碼的位置、字體、顏色等。

@page {
size: A4;
margin: 2cm;
background-color: #ffffff;
@bottom-center {
content: counter(page);
font-size: 12pt;
color: #666666;
}
}

最后，我們使用 counter() 函數來自動生成頁碼。counter() 函數可以自動計數，輸出當前頁的序號。可以通過設置 counter-reset 和 counter-increment 屬性來控制計數器的起始值和增量。

@page {
size: A4;
margin: 2cm;
background-color: #ffffff;
@bottom-center {
content: counter(page);
font-size: 12pt;
color: #666666;
}
@bottom-right {
content: counter(section);
font-size: 10pt;
color: #999999;
}
}
body {
counter-reset: page 1;
}
h1 {
counter-reset: section;
}
h2:before {
content: counter(section) ".";
counter-increment: section;
}

上面的代碼段還演示了如何生成章節編號。我們可以將章節編號作為另一個計數器，通過 counter-reset 和 counter-increment 屬性來自動計數。使用 before 偽元素來顯示編號前綴，然后使用 section 計數器來生成編號后綴。

總之，CSS 打印樣式為我們提供了豐富的排版控制方式，讓我們可以更好地控制打印頁面的樣式、布局和排版效果。