css媒体类型 – CSS高级教程

上一章CSS高级教程请查看：css伪元素用法

CSS媒体类型允许你格式化你的文件，以正确地显示在各种类型的媒体，如屏幕，打印机，浏览器等。

媒体类型介绍

样式表最重要的特性之一是，你可以为不同的媒体类型指定不同的样式表。这是构建打印机友好的Web页面的最佳方法之一——只需为“打印机”媒体类型分配一个不同的样式表。

一些CSS属性只针对特定的媒体设计。例如，page-break-after属性只适用于分页的媒体。但是，有几个属性可以由不同的媒体类型共享，但是可能需要不同的属性值。例如，字体大小属性可用于屏幕和打印机媒体，但可能具有不同的值。

为了更好的可读性，一个文档通常需要在计算机屏幕上使用比纸张更大的字体，而且无衬线字体被认为在屏幕上更容易阅读，而衬线字体在打印机中很流行。因此，有必要指定样式表或一组样式规则应用于某些媒体类型。

创建与媒体相关的样式表

通常使用三种方法来指定样式表的媒体依赖关系：

方法1：使用@media样式表规则

@media规则用于在单个样式表中为不同的媒体类型定义不同的样式规则，它通常后跟一个逗号分隔的媒体类型列表和包含目标媒体样式规则的CSS声明块。

下面示例中的样式声明告诉浏览器在屏幕上以14个像素的Arial字体显示正文内容，但在打印机时将使用12倍的字体，但两者的line-height属性值都设置为1.2：

@media screen{
    body {
        color: #32cd32;
        font-family: Arial, sans-serif;
        font-size: 14px;
    }
}
@media print {
    body {
        color: #ff6347;
        font-family: Times, serif;
        font-size: 12pt;
    }
}
@media screen, print {
    body {
        line-height: 1.2;
    }
}

注意：@media规则之外的样式规则适用于样式表所应用的所有媒体类型，@media中的规则s在CSS2.1中是无效的。

方法2：使用@import样式规则

@import规则是为特定目标媒体设置样式信息的另一种方法—只需在导入的样式表的URL之后指定逗号分隔的媒体类型。

@import url("css/screen.css") screen;
@import url("css/print.css") print;
body {
    background: #f5f5f5;
    line-height: 1.2;
}

@import语句中的打印媒体类型指示浏览器加载外部样式表(print.css)，并仅对打印媒体使用其样式。

注意：所有@import语句必须出现在样式表的开头，在任何声明之前，在样式表中指定的任何样式规则都将覆盖导入的样式表中的冲突样式规则。

方法3：使用<link>元素

<link>元素上的媒体属性用于为HTML文档中的外部样式表指定目标媒体。

<link rel="stylesheet" media="all" href="css/common.css">
<link rel="stylesheet" media="screen" href="css/screen.css">
<link rel="stylesheet" media="print" href="css/print.css"></link>

在本例中，媒体属性指示浏览器加载外部样式表“screen”，使用它的样式只应用于屏幕，而“print”用于打印目的。

提示:你还可以指定多种媒体类型(每个媒体类型之间用逗号分隔，例如media=”screen, print”)，以及对<link>元素的媒体查询。

不同的媒体类型

下表列出了可用于不同类型设备的各种媒体类型，如打印机、手持设备、计算机屏幕等。

警告：虽然有几种媒体类型可供选择，但大多数浏览器只支持all，screen和print媒体类型。