CSS3中的@page指令是用于控制文檔打印的頁面樣式的。在打印時,文檔中的內容以頁面為單位分離出來,每一頁都有自己獨特的樣式,而@page可以讓我們定義這些頁面樣式。
/*定義頁面樣式*/ @page { size: A4 portrait; /*定義頁面大小及方向*/ margin: 50px; /*定義頁面邊距*/ } /*在CSS中定義打印樣式*/ @media print { body { font-size: 12px; /*設置字體大小*/ line-height: 1.5; /*設置行高*/ } /*設置頁眉*/ @page :first { content: "頁眉內容"; margin-top: 50px; margin-bottom: 20px; } /*設置頁腳*/ @page :last { content: "頁腳內容"; margin-top: 20px; margin-bottom: 50px; } }
上面的代碼演示了如何使用@page來定義頁面大小、邊距以及頁眉、頁腳等樣式,在打印時,這些樣式將應用于每一頁。
需要注意的是,@page的兼容性比較差,尤其是Internet Explorer瀏覽器,所以在使用該指令時,需要特別注意瀏覽器兼容性的問題。
上一篇css3 calc寬度
下一篇hyggee防曬vue