网页打印控制@media print

最新推荐文章于 2023-12-06 08:10:29 发布

weixin_30446613

最新推荐文章于 2023-12-06 08:10:29 发布

阅读量1.4k

点赞数

文章标签： xhtml

原文链接：http://www.cnblogs.com/ylz-blog/p/5260894.html

版权

@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 用于电视类设备

转载于:https://www.cnblogs.com/ylz-blog/p/5260894.html

weixin_30446613

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
网页打印控制@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...
复制链接

扫一扫