下面是在网上搜到一段解决该问题的代码。


<HTML>
<HEAD>
<!--  -->
<STYLE>
.PagerPrint{page-break-after: always}
</STYLE>
</HEAD>
<BODY>
<!-- 注意:以下的两个Table是并列的 -->

<table id = "tbContent1">
<tr>
<td> 内容一 <td>
</tr>
</table>

<!-- 以下这个div相当于一个分页控制符 -->
<div class = "PagerPrint"></div>

<table id = "tbContent2">
<tr>
<td> 内容二 <td>
</tr>
</table>

</BODY>
</HTML>


但实际测试中发现,很多IE系浏览器会出现不能分页的问题。

这是因为PagerPrint所有的div没有高度的原因,或者是BUG吧!

所以只需要修改一下CSS样式就可以了

.PagerPrint{page-break-after: always;height:1px;}

转载自:http://www.cnblogs.com/shoupifeng/archive/2010/01/26/1656438.html

独立

  • 屏蔽IE浏览器(也就是IE下不显示)

  • 仅Firefox可见

    *:lang(zh) select {font:12px !important;}

  • 仅Safari可见

    select:empty {font:12px !important;}

  • 仅Opera可见

    @media all and (min-width: 0px){ select{……} }

  • IE系列

  • 仅IE可见

    select {*font:12px;}
    select {+font:12px;}
    这两句作用一样,只有IE能解释 * or +

  • 仅IE7与IE5.0可以识别

    *+html select {}当面临需要只针对IE7与IE5.0做样式的时候就可以采用这个HACK.

  • 仅IE7可以识别

    *+html select {font:12px;!important;}当面临需要只针对IE7做样式的时候就可以采用这个HACK.

    IE7跟IE6及以下的一个很明显的区别就是对!important的支持.
    IE7对样式的解释跟DTD是有关,在没有DTD的时候,IE7是能读取IE6的hack的.
    同时必须说明的就是*+html这个Hack必须在松散型DTD下生效,即刻:
    <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” ”http://www.w3.org/TR/html4/loose.dtd”>

  • IE6及IE6以下识别

    * html select {}这个地方要特别注意很多博客都写成了是IE6的HACK其实IE5.x同样可以识别这个HACK.其它浏览器不识别.

    html/**/ >body select {}这句与上一句的作用相同。

  • 仅IE6不识别,屏蔽IE6

    select { display /*屏蔽IE6*/:none;}这里主要是通过CSS注释分开一个属性与值,注释在冒号前。

  • 仅IE6与IE5不识别,屏蔽IE6与IE5

    select/**/ { display /*IE6,IE5不识别*/:none;}这里与上面一句不同的是在选择符与花括号之间多了一个CSS注释。不屏蔽IE5.5

  • 仅IE5不识别,屏蔽IE5

    select/*IE5不识别*/ {}这一句是在上一句中去掉了属性区的注释。只有IE5不识别,IE5.5可以识别。

混合

  • 同一选择器针对不同浏览器

    select {
    background-color: black;/* firefox, opera, ie8 */
    [;background-color: green;]/* safari, chrome */
    *background-color: blue;/* ie7 */
    _background-color: red;/* ie6 */
    }
    html*~/**/body select {
    border: 5px solid red;/* ie8 */
    }
    以上只是一个例子说明混合写法.以下是对例子的补充
    1.IE都能识别*;标准浏览器(如FF)不能识别*;
    2.IE7,FF能识别!important,IE6不能.
    3.只有IE6能识别_
    4.不管是什么方法,书写的顺序都应该是firefox的写在前面,IE7的写在中间,IE6的写在最后面。
    5.对于ie8 chrome hack的请 GOOGLE or BAIDU …

    相关阅读

