网页打印控制@media print
2016-03-10 10:36
381 查看
@media版本:CSS2 兼容性:IE5+
语法:
@media sMedia { sRules }
基本使用:
页眉页脚设置:
说明:
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 用于电视类设备
语法:
@media sMedia { sRules }
基本使用:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>打印设置</title> </head> <style media="print"> //这表示是在打印时的样式 .noprint { display: none; font-size:16px; COLOR: red; } </style> <style media="screen"> //这表示是在屏幕显示时的样工 .print { font-size:14px; COLOR: green; } </style> <body> <span class="print" >打印部分</span><br> <br> <Br> <span class="noprint" >不打印,但可以看部分</span> </body> </html>
页眉页脚设置:
@media print { @page:right{ @bottom-left { margin: 10pt 0 30pt 0; border-top: .25pt solid #666; content: "Our Cats"; font-size: 9pt; color: #333; } @bottom-right { margin: 10pt 0 30pt 0; border-top: .25pt solid #666; content: counter(page); font-size: 9pt; } @top-right { content: string(doctitle); margin: 30pt 0 10pt 0; font-size: 9pt; color: #333; } } }
说明:
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 用于电视类设备
相关文章推荐
- STM32_UART_笔记
- 初探JVM之垃圾收集算法
- 华为多臂路由配置
- CodeForces - 630K Indivisibility (容斥原理)
- Quartz定时调度框架
- TCP/IP知识总结(TCP/IP协议族读书笔记三)
- 焦点轮播图——myfocus焦点图库
- JS_元素位置大小
- jQuery 方法
- leetcode之 Palindrome Partitioning
- 详解mysql的sql_mode模式
- js、javascript正则表达式验证身份证号码
- TypeScript Type Innference(类型判断)
- Python多线程学习
- 抢鲜看!ComponentOne 2016年产品规划
- Android设计模式系列--模板方法模式
- sql语句like的用法
- c3p0配置解析
- JavaScript正则表达式
- PHP扩展迁移为PHP7扩展兼容性问题记录