用CSS媒体类型满足观众需求

开发者在线 Builder.com.cn 更新时间:2007-05-24作者:builder.com.cn 来源:

本文关键词: Tony Patton CSS css CSS

除了需要考虑不同的浏览器和Web标准之外,你更需要考虑的是浏览站点的设备或者媒体的多样性。CSS媒体类型提供创建Web应用软件的功能,它能随目标媒体的变化而变化。本文将用一些例子检查这个CSS特点。

媒体

CSS媒体类型指定了一组CSS属性。那些声称能够支持媒体类型的用户代理必须实现所有的属性,才能将这些属性应用于那个媒体类型。样式表使你能够指定在不同的媒体上如何将文件显示出来。例如,在屏幕上浏览一个页面,应该与打印页面,或者是通过语音合成器为视觉障碍用户播放页面的时候不同。

下面是目前支持的媒体类型的清单:

  • All可应用于所有的媒体类型
  • Aural使用语音合成器
  • Braille提供支持盲人触觉反馈设备
  • Embossed可用于盲人打印机
  • Handheld支持小型的或者带狭窄屏幕空间的手持设备
  • Print应用于打印机,所以用户能轻松打印页面的内容
  • Projection可用于项目介绍,像幻灯片一样
  • ScreenWeb内容最普通的显示装置:计算机屏幕
  • Tty媒体可使用固定大小的字符栅格,例如teletypes和终端
  • Tv应用于像电视这样的设备,比如WebTV

记住这些媒体类型,你可以开发出分离的样式表,这样就能让使用不同媒体的用户都能访问你的站点。

特定媒体样式表Media-specific CSS

你可以用各种各样的方法指定不同媒体类型。首先,你可以通过@import规则将外部样式表导入来指定媒体类型,下面的这条语句是基于tv设备的,它通过导入指定的样式表来完成功能。

@import url("webtv.css") tv;

你可以使用@media规则为Web页面中某些媒体类型提供显示规则。下面这条语句针对tv类型设备,使用@media规则将背景颜色设置为白色:

@media tv {

background: #fff;

}

Link HTML元素允许你连接到外部的样式表,这样你就可以使用媒体属性来指定连接的目标媒体样式。下面的这条语句告诉你该如何使用这种方式:

<LINK rel="stylesheet" type="text/css" media="tv" href="tv.css">

不管你使用哪种方法你都可以指定多个媒体类型,你只需要用逗号将各个媒体类型分开即可。例如,用下面这条语句,就先前的HTML示例而言,既可以重新写到tv类型的媒体中,也可以写到projection类型媒体中。

<LINK rel="stylesheet" type="text/css" media="tv, projection" href="tv.css">

用户评论

  • 用户名
  • 评论内容