过滤

  • IE5.x的过滤器,只有IE5.x可见

    @media tty {
    i{content:"";/*" "*/}} @import 'ie5win.css'; /*";}
    }/* */

  • IE5/MAC的过滤器,一般用不着

    /**//*/
    @import "ie5mac.css";
    /**/

  • IE的if条件Hack(写在HTML中的通过条件来链接)

    <!--[if IE]> Only IE <![endif]-->所有的IE可识别

    <!--[if IE 5.0]> Only IE 5.0 <![endif]-->只有IE5.0可以识别

    <!--[if gt IE 5.0]> Only IE 5.0+ <![endif]-->IE5.0包换IE5.5都可以识别

    <!--[if lt IE 6]> Only IE 6- <![endif]-->仅IE6可识别

    <!--[if gte IE 6]> Only IE 6/+ <![endif]-->IE6以及IE6以下的IE5.x都可识别

    <!--[if lte IE 7]> Only IE 7/- <![endif]-->仅IE7可识别

应用

  • 盒模型解决方法

    selct {width:IE5.x宽度; voice-family :""}""; voice-family:inherit; width:正确宽度;}盒模型的清除方法不是通过!important来处理的。这点要明确。

  • 截字省略号

    select { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }这个是在越出长度后会自行的截掉多出部分的文字,并以省略号结尾,很好的一个技术。只是目前Firefox并不支持。

  • 清除浮动

    select:after {content:"020"; display:block; height:0; clear:both;}
    select {zoom:1;}
    在Firefox中,当子级都为浮动时,那么父级的高度就无法完全的包住整个子级,那么这时用这个清除浮动的HACK来对父级做一次定义,那么就可以解决这个问题。

    相关阅读

  • display:inline-block

    select {
    display:inline-block;/*Firefox3 beta、IE8 beta、Opera、Safari 支持,IE 下触发 inline 元素的 hasLayout*/
    display:-moz-inline-stack;/* Firefox 的私有属性,也可以用 -moz-inline-box */

    zoom:1;/*IE 下触发 hasLayout*/
    *display:inline;/*一旦IE 下触发了 hasLayout,设置 block 元素为 inline 会使 display:inline 效果与 display:inline-block 相似*/

    text-indent:-9999px;
    *text-indent:0;
    font-size:0;
    line-height:0;/* 如需隐藏文字,可用这四个属性 */
    /*另外上面隐藏文字,还可以用更简化的方法:line-height:超级大值;font-size:0; */

    overflow:hidden;/* 针对ie,防止内容溢出,造成的高度及宽度改变 */
    vertical-align:middle;/* 行内垂直居中,针对 Opera 比较大的偏离 */

    width:px;/*?为任意非auto值*/
    height:px;/*?为任意非auto值*/
    }

    在实际应用中 -moz-inline-box 会存在元素间的对齐等问题,虽然 Firefox 还有一个私有属性 -moz-box-align 来帮助解决对齐问题,但依旧难以预料问题多多,而相对来说 -moz-inline-stack 的表现更像 inline-block ,这点可以在 Firefox3 中测试出来。但 -moz-inline-stack 使用时也会有一个 bug ,如果一个 display:-moz-inline-stack; 的元素外层元素是 display:inline; 即会使 Firefox 中其包含的链接不可点,这个需要用 position:relative; 来解决。详细例子见<<display:inline-block的应用两例>>

在项目中涉及到动态添加CSS的问题,从网上查下资料,果然有高手写过。

原文:http://blog.csdn.net/pnuts/archive/2009/02/11/3876328.aspx

为了节省代码和写出更兼容的代码,有时我们需要用Javascript动态的增加CSS样式。

IE下,我们可以使用 document.createStyleSheet() 方法;而在非IE浏览器上,就不支持这个方法。可以使用document.styleSheets[0],但要求网页里必须最少已经加载过一个样式表。

后来我找到以下方法,可以在Firefox、Opera下正常运行:
var str_css = “body {font-size:12px;}”;
var style = document.createElement(“style”);
style.type = “text/css”;
style.innerHTML = str_css;
document.getElementsByTagName(“HEAD”).item(0).appendChild(style);

但这种方法却在Safari、Chrome下不可行,原因是style.innerHTML不可写。我再找解决方案,发现用textContent代替innerHTML的方法可行。

