`

八.CSS媒介类型

 
阅读更多

媒介类型
媒介类型(Media Types)允许你定义以何种媒介来提交文档。文档可以被显示在显示器、纸媒介或者听觉浏览器等等。
媒介类型:某些 CSS 属性仅仅被设计为针对某些媒介。
比方说 "voice-family" 属性被设计为针对听觉用户终端。其他的属性可被用于不同的媒介。
例如,"font-size" 属性可被用于显示器以及印刷媒介,但是也许会带有不同的值。
显示器上面的显示的文档通常会需要比纸媒介文档更大的字号,
同时,在显示器上,sans-serif 字体更易阅读,而在纸媒介上,serif 字体更易阅读。

@media规则
下面这个例子中的样式告知浏览器在显示器上显示 14 像素的 Verdana 字体。
但是假如页面需要被打印,将使用 10 个像素的 Times 字体。
注意:font-weight 被设置为粗体,不论显示器还是纸媒介:
@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} }

不同的媒介类型
注释:媒介类型名称对大小写不敏感。
媒介类型                        描述
all         用于所有的媒介设备。
aural       用于语音和音频合成器。
braille     用于盲人用点字法触觉回馈设备。
embossed    用于分页的盲人用点字法打印机。
handheld    用于小的手持的设备。
print       用于打印机。
projection  用于方案展示,比如幻灯片。
screen      用于电脑显示器。
tty         用于使用固定密度字母栅格的媒介,比如电传打字机和终端。
tv          用于电视机类型的设备。

分享到:
评论

相关推荐

    CSS 屏幕大小自适应的实现示例

     ②用于为不同的媒介类型规定不同的样式。 语法:  @media 设备名 only (选取条件) not (选取条件) and(设备选取条件),设备二{sRules} 实例: /* 这是匹配横屏的状态,横屏时的css代码 */ @media all and ...

    全面解析CSS Media媒体查询使用操作(推荐)

    媒介类型  在CSS2中,媒体查询只使用于<style>和<link>标签中,以media属性存在  media属性用于为不同的媒介类型规定不同的样式 screen 计算机屏幕(默认值)  tty 电传打字机以及使用等宽字符网格...

    css3学习心得分享

    css3实现了很多以前需要用图片实现的效果(渐变边框,盒阴影,真正的圆角,字阴影,多图片背景,字体透明度等) 还统一了部分标准样式(text-overflow,word-wrap...通过media属性CSS可以更精确作用于不同的媒介类型 几

    CSS中的指定值、初始值和计算值学习教程

    CSS 中的声明,由 CSS 的特性和值,中间以 ":" 隔开组成。...当浏览器解析了一个文档 ( document ) 并且生成了文档树 ( document tree ),那么,它必须为文档树中的每一个元素,根据目标媒介类型所适用

    详解CSS3中@media的实际使用

    此特性让CSS可以更精确作用于不同的媒介类型,同一媒介的不同条件(分辨率、色数等等). 复制代码代码如下:media_query: [only | not]? <media> [ and <expression> ]*expression: ( <media> [: ]? )media_...

    详解CSS(层叠样式表)渐进增强

    有多种方式可以将渐进增强融入到层叠样式表(Cascading Style Sheets, 简称CSS)的工作中,本文将...还有一个好处很少提及:有助于在目标媒介类型(译注:指计算机、打印机、电视、手机等各种媒介类型)上获取更一

    pc屏幕分辨率.7z

    媒体查询(Media Query)是CSS3新语法。 - 使用 @media查询,可以针对不同的媒体类型定义不同的样式 - @media 可以针对不同的屏幕尺寸设置不同的样式 - 当你重置浏览器大小的过程中,页面也会根据浏览器的宽度...

    网站优化方案设计.doc

    5 2、目标受众心理与行为分析 6 (三)市场地位分析 6 1、网站类型 6 2、所属行业 6 3、行业市场规模与现状 6 4、市场地位 7 (四)行业竞争对手分析 8 1、行业竞争对手定位 8 2、行业竞争对手市场地位 8 3、行业...

    office在线查看

    style type="text/css" media="screen"> html, body { height:100%; } body { margin:0; padding:0; overflow:auto; } #flashContent { display:none; } </style> [removed][removed] </head...

    rar压缩软件.rar

    可以 WinRAR,它支持更多的压缩文件类型,包括 RAR 和 ZIP 格式。 WinRAR 提供了图形用户界面和命令行模式。虽然控制台 RAR 和图形界面 WinRAR 有相似的命令行语法,但是它们还有有一些不同。所以推荐使用此 ...

    lasreklame:创建此存储库仅用于存储CSS和Javascript文件

    即,以安装在建筑物,各个街道拐角处或其他媒介中的广告牌的形式采购促销媒体,这些媒介包括车辆等移动物体。 目的是推广产品,服务,名称,机构,协会,以便更广泛的社区可以看到和认可它。 Las Reklame接受各种...

    深度学习(asp)网址导航系统 3.1.2(最新更新完美版)

    1.3 您可以在本协议规定的约束和限制范围内通过任何的媒介和渠道复制与分发本软件的源代码的副本(要求是逐字拷贝的副本)。 1.4 您拥有使用本软件构建的网站全部内容所有权,并独立承担与这些内容的相关法律义务。 ...

    asp.net知识库

    泛型技巧系列:如何提供类型参数之间的转换 C#2.0 - Object Pool 简单实现 Attributes in C# 手痒痒,也来个c# 2.0 object pool 泛型技巧系列:用泛型打造可复用的抽象工厂 体验.net2.0的优雅(四):Provider、策略...

    XML高级编程

    不管我们使用的是CSS还是XSL,我们将样式单中的数据应用到XML文档中的数据上,以产生适合人们阅读的可视化显示。第8章(链接和查询)将以此为线索开始。这是因为查询技术的一个子集允许编程者指定一个标准集,用来...

Global site tag (gtag.js) - Google Analytics