当前位置: 首页 > 文档资料 > CSS 入门教程 >

媒体类型(Media Types)

优质
小牛编辑
134浏览
2023-12-01

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

我们目前有两种方式为样式表指定媒体依赖关系 -

  • 使用@media或@import at-rules从样式表中指定目标介质。

  • 在文档语言中指定目标介质。

@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元素上的media属性指定外部样式表的目标媒体 -

以下是一个例子 -

<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媒体类型选择的名称反映了相关属性有意义的目标设备。 它们可以让您了解媒体类型所指的设备。 以下是各种媒体类型的列表 -

Sr.No.价值和描述
1

all

适用于所有设备。

2

aural

用于语音合成器。

3

braille

用于盲文触觉反馈设备。

4

embossed

适用于分页盲文打印机。

5

handheld

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

6

print

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

7

projection

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

8

screen

主要用于彩色电脑屏幕。

9

tty

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

10

tv

用于电视类设备。

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