最后,我发个原创JS动态增加CSS样式的方法,兼容目前流行的任意浏览器:


function add_css(str_css) { //Copyright @ rainic.com
try { //IE下可行
var style = document.createStyleSheet();
style.cssText = str_css;
}
catch (e) { //Firefox,Opera,Safari,Chrome下可行
var style = document.createElement("style");
style.type = "text/css";
style.textContent = str_css;
document.getElementsByTagName("HEAD").item(0).appendChild(style);
}
}

在译言上看到这篇文章,才知道原来这项技术叫做CSS Sprites。这篇文章介绍的很全了,转载之,供大家学习吧.

转自http://www.yeeyan.com/articles/view/oc/39032

CSS Sprites并没有一个确定的中文翻译,通常被意译为“CSS图像拼合”或“CSS贴图定位”。CSS Sprites并不是一门新技术,目前它已经在网页开发中发展得较为成熟。CSS Sprites并不是什么金科玉律,但在很多情况下,它有着一定的优势,最重要的是它可以减轻服务器的负载,提高网页加载速度。

本文系统的介绍了CSS Sprites的概念、用途和用法,相信本文会解决你在使用CSS Sprites中遇到的大部分问题。

什么是CSS Sprites?

“Sprite”(精灵)这个词在计算机图形学中有它独特的定义,由于游戏、视频等画质越来越高,必须有一种技术可以智能的处理材质和贴图,并且要 同时保持画面流畅。“Sprite”就是这样一种技术,它将许多图片组合到一个网格上,然后通过程序将每个网格的内容定位到画面上。

Sprite被定位到一副静态图片上,并且通过简单的程序或硬件即可正确定位到画面上,一幅幅图片就像是被“变”出来的,他们并没有单独占用内存,所以被取名为“Sprite精灵”。

Screenshot

上图是口袋妖怪的组合图片,可以点这里欣赏更多

时间进行到2000年,Web设计向着精致、巧妙的方向发展。设计师们开始考虑使用非Javascript的方 式制作鼠标滑过、悬停菜单的效果,这时CSS Sprite应运而生,它基于同上文提到的游戏Sprite同样的原理,并且使用CSS更容易控制,很快的流行开来。

2004年,Dave Shea 提出了一种使用CSS控制组合图片的方案 ,将许过小的图片组合在一起,使用css定义背景属性,来控制图片的显示位置和方式。

当页面加载时,不是加载每个但以图片,而是一次加载整个组合图片。这是一个了不起的改进,它大大减少了HTTP请求的次数,减轻服务器压力,同时缩短了悬停加载图片所需要的时间延迟,使效果更流畅,不会停顿。

CSS Sprites用在哪里?

CSS Sprites可以用在很多场合,大字那个网站可以将许多单独的图片,以有机的方式组合起来,从而使其便于维护和更新。图片之间通常会留出较大的空白,使 得图片不会影响网页的内容。但同时CSS Sprite大多使用于较固定的像素定位中,它的弹性较差,收到定位等因素的制约。所以,你需要在可维护性vs降低负载之间权衡利弊,选择最适合你的项目 的方式。

下面是一些CSS Sprites的使用范例:

Xing

这个网站将一些按钮、图标以及LOGO做成了CSS Sprites:

Screenshot

Amazon
亚马逊使用的大幅、整齐巧妙的CSS Sprites:

Screenshot

Apple
苹果网站使用CSS Sprites来制作导航菜单的鼠标悬停效果:

Screenshot

YouTube
YouTube使用了一个2008像素高的CSS Sprites:

Screenshot

CNN
CNN使用了非常简单谨慎的方案:

Screenshot

Digg
Digg的方案比较复杂:

Screenshot

Yahoo
Yahoo将他们漂亮的图标等距离排布起来:

Screenshot

Google
Google使用了极其简化的方案:

Screenshot

Dragon Interactive
一个丰富多彩的CSS Sprites方案:

Screenshot

