如何使打印与显示用两个样式表(CSS之media使用)

   样式表的一个非常实用的特点就是它可以作用于多种媒体,比如屏幕、投影、打印机等等。使特定的属性只能作用于特定的媒体,如我们可以设页面在屏幕显示时用12号字体,当打印时用10号字体。

总结下来使用方式有三:

1.用@import或@media引入:

@import url(loudvoice.css) speech;
@media print {  font-size:10px; } 
@media screen {  font-size:12px; } 

2.在文档标记中引入媒体:

以下是引用片段:
<link rel=”stylesheet” type=”text/css” media=”print” href=”print.css”> 

3.
<style media=print>
  font-size:10px;
</style>
<style media=screen>
  font-size:12px;
</style>

  可以看出,@import和@media的区别在于,前者引入外部的样式单用于媒体类型,后者直接引入媒体属性。@import的使用方法是@import加样式单文件的URL地址再加媒体类型,可以多个媒体共用一个样式单,媒体类型之间用”,”分割符分开。@media用法则是把媒体类型放在前面,其他规则和rule-set基本一样。下面列出各种媒体类型:

设备类型(Media Type) 版本(Version) 兼容性(Compatibility) 简介(Description)
all CSS2 IE4+ 用于所有设备类型
aural CSS2 用于语音和音乐合成器
braille CSS2 用于触觉反馈设备
embossed CSS2 用于凸点字符(盲文)印刷设备
handheld CSS2 用于小型或手提设备
print CSS2 IE4+ 用于打印机
projection CSS2 用于投影图像,如幻灯片
screen CSS2 IE4+ 用于计算机显示器
tty CSS2 用于使用固定间距字符格的设备。如电传打字机和终端
tv CSS2 用于电视类设备

 

下面是手册的介绍,有点简单

语法:
@media sMedia { sRules }
取值:
sMedia  :  指定设备名称。请参阅 附录:设备类型 
sRules  :  样式表定义

说明:
指定样式表规则用于指定的设备类型。此规则无默认值。
请参阅 link 对象的 media 属性(特性)。
示例:
// 设置显示器用字体尺寸
@media screen {
BODY {font-size:12pt; }
}
 
// 设置打印机用字体尺寸
@media print {
@import “print.css”
BODY {font-size:8pt;}
}


( ! ) Warning: Missing argument 1 for cwppos_show_review(), called in /data/www/enjoyphp/wp-content/themes/flat/content-single.php on line 29 and defined in /data/www/enjoyphp/wp-content/plugins/wp-product-review/includes/legacy.php on line 18
Call Stack
#TimeMemoryFunctionLocation
10.0000355208{main}( ).../index.php:0
20.0001355496require( '/data/www/enjoyphp/wp-blog-header.php' ).../index.php:17
30.171910175400require_once( '/data/www/enjoyphp/wp-includes/template-loader.php' ).../wp-blog-header.php:19
40.173110246544include( '/data/www/enjoyphp/wp-content/themes/flat/single.php' ).../template-loader.php:74
50.252510821304get_template_part( ).../single.php:5
60.252510821824locate_template( ).../general-template.php:167
70.252510821920load_template( ).../template.php:643
80.252610822304require( '/data/www/enjoyphp/wp-content/themes/flat/content-single.php' ).../template.php:686
90.260010808816cwppos_show_review( ).../content-single.php:29

发表评论

电子邮件地址不会被公开。 必填项已用*标注