CSS - 媒体类型


样式表最重要的特征之一是它们指定如何在不同媒体上呈现文档:在屏幕上、在纸上、使用语音合成器、使用盲文设备等。

目前我们有两种方法来指定样式表的媒体依赖性 -

  • 使用 @media 或 @import at 规则从样式表指定目标媒体。

  • 指定文档语言中的目标媒体。

@media 规则

@media规则指定一组规则的目标媒体类型(以逗号分隔)

下面给出一个例子 -

<style tyle = "text/css">
   <!--
      @media print {
         body { font-size: 10pt }
      }
	
      @media screen {
         body { font-size: 12pt }
      }
      @media screen, print {
         body { line-height: 1.2 }
      }
   -->
</style>

文档语言

在 HTML 4.0 中, LINK 元素上的媒体属性指定外部样式表的目标媒体 -

以下是一个例子 -

<style tyle = "text/css">
   <!--
      <!doctype html public "-//w3c//dtd html 4.0//en">
      <html>
         <head>
            <title>link to a target medium</title>
            <link rel = "stylesheet" type = "text/css" media = "print, 
               handheld" href = "foo.css">
         </head>

         <body>
            <p>the body...
         </body>
      </html>
   -->
</style>

认可的媒体类型

为 CSS 媒体类型选择的名称反映了相关属性有意义的目标设备。它们让我们了解媒体类型所指的设备。下面给出了各种媒体类型的列表 -

先生。 价值与描述
1

全部

适用于所有设备。

2

听觉的

适用于语音合成器。

3

盲文

适用于盲文触觉反馈设备。

4

浮雕的

适用于分页盲文打印机。

5

手持式

适用于手持设备(通常是小屏幕、单色、有限带宽)。

6

打印

适用于分页、不透明材料以及在打印预览模式下在屏幕上查看的文档。请参阅有关分页媒体的部分。

7

投影

适用于投影演示,例如投影仪或打印到透明胶片。请参阅有关分页媒体的部分。

8

屏幕

主要用于彩色计算机屏幕。

9

终端

适用于使用固定间距字符网格的媒体,例如电传打字机、终端或显示功能有限的便携式设备。

10

电视

适用于电视类设备。

注意- 媒体类型名称不区分大小写。