CSS 打印樣式，可以讓我們?cè)O(shè)計(jì)出適合打印輸出的網(wǎng)頁(yè)布局，使得打印結(jié)果更加美觀、易讀。接下來(lái)，我們來(lái)學(xué)習(xí)一下如何定義 css 打印的頁(yè)碼。

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

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

首先，我們通過(guò) @page 規(guī)則來(lái)定義每一頁(yè)的基本樣式。比如，可以設(shè)置頁(yè)面的尺寸、邊距、背景顏色等。

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

接下來(lái)，我們可以通過(guò) @bottom-center 偽元素來(lái)定義頁(yè)碼的位置、字體、顏色等。

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

最后，我們使用 counter() 函數(shù)來(lái)自動(dòng)生成頁(yè)碼。counter() 函數(shù)可以自動(dòng)計(jì)數(shù)，輸出當(dāng)前頁(yè)的序號(hào)。可以通過(guò)設(shè)置 counter-reset 和 counter-increment 屬性來(lái)控制計(jì)數(shù)器的起始值和增量。

@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;
}

上面的代碼段還演示了如何生成章節(jié)編號(hào)。我們可以將章節(jié)編號(hào)作為另一個(gè)計(jì)數(shù)器，通過(guò) counter-reset 和 counter-increment 屬性來(lái)自動(dòng)計(jì)數(shù)。使用 before 偽元素來(lái)顯示編號(hào)前綴，然后使用 section 計(jì)數(shù)器來(lái)生成編號(hào)后綴。

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