CSS控制打印機(jī),是指在打印網(wǎng)頁(yè)時(shí)可以通過(guò)CSS樣式控制打印文檔的樣式。CSS控制打印機(jī)可以使打印網(wǎng)頁(yè)的效果更加美觀并且方便閱讀。
下面是CSS控制打印機(jī)的一些技巧:
@media print { /*基礎(chǔ)樣式*/ body {font-size:12pt; color:#333;} /*去除不必要的元素*/ header,footer,nav,aside {display:none;} /*添加頁(yè)眉頁(yè)腳*/ @page { size: auto; margin-top: 10mm; margin-bottom: 10mm; @top-center { content: "打印網(wǎng)頁(yè)"; font-size:28pt; font-weight:bold; } @bottom-right { content: "第" counter(page) "頁(yè)"; font-size: 10pt; } } }
上述代碼片段是CSS控制打印機(jī)的基本樣式,包括了文本字體、顏色以及去除不必要的元素等。此外,根據(jù)需要可以添加頁(yè)眉和頁(yè)腳。
值得一提的是,我們可以使用@media
媒體查詢(xún)來(lái)設(shè)置打印樣式,以避免打印出不必要的樣式。代碼如下所示:
@media print { /*打印樣式*/ body {font-size:10pt; color:#000;} /*不打印樣式*/ .no-print {display:none;} }
上述代碼中,所有class為.no-print
的元素不會(huì)被打印。
最后,我們還可以使用CSS3的伸縮性來(lái)控制打印樣式。
@media print { /*在橫向和縱向上縮小100%*/ body {-webkit-transform: scale(.7);transform: scale(.7); } }
上述代碼可以使打印文檔在橫向和縱向上縮小100%。
總之,CSS控制打印機(jī)可以為我們的打印文檔加上更加美觀的樣式,而且通過(guò)媒體查詢(xún)和伸縮性,我們還可以更加方便地控制打印樣式。