網頁打印控制@media print


 

@media版本:CSS2  兼容性:IE5+

語法:
@media sMedia { sRules }

基本使用:

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>打印設置</title>
 6 </head>
 7 <style media="print">
 8 //這表示是在打印時的樣式 .noprint {
 9 display: none;
10 font-size:16px;
11 COLOR: red;
12 }
13 </style>
14 <style media="screen">
15 //這表示是在屏幕顯示時的樣工 .print {
16 font-size:14px;
17 COLOR: green;
18 }
19 </style>
20 <body>
21 <span class="print" >打印部分</span><br>
22 <br>
23 <Br>
24 <span class="noprint" >不打印,但可以看部分</span>
25 </body>
26 </html>

 頁眉頁腳設置:

 1 @media print {
 2  @page:right{  3  @bottom-left {  4  margin: 10pt 0 30pt 0;
 5  border-top: .25pt solid #666;
 6  content: "Our Cats";
 7  font-size: 9pt;
 8  color: #333;
 9         }
10  @bottom-right {
11  margin: 10pt 0 30pt 0;
12  border-top: .25pt solid #666;
13  content: counter(page);
14  font-size: 9pt;
15         }
16  @top-right {
17  content: string(doctitle);
18  margin: 30pt 0 10pt 0;
19  font-size: 9pt;
20  color: #333;
21         }
22  } 23 } 

 

說明:
sMedia :  指定設備名稱。請參閱附錄:設備類型 sRules :  樣式表定義
指定樣式表規則用於指定的設備類型。請參閱link對象的media屬性(特性)。
示例:
// 設置顯示器用字體尺寸 @media screen { BODY {font-size:12pt; } }
// 設置打印機用字體尺寸 @media print { @import "print.css" BODY {font-size:8pt;} }

=====================================================================

Media Types 設備類型
Media Type 設備類型 CSS Version 版本 Compatibility 兼容性 Description 簡介 all CSS2 IE4+ 用於所有設備類型 aural CSS2 NONE 用於語音和音樂合成器 braille CSS2 NONE 用於觸覺反饋設備 embossed CSS2 NONE 用於凸點字符(盲文)印刷設備 handheld CSS2 NONE 用於小型或手提設備 print CSS2 IE4+ 用於打印機 projection CSS2 NONE 用於投影圖像,如幻燈片 screen CSS2 IE4+ 用於計算機顯示器 tty CSS2 NONE 用於使用固定間距字符格的設備。

如電傳打字機和終端 tv CSS2 NONE 用於電視類設備


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM