不同的媒体类型可以用不同的 CSS 样式表。举例来说，在屏幕sreen上的文件可能适用某一个 CSS 样式表，而同一份文件在被打印时，可以用一个不同的 CSS 样式表。也就是说如可能显示在屏幕sreen上，也可能显示在纸质print上。那么当页面在不同的媒体类型中显示时，需要的样式可能是不一样的。比如，一般在screen上显示时，页面字体要大一些，在纸质媒体显示时，页面字体要小一些。那么如何告诉别人某个样式是适用于何种媒体类型的呢？这就要靠声明media type来实现了。
标出一个 CSS 样式表媒体类别的语法如下：
外部连接套用
<link rel="stylesheet" href="style.css" type="text/css" media="【媒体类别】">
嵌入套用
<style type="text/css" media="【媒体类别】">
汇入套用
@import url("style.css") 【媒体类别】;
【媒体类别】可以有以下的值：
| 媒体类型 | 描述 |
| all | 所有媒体类别 |
| aural | 用于语音和音频合成器。 |
| braille | 用于盲人用点字法触觉回馈设备。 |
| handheld | 用于小的手持的设备。 |
| 用于打印机。 | |
| projection | 投射媒体，比如幻灯片。 |
| screen | 用于电脑显示器。 |
| tty | 用于使用固定密度字母栅格的媒体，比如电传打字机和终端。 |
| tv | 用于电视机类型的设备。 |
示例
@media 规则
@media 规则允许在相同样式表为不同媒体设置不同的样式。
在下面的例子告诉我们浏览器屏幕上显示一个14像素的Verdana字体样式。但是如果页面打印，将是10个像素的Times字体。请注意，font-weight在屏幕上和纸上设置为粗体：
<html>
<head>
<style>
@media screen
{
p.test {font-family:verdana,sans-serif;font-size:14px;}
}
@media print
{
p.test {font-family:times,serif;font-size:10px;}
}
@media screen,print
{
p.test {font-weight:bold;}
}
</style>
</head>
<body>
....
</body>
</html>
此文章本站原创，地址 https://www.vxzsk.com/589.html
转载请注明出处！谢谢！
感觉本站内容不错，读后有收获？小额赞助,鼓励网站分享出更好的教程