TV1.rtp.pt
一个很大很酷的CSS Sprites方案

Screenshot

CSS Sprites常用来合并频繁使用的图形元素,如导航、LOGO、分割线、RSS图标、按钮等。通常它们不会作为网页内容出现,因为涉及内容的图片并不是每个页面都一样。

关于CSS Sprites的文章

CSS Sprites: Image Slicing’s Kiss of Death

中文版 http://www.liquidroc.name/post/my_view_on_css_sprites.html

最权威的CSS Sprites介绍文章之一

Screenshot

CSS Sprites: What They Are, Why They’re Cool And How To Use Them
一片图文并茂的介绍文章

Screenshot

How Yahoo.com and AOL.com Improve Web Performance With CSS Sprites
介绍Yahoo、AOL等网站使用CSS Sprites降低服务器压力的案例。

What Are CSS Sprites?
又一片介绍文章

Screenshot

Sprite Optimization
Dave Shea的思考:是不是真的有必要简历复杂的大型CSS Sprites?答案是不!不要搞得太复杂,找到一个折中的方案才是正道。

CSS Sprites

Creating Easy and Useful CSS Sprites

一篇教程,其源文件可下载学习

Screenshot

Fast Rollovers Without Preload

一个快速翻转效果的例子

Screenshot

CSS Sprites + Rounded corners

另一个例子:使用CSS Sprites实现背景圆角

Screenshot

CSS Image Sprites

一篇教程

Optimize Your Website Using CSS Image Sprites

非常详细的教程,介绍了CSS Sprites的原理和应用方法。

Screenshot

Animated GIF For CSS Sprites

一个比较特别的应用

Screenshot

Image Sprite Navigation With CSS

怎样制作简单的悬停菜单效果

Screenshot

Advanced CSS Menu

还是悬停效果

Screenshot

Creating and Using CSS Sprites

一个非常基本的教程

CSS Sprites Screenshot

CSS Sprites视频教程

How to Use CSS Sprites
David Perel解释了CSS Sprites的基本概念,并演示了如何在网页中使用它,长度:10分钟

Creating Rounded Buttons With CSS Sprites
继续上面的教程,展示了如何制作滑动按钮

Exactly How to Use CSS Sprites
Andres Fernandez  展示了 CSS sprites如何加快加载时间和减少请求次数

How To Use CSS Sprites
Chris Coyier 展示了一个 CSS sprites的范例,他将8幅图片组合在了一起,并且使用jQuery制作了一个小程序。

Faster Page Loads With Image Concatenation
对于复杂的网站,减少图片请求数量可以减轻服务器负担,这是许多站长所希望看到的。

CSS Image Sprites In 10 Minutes
另一个关于导航菜单的教程

CSS: Using Percentages in Background-Image
介绍背景图片定位的方法

利用CSS Sprites制作图像映射(image maps)

使用CSS Sprites,你可以对一个对象的一小部分加载翻转效果,使用负值的背景图片位置( background-position ),你可以创建基于CSS的图像映射,下面的文章讲述了这一技术:

CSS Image Maps Using Sprites
一个基于CSS的图像映射的简单例子。你可以同传统的方式对比一下优劣。

Screenshot

City Guide Map Using Sprites
另一个横向定位的例子

Screenshot

Advanced Map Using Sprites
一个更高级的技术。

Screenshot

CSS Sprites技术

CSS Sprites 2
Dave Shea 使用jQuery扩展了经典的CSS Sprites, 他的技术可以让不同的链接之间使用组合图片,即使用户禁用了Javascript。

CSS Sprites2 Refactored: Building an Unobtrusive jQuery Plug-In
Joel Sutherland 制作的jQuery插件,整理了Dave Shea的功能,并简化了初始化设置。

CSS Sprites Screenshot

Background Repeat and CSS Sprites
什么情况下使用CSS Sprites

CSS Sprite: Photoshop Script Combines Two Images for CSS Hover
这是一个可以导入Photoshop的动作设置,可以让你快速制作翻转按钮的背景图片。

