- 第1节:CSS 简介
- 第2节:CSS 语法
- 第3节:CSS Id 和 Class选择器
- 第4节:CSS 创建
- 第5节:CSS Backgrounds (背景)
- 第6节:CSS Text(文本)
- 第7节:CSS Fonts (字体)
- 第8节:CSS 链接样式
- 第9节:CSS 列表样式 (ul)
- 第10节:CSS Table (表格)
- 第11节:CSS Box Model (盒子模型)
- 第12节:CSS Border (边框)
- 第13节:CSS 轮廓(outline)属性
- 第14节:CSS Margin(外边距)
- 第15节:CSS Padding(填充)
- 第16节:CSS 分组和嵌套
- 第17节:CSS 尺寸 (Dimension)
- 第18节:CSS Display (显示) 与 Visibility(可见性)
- 第19节:CSS Positioning (定位)
- 第20节:CSS Float(浮动)
- 第21节:CSS 水平对齐 (Horizontal Align)
- 第22节:CSS 组合选择符
- 第23节:CSS 伪类
- 第24节:CSS 伪元素
- 第25节:CSS 导航栏
- 第26节:CSS 下拉菜单
- 第27节:CSS 图像透明/不透明
- 第28节:CSS 图像拼合技术
- 第29节:CSS 媒体类型
- 第30节:CSS 属性选择器
CSS 媒体类型
CSS 媒体类型
媒体类型允许你指定文件将如何在不同媒体呈现。该文件可以以不同的方式显示在屏幕上,在纸张上,或听觉浏览器等等。
媒体类型
某些 CSS 属性仅仅被设计为针对某些媒介。比方说 voice-family
属性被设计为针对听觉用户终端。其他一些属性可用于不同的媒体类型。例如,font-size
属性可用于屏幕和印刷媒体,但有不同的值。屏幕和纸上的文件不同,通常需要一个更大的字体,sans - serif
字体比较适合在屏幕上阅读,而 serif 字体更容易在纸上阅读。
@media 规则
@media 规则允许在相同样式表为不同媒体设置不同的样式。
在下面的例子告诉我们浏览器屏幕上显示一个14像素的 Verdana 字体样式。但是如果页面打印,将是10个像素的 Times 字体。请注意,font-weight
在屏幕上和纸上设置为粗体:
<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>
你可以自己尝试看看 ! 如果您使用的是 Mozilla / Firefox 或 IE5+打印此页,你会看到,Media Types
将使用另一种比其他文本字体大小小点的字体显示。
提示:有关 @media 规则的更多信息,请参考CSS参考手册的CSS @media 查询部分。
其他媒体类型
注意:媒体类型名称不区分大小写。
扩展阅读
CSS3教程:CSS3 多媒体查询