media属性和媒体类型
一、media属性
当设定样式的时候,可以指定此样式应用于何种媒体,例如:
<link rel="stylesheet" href="basic.css" type="text/css" media="screen" />
media属性为可选属性,用于指定应用此样式表的介质或媒体。允许的值有:
- screen (缺省值),用于文档在屏幕媒体的呈现,如电脑显示器,所有 web 浏览器都运行于这样的系统屏幕媒体用户代理;
- print, 应用于不透明的页面材料,以及文档在打印预览的状态。;
- projection,应用于投影演示,例如投影仪或打印到透明胶片;
- speech, 应用于屏幕阅读器等发声设备;
- braille,应用于盲文触摸式反馈设备;
- embossed,用于打印的盲人印刷设 备;
- handheld,用于手持设备,如个人数码助理或可上网的手机;
- tty,应用于使用固定字符宽栅格的媒介,如 电传,终端,或显示能力有限的手提设备;
- tv,应用于电视类型的设备(低分辨率,彩色,屏幕滚动能力有限,有声音);
- all, 所有输出设备。
注意:媒体类型名是大小写敏感的。
目前的 web 浏览器支持最广的是all、screen和 print。
可以针对不同的媒体类型设定不同的CSS文件,例如针对打印机设定打印用的CSS:
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
如果要指定多个媒体,则关键字之间用英文逗号“,”隔开,例如:
<link rel="stylesheet" href="basic.css" type="text/css" media="screen, print" />
某些CSS属性只能在特定的媒体类型内使用,例如“’page-break-before’”只能在打印机这种可以分页的媒体设备上使用。而属性的 某些值在不同的媒体设备上表现可能不同,例如“font-size”设定字体的大小,在计算机显示器和打印机上有可能大小并不一样。
二、媒体类型
制作者可以决定在不同的媒体上文档应该如何呈现:屏幕上,纸面上,语音合成器或者盲文设备,等等。
某些CSS属性是只为特定的媒体而设计,如cue-before属性是为语音用户端设计的。
有时候不同媒体类型的样式表可以共享一个属性,不过对于这个属性可能要赋予不同的值。
例如,字体尺寸font-size属性用于屏幕和打印媒体。不过这两个媒体差别很大,因此对于共同的属性需要不同的值——在计算机屏幕上的文档一般 要用比纸面上的文档大一些的字体。
再例如,屏幕上无衬线字体要容易阅读一些,而在纸面上有衬线的字体要容易阅读一些。基于这些原因,有必要声明一个样式表(或样式表中的一段)适用于 特定的媒体类型。
1.指定媒体相关的样式表
目前有两个方法来指定样式表的媒体相关性:
1)在样式表中通过“@media”规则或“@import”规则来指定目标媒体。
例如:
@import url("loudvoice.css") aural;
@media print { 一些样式规则 }
一个“@media”规则以一系列规则(以花括号分割)来指定目标媒体类型(以逗号分割)。@media结构允许不同媒体的样式规则存在于同一样式 表中:
@media print {
body { font-size: 10pt }
}
@media screen {
body { font-size: 12pt }
}
@media screen, print {
body { line-height: 1.2 }
}
2) 在文档语言中指定目标媒体。
使用link的“media”属性指定一个外部样式表的目标媒体。
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
<link rel="stylesheet" href="basic.css" type="text/css" media="screen, print" />
2.媒体组
虽然有的CSS属性只能在某个类型的媒体中使用,但是多数的CSS属性通常可以适用于若干个媒体,因此在对CSS属性详细介绍的定义列表中,有“媒 体”一项,其中列出的是媒体组而不是单一的媒体类型。每一个属性适用于这个媒体组中包含的所有媒体类型。
CSS 2.1有如下几种分组方式:
- 连续媒体(continuous,例如显示器)或页面媒体(paged,例如打印机);
- 视觉(visual)、音频 (audio)、语音(speech)或触觉(tactile);
- 栅格(grid,字符栅格设备)或者位图(bitmap);
- 交 互(interactive,对于允许用户交互的设备)或静态(static,不支持交互的设备)。
- 包含所有的媒体类型(all)。
以上几种不同分类方式的媒体组,其包含的媒体类型如下表所示。
媒体类型 | 媒体组 | |||
---|---|---|---|---|
连续/页面 | 视觉/音频/语音/触觉 | 栅格/位图 | 交互/静态 | |
braille | 连续 | 触觉 | 栅格 | 两者全是 |
embossed | 页面 | 触觉 | 栅格 | 静态 |
handheld | 两者全是 | 视觉,音频,语音 | 两者全是 | 两者全是 |
页面 | 视觉 | 位图 | 静态 | |
projection | 页面 | 视觉 | 位图 | 交互 |
screen | 连续 | 视觉,音频 | 位图 | 两者全是 |
speech | 连续 | 语音 | 不适用 | 两者全是 |
tty | 连续 | 视觉 | 栅格 | 两者全是 |
tv | 两者全是 | 视觉,音频 | 位图 | 两者全是 |
媒体类型 | 媒体组 |
例如对字体样式(font-style)属性的定义列表如下:
语法:font-style : normal | italic | oblique | inherit
说明:…………
初始值:normal
继承性:继承
适用于:所有元素
媒体:视觉
计算值:同指定值
其中“媒体:视觉”一项,表示其可以实用于表3-1中属于“视觉”媒体组的那些媒体类型,如 “screen”和“print”等。
原文:http://www.ddcat.net/blog/?p=1291
media属性和媒体类型相关推荐
- Media Foundation——媒体类型(1)
Media Foundaton对象的属性和特性 每一个对象上的数据,都可通过"属性(Attributes)"和"特性(Properties)"来设置.描述.属性 ...
- 教你玩转CSS 媒体类型
目录 CSS 媒体类型 媒体类型 @media 规则 其他媒体类型 CSS 媒体类型 媒体类型允许你指定文件将如何在不同媒体呈现.该文件可以以不同的方式显示在屏幕上,在纸张上,或听觉浏览器等等. 媒体 ...
- 样式link属性media用法--媒体类型查询
引用外部样式使用link 你可能想针对将要显示页面的设备类型(桌面PC.笔记本电脑.平板电脑.手机或者甚至页面的印刷版本)来调整页面的样式,可以利用一个media属性, 在<link>元素 ...
- CSS-0816盒模型 标准盒模型怪异盒模型及其应用背景属性补充小图标使用图标网站可变化单位meta元信息浏览器内核(渲染机制)响应式页面 媒体类型媒体特性opacity和背景色设置透明的区别
title: "CSS 0816" date: 2022-08-16T11:18:25+08:00 文章目录 title: "CSS 0816" date: 2 ...
- CSS基础之媒体类型(@media)样式
定义 使用 @media,可以针对不同的媒体类型定义不同的样式. 使用 @media, 可以针对不同的屏幕尺寸设置不同的样式 当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面. ...
- 媒体类型@media
媒体类型允许你指定文件将如何在不同媒体呈现.该文件可以以不同的方式显示在屏幕上,在纸张上,或听觉浏览器等等. @media 规则允许在相同样式表为不同媒体设置不同的样式. 浏览器屏幕上显示一个14像素 ...
- Media Type 媒体类型(MIME Type、Content Type)
媒体类型用于声明随之而来的数据的格式.又称:MIME类型.MIME Type.Content Type. 是一种用于在异构系统.分布式网络之间声明并传递信息主体格式的方法. 一般的,在文件系统中,我们 ...
- java mediatype属性_基于ServletRequest实现请求获取内容类型的媒体类型MediaType、字符集Charset的工具类ContentTypeUtil...
一.源码说明 基于springframework的org.springframework.http.MediaType通过ServletRequest对象分别获取到媒体类型.字符集类型,具体工具类Co ...
- CSS中属性个属性值怎么区分,[CSS] 详细解释 @media 属性与 (max
前言 现在 HTML5/CSS3 很流行罢,也是未来时代的趋势.在 HTML5 带来的许多实用功能之后,CSS3也同带来了一些牛逼哄哄的功能呢. 动画 animation 转化 transform 过 ...
最新文章
- Kubernetes:标签、选择器、注解、容忍度、亲和性
- 前端学习(2531):Vuex中getter
- 【AI视野·今日CV 计算机视觉论文速览 第242期】Mon, 14 Feb 2022
- linux下日志文件的查找(tail和grep)
- python编程遍历_Python字典遍历操作实例小结
- 分析师:网易游戏占营收91% 已成游戏公司
- 查找php超时原因_php环境搭建(正确配置nginx和php)
- adobe官方卸载工具:Creative Cloud Cleaner Tool Mac版
- django系列9 --- 迁移相关
- 自动删除QQ空间指定好友的留言
- 贪吃蛇小游戏制作(4)
- 玉米社:软文营销推广_文案内容撰写需要注意哪些问题?
- PD3.1 140W双C快充解决方案
- 连接计算机名提示输入网络凭据,Win10访问局域网共享文件时提示输入网络凭据如何解决...
- 关于我所上传资源的相关问题
- 荐读:Xilinx ZYNQ 动手实操演练
- 国际直线对撞机计划陷入僵局
- python基础语法学习历程5
- Android视频播放器横竖屏切换时遇到的问题记录
- python自动安装windows软件_python模块 - pywinauto(windows自动化安装软件)
热门文章
- 驱动程序(10) Windriver实现DMA传输时分配超大内存Buffer的办法
- 离散度计算公式 python_SciPyTutorial-离散卷积convolve
- 基于PIC16F876A的摇摇棒
- 操作系统学习笔记——北京大学陈向群老师课后及习题答案(6)
- 小学妹问我【CodeBlocks提示no such file or directory】怎么解决【巧妙篇】
- 2022制冷与空调设备安装修理考试模拟100题及在线模拟考试
- java开发按键精灵_Java 按键精灵
- 如何调出计算机软件数据,如何在计算机上打开dat文件(快速生成DAT格式的数据)...
- 吃透Java基础一:Java访问权限修饰符
- python 月报_Python学习经验分享