HTML <style> 标签的 media 属性

实例

针对两种不同媒介类型的两种不同的样式（计算机屏幕和打印）：

  1. <html>
  2. <head>
  3. <style type="text/css">
  4. h1 {color:#FF0000;}
  5. p {color:#0000FF;}
  6. body {background-color:#FFEFD6;}
  7. </style>
  8.  
  9. <style type="text/css" media="print">
  10. h1 {color:#000000;}
  11. p {color:#000000;}
  12. body {background-color:#FFFFFF;}
  13. </style>
  14. </head>
  15.  
  16. <body>
  17. <h1>Header 1</h1>
  18. <p>A paragraph.</p>
  19. </body>
  20. </html>

定义和用法

media 属性用于为不同的媒介类型规定不同的样式。

提示：如需在一个 style 元素中定义一个以上的媒介类型，请使用逗号分隔的列表（例如：<style type="text/css" media="screen,projection">）。

浏览器支持

所有主流浏览器都支持 media 属性的 "screen"、"print" 以及 "all" 值。

提示：Opera 同时支持 "handheld" 值。

语法

  1. <style media="value">

属性值

值 描述
screen 计算机屏幕（默认值）。
tty 电传打字机以及使用等宽字符网格的类似媒介。
tv 电视类型设备（低分辨率、有限的屏幕翻滚能力）。
projection 放映机。
handheld 手持设备（小屏幕、有限的带宽）。
print 打印预览模式 / 打印页。
braille 盲人用点字法反馈设备。
aural 语音合成器。
all 适合所有设备。