CSS Sprites Screenshot

Extending CSS Spriting
Jennifer Semtner 扩展了经典CSS Sprites技术,并讲述应该在什么时候使用它。

Sliding Doors Meets CSS Sprites
滑动门技术 “Sliding Doors of CSS.”

How to Preload Images When You Can’t Use CSS Sprites
如何处理CSS Sprites对网页内容的影响

JavaScript Sprite Animation Using jQuery
Alex Walker 结合CSS Sprites和jQuery,实现了“打开页面”的效果

CSS Sprites Screenshot

IE6, CSS Sprites and Alpha Transparency
Julien Lecomte 讲述IE6下的透明hack问题

CSS Sprite 制作工具

Data URI Sprites
DURIS (Data URI [CSS] Sprites) 是一个管理网页图片的新工具,它可以最大限度的帮助你减少背景图片的数量,减少请求数。

Screenshot

Spritr
一个生成CSS Sprites的简单工具

Sprite Creator 1.0
同上

CSS Sprite Generator
制作CSS sprites 的Drupal插件

CSS Sprites Generator
这个工具允许你上传多张图片生成CSS Sprites和CSS代码

Projekt Fondue CSS Sprite Generator
它具有忽略重复图像,调整图像精度,确定横向和纵向偏移,指定背景色和透明度,指定CSS前缀等众多功能。

Screenshot

SmartSprites
基于java的桌面程序

你可以继续以你自己的方式编写CSS和使用图像,有一个工具可以自动为你设置CSS Sprites,这里是PHP 版本 ,它是开源的,具体可以看: Chris Brainard’s Sprite Creator 1.0.

附:CSS属性background-position(图像背景位置)该如何设置

background-position(图像背景位置)这个属性是CSS中非常重要的属性。

根据CSS规范,background-position属性包含了两个(可选的)变量:水平位置(horizontal)和垂直位置(vertical),例如:

  1. .introduction { 
  2. background-image: url(bg.gif); 
  3. background-position: [horizontal position] [vertical position]; 
  4.     } 
	.introduction { 		background-image: url(bg.gif); 		background-position: [horizontal position] [vertical position]; 		}[/source]

使用这个属性,你可以定义块级元素的背景图像位置,可以使用%百分比或px像素为单位来定义图像开始的位置,也可以使用关键字:top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right.

在“ background-position: x% y%; ”这样一个语句中,x%指水平偏移,y%指垂直偏移,左上角是:0%,0%,右下角是:100%,100%,默认的是50%。

例如,你可以这样定义:

  1. ul li { 
  2. background-image: url(bg.gif); 
  3. background-position: 19px 85px; 
  4.     }, 
	ul li { 		background-image: url(bg.gif); 		background-position: 19px 85px; 		},[/source]

这样背景图片就被定位到了距离左侧19像素,距离上边85像素。

关于这个属性,可以在这里找到更详细的资料:background-position (CSS property)

英文原文:Smashing Magazine

中文翻译:Oncoding编码营

  在译言上看到的一篇介绍CSS比较全面的文章,不同于手册,这篇文章写得更实用。

原文:CSS Standards & Best Practices
译者:FlyChina

CSS是用来定义网站用户界面或将显示和内容区分开来的。

由于CSS被广泛地使用在几乎所有网站上,所以让我们花些时间来创建样式表并确保它符合良好的标准。下面的技巧会极大地在开发过程中帮助CSS初学者。

 

索引

本处的定义将帮助你和其他开发者了解网站和CSS文件,还将帮助你们了解CSS文件中的内容。索引部分知识一个格式化了的CSS注释段落

  • 给出CSS文件的作者信息
  • 定义网站设计(列数,静态/动态)[columns, static/liquid]
  • 持续跟踪文件版本(当文件有多个作者或未来需要有升级更新的时候非常有用)

 

锚点

锚点就好像在同一个CSS文件中的书签一样,锚点使你清晰地浏览整个CSS文件按并且使它很有组织。

