关于媒体样式表简介

Posted 2020-10-09

　　对于CSS中的媒体样式表，之前看书的时候一带而过，今天在看Bootstrap书籍时，看到了有关知识点，在这里注意一下这个小细节。

　　媒体样式，就是通过设定使得文档应用于何种媒体“场合”。对于CSS中，通过media属性，可以设置文档的媒体样式。

　　media属性值如下：

• all                     默认属性值，用于所有媒体
• aural                用于语音合成器、屏幕阅读器和文档的其他声音表现
• braille              用Braille设备表现文档
• embossed       用Braille打印设备
• handheld         用于手持设备、如个人数字助理或支持Web的蜂窝电话
• print                 为视力正常的用户打印文档时使用，另外还会在显示文档的“打印预览”时使用
• projection        用于投影媒体，如发表演讲时显示幻灯片的数字投影仪
• screen             在屏幕媒体（如桌面计算机监视器）中表现文档时使用。在这种系统上运行的所有Web浏览器都是屏幕媒体用户代理
• tty                    在固定间距环境（如电传打字机）中显示文档时使用
• tv                     在电视上显示文档时使用

PS：Oh...以上内容只是保持笔记的完整性，好多东西都不知道是干嘛的，只能目前强行灌输。不过以上大部分媒体类型可能存在兼容性，应用最广泛的类型有：all,screen,print。

　　定义媒体类型可以运用在样式表（无论外链还是内嵌在htmlstyle样式中）,还可以利用@media块定义样式，下面进行一下演示：

　　1.在引用外部样式表文件时：

<link rel = "stylesheet" type = "text/css" media = "screen" href = "/libs/article-screen.css">

解释：利用link标签引入外部样式表，通过media属性指定该样式表应用在何种媒体类型中。该实例中的article-screen.css仅应用于屏幕媒体。当然，也可以对于一个样式表指定多个媒体类型，只需在media属性中以逗号分隔即可。

　　2.在HTML中的内嵌样式中：

<style type = "text/css" media = "screen">
    body{
      color:#ccc;
      font-family:sans-serif;    
    }
</style>

相信看后肯定会理解的。

　　3.利用@media定义，在同一个样式表中定义多个媒体定义样式

<style type = "text/css">
    @media screen{
        h1{
           font-family:serif;
           }
     }
    @media print{
        h1{
           font-family:sans-serif; 
       } 
    }
</style>

解释：以上表明在屏幕媒体中使用一种字体，在打印媒体中使用另一种字体。

注意：对于XML语言来说，其并没有media属性，因此必须使用@media块定义媒体类型！