媒介类型
媒介类型(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 用于电视机类型的设备。
分享到:
相关推荐
**CSS3 Media Queries详解** CSS3 Media Queries是Web开发中的一个重要工具,它允许开发者根据设备的物理特性,如视口宽度、设备像素比等,来应用不同的样式规则。这一功能使得响应式网页设计成为可能,使得网站能...
文档树首先被创建,随后标识媒体类型(如屏幕显示或打印),检索相应媒体类型的样式表,并将值分配给文档树中的所有属性,最终生成一个格式化结构,并在目标媒介上渲染出来。 9. CSS的优点:使用CSS的主要优点是它...
在上面的代码中,`screen`指定了媒介类型,表示这是针对屏幕显示的样式,而`max-width: 1300px`则是查询条件,意味着只有当屏幕宽度小于或等于1300像素时,该样式才会生效。在某些情况下,可以省略`screen`,因为...
`only screen`表示这些样式规则仅应用于屏幕显示(例如计算机显示器、平板电脑、智能手机等),而不是打印或听觉媒介。 #### 2.3 `min-width` 和 `max-width` - `min-width: 100px` 表示最小宽度为100像素。 - `max...
1. **选择器增强**:CSS2.0引入了更多的选择器类型,如类选择器(.class)、ID选择器(#id)、属性选择器([attribute])和伪类(:hover、:active、:link)。这些选择器允许更加精细地定位和操作网页元素。 2. **盒...
- **媒介类型定义**:介绍CSS2中的媒介类型及其含义。 - **应用场景**:列举媒介类型在实际项目中的应用示例。 - **6.8 CSS注意事项** - **最佳实践**:提供CSS编码时应遵循的最佳实践建议。 - **常见错误**:...
打印媒体类型(print)则专门用于定义页面打印时的样式。 二、媒体查询与打印 通过@media print语句,我们可以为打印场景定制样式。例如,隐藏某些仅在屏幕上显示的元素,调整布局适应纸质媒介,或者优化文字的...
媒体查询是指通过不同的媒介类型和条件定义样式表规则,以达到响应式布局的效果。 非标准字体 如果设计中使用了非标准的字体,可以使用图片代替、web fonts 在线字库、@font-face 等方法来实现。 动画实现方法 ...
5. `aural`:已废弃,但原本用于定义声音媒介,如屏幕阅读器。 6. 自定义媒体查询:例如`media="(min-width: 768px)"`,定义当浏览器宽度至少为768像素时应用的样式。 使用`media`属性的一个常见场景是创建响应式...
6. `@media`:根据不同的设备媒介类型应用相应的CSS规则,实现响应式设计。 7. `@page`:定义打印样式表中的页面布局和边距。 DOM(文档对象模型)是HTML和XML文档的编程接口,它将文档结构转换成树形结构,方便...
与style.css不同,print.css关注的是如何优化网页内容在纸张上的显示,例如去除不必要的背景色、调整文字大小以适应打印媒介,并确保重要信息在打印版中清晰可见。 3. **index.html**: 这是HTML(HyperText Markup ...
针对不同媒介(如屏幕和打印)使用不同的CSS样式表 - **重要性**:根据不同媒介的需求设置相应的样式,可以提高用户体验和页面的适应性。 - **示例代码**: ```html <link type="text/css" rel="stylesheet" ...
②用于为不同的媒介类型规定不同的样式。 语法: @media 设备名 only (选取条件) not (选取条件) and(设备选取条件),设备二{sRules} 实例: /* 这是匹配横屏的状态,横屏时的css代码 */ @media all and ...
**4.5 CSS媒介类型** - **媒介查询**:`@media`规则可以根据不同的媒介类型(如屏幕、打印等)应用不同的样式。 #### 五、CSS实例参考 - **实例展示**:通过具体示例展示了如何使用各种CSS属性和技术来实现不同的...
在网页设计中,图像可以增强用户体验,提供视觉吸引力,或者作为信息传递的媒介。开发者需要考虑图像的大小、格式和优化,以确保快速加载和良好的用户体验。 最后,`images` 文件夹通常包含多个图像文件,用于整个...
- **CSS2**:1999年发布,增加了对媒介(如打印机和屏幕阅读器)的支持,以及可下载字体等功能。 - **CSS3**:自2001年开始,将CSS拆分为多个模块,引入更多样式和布局技术,如媒体查询、动画、过渡和网格布局等。 ...
3. **可选媒介类型** `media`属性允许我们指定样式表应用于何种媒介,如屏幕、打印或辅助技术。通过创建针对打印的`print.css`,我们可以确保在打印时提供优化的布局和色彩。同时,通过避免在打印样式表中重复布局...