小白教程
所有教程
关于
Search
172.69.59.72
172.69.59.72
参数设置
贡献
退出
操作
编辑
移动
保护
信息
历史
删除
查看“CSS 媒体类型”的源代码
本页内容
上一节:
CSS_图像拼合技术
下一节:
CSS_属性选择器
因为以下原因,您没有权限编辑本页:
您请求的操作仅限属于该用户组的用户执行:
用户
您可以查看和复制此页面的源代码。
{{DISPLAYTITLE:CSS 媒体类型}}[[Category:CSS 教程|33]] = CSS 媒体类型 = 媒体类型允许你指定文件将如何在不同媒体呈现。该文件可以以不同的方式显示在屏幕上,在纸张上,或听觉浏览器等等。 == 媒体类型 == 一些 CSS 属性只设计了某些媒体。例如 '''voice-family''' 属性是专为听觉用户代理。其他一些属性可用于不同的媒体类型。例如, '''font-size''' 属性可用于屏幕和印刷媒体,但有不同的值。屏幕和纸上的文件不同,通常需要一个更大的字体,'''sans-serif''' 字体比较适合在屏幕上阅读,而 '''serif''' 字体更容易在纸上阅读。 == @media 规则 == @media 规则允许在相同样式表为不同媒体设置不同的样式。 在下面的例子告诉我们浏览器屏幕上显示一个 14 像素的 Verdana 字体样式。但是如果页面打印,将是 10 个像素的 Times 字体。请注意,font-weight 在屏幕上和纸上设置为粗体: <sample title="" desc="" lang="html" hererun="1"> @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;} } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <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> <p class="test">小白教程 -- 学习使人快乐!!!</p> </body> </html> </run> '''你可以自己尝试看看 !''' 如果您使用的是 '''Mozilla / Firefox''' 或 IE5+ 打印此页,你会看到,媒体类型将使用另一种比其他文本字体大小小点的字体显示。 == 其他媒体类型 == '''注意:'''媒体类型名称不区分大小写。 {| class="table table-striped table-hover" ! 媒体类型 ! 描述 |- | all | 用于所有的媒体设备。 |- | aural | 用于语音和音频合成器。 |- | braille | 用于盲人用点字法触觉回馈设备。 |- | embossed | 用于分页的盲人用点字法打印机。 |- | handheld | 用于小的手持的设备。 |- | print | 用于打印机。 |- | projection | 用于方案展示,比如幻灯片。 |- | screen | 用于电脑显示器。 |- | tty | 用于使用固定密度字母栅格的媒体,比如电传打字机和终端。 |- | tv | 用于电视机类型的设备。 |}
返回至“
CSS 媒体类型
”。
上一节:
CSS_图像拼合技术
下一节:
CSS_属性选择器