锚点需要在CSS的索引(上面提到的)处定义,因为CSS没有自己的锚点系统,所以我在文档中使用了一个简单的技巧定义锚点。

方法是用一个比较罕见的字符来定义注释,当你想找某个锚点时,你就可以从索引处复制并查找锚点的定义符,并找到该锚点。

 

重定义

重定义是用来覆盖HTML默认的标签样式,把它们进行重定义的方法。你是否见过这样的CSS代码,它只是想把那个特定的元素加上样式!

CSS中一个非常美丽的用法是上下文选择器,让我们使用它:

 

命名规则

一个很关键的因素将元素给出精确无误并且干净有效的名字,这将避免混乱并让你更容易快捷地读懂你的CSS。

 

速写

CSS中的速写功能是你可以将许多同类型的属性合并成一个的属性。

CSS速写使开发过程更简单并且让你的CSS文件干净、简短、可读,下面是几个例子:

进一步阅读:

 

Sprites

(译者注:翻译成精灵好像并不能对文章加深感性认识,反倒在真正看到英文的时候不理解了,所以干脆不译。)

将所有的背景图片合并到一张并且使用背景定位来显示不同的部分,这就是我们所说的CSS Sprites。

CSS Sprites能够减少HTTP请求的数量,节省带宽,使得读取更快。同时也可以避免图像不稳定现象(比如当鼠标经过一张图片时可以显示另一张图片的效果,后一张图片将在慢速的因特网连接中等待半天才会出现)。

CSS Sprites最佳并且最受欢迎的例子是苹果公司网站上的菜单系统:

图片来源:apple.com

进一步阅读:

 

明确化

选择器明确化是当好几个规则都可以被相同的元素使用时,优先使用哪一个的过程。

简单说来,每个CSS选择器都有权重。选择器的所有权重的总和决定了它在文档中的属性。当CSS文档很大,以至于你不知道元素哪个权重较大时,明确化就能起到很大的帮助。

恩,明确化是CSS中一个较大的领域,以至于很难用几句话解释清楚,还是看例子吧:

进一步阅读:

 

属性重置

全局属性重置确保一个网站在所有浏览器中显示几乎一样。在每一个案例中,不同的浏览器给所有网站使用它们自己的默认样式设置集,这将使我们的网站在不同的浏览器中显示不一样。全局属性重置将改正这种情况并让你从绝对一致的基础开始建立网站。

我并不总是推荐使用CSS框架,但是CSS重置你还是需要用到的。现在有许多不同的重置方法,从简单的到复杂的。

进一步阅读:

 

Hacks

即便是一个完美的CSS,它也不能在所有浏览器中产生完全一致的显示,每个浏览器有对CSS不同的解释方法。总而言之,如果你需要你的网站在所有浏览器中保持一致,你不得不使用CSS Hacks。

使用CSS Hacks将减少CSS验证时产生的错误,这一点我同意。要实现这点,一个可选的方法是每个浏览器使用单一不同的CSS文件并通过在HTML中包含判定浏览器的标签来告诉浏览器应该使用哪个特定的CSS。我经常在我所有的项目中创建一个“fuck-ie.css” 🙂 (译者注:此处作者用脏话表达了他对IE的愤怒。如果翻译成“和IE交配.css”,世界会不会和谐一些?)

使用这种方法后,你的“主CSS文件”将通过验证,与此同时,”fuck-ie.css” 文件也会通过验证,但是只在IE浏览器中覆盖“主CSS文件”。

进一步阅读:

 

验证

在创建CSS的时候就验证它总是很必要的,浙江确保你的CSS没有错误并且可以被所有浏览器正确地解释。

W3C验证器是一个非常流行的在线CSS验证工具。

如果你有什么更多的技巧想加到本文中,请在文章评论中分享他们,我们希望这能帮到你。

   样式表的一个非常实用的特点就是它可以作用于多种媒体,比如屏幕、投影、打印机等等。使特定的属性只能作用于特定的媒体,如我们可以设页面在屏幕显示时用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;}
}