当前位置: 首页 > 网络学院 > 网页制作基础教程 > CSS > CSS2 Media类型

CSS
CSS 介绍
CSS 语法
使用 CSS
CSS 背景
CSS 文字
CSS 字体
CSS 边框
CSS 边距
CSS 填充
CSS 列表
CSS 尺寸
CSS 类别
CSS 定位
CSS 伪类
CSS 伪元素
CSS2 Media类型
CSS 摘要
CSS 实例
CSS2 参考资料
CSS2 打印

CSS 中的 CSS2 Media类型


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-03-01   浏览: 722 ::
收藏到网摘: n/a

Media Types allow you to specify how documents will be presented in different media. The document can be displayed differently on the screen, on the paper, with an aural browser, etc. 
Media Type可以让你的文档在不同的媒介上有不同的呈现形式,它们可以是显示器、纸张、发声浏览器等等。


Media Types
媒介类型

Some CSS properties are only designed for a certain media. For example the "voice-family" property is designed for aural user agents. Some other properties can be used for different media types. For example, the "font-size" property can be used for both screen and print media, but perhaps with different values. A document usually needs a larger font-size on a screen than on paper, and sans-serif fonts are easier to read on the screen, while serif fonts are easier to read on paper.
一些CSS属性只为某些媒介所设计。举例来说 "voice-family"属性就是为那些只能用听的用户(盲人)设计的。一些其他的属性可以使用在不同的媒介上,但可能得用不同的值(标准不一)。举例来说"font-size"属性既可在显示屏上也可以在打印媒体上使用,但或许得用不同的值。文档一般在显示屏上需要的字体要大于纸上,sans-serif 字体在显示屏幕上容易阅读,然而纸上使用seri字体更好些。


The @media Rule
@media 规则

The @media rule allows different style rules for different media in the same style sheet.
@media规则允许在同一样式表中为不同的媒介使用不同的样式规则

The style in the example below tells the browser to display a 14 pixels Verdana font on the screen. But if the page is printed, it will be in a 10 pixels Times font. Notice that the font-weight is set to bold, both on screen and on paper:
下面例子中的样式告诉浏览器在显示屏幕上使用14象素Verdana字体,但在打印时字体就变为10象素的Times。注意下,不管是在显示屏幕上还是在纸上字体都加粗:

<html>
<head>
<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>
....
</body>
</html>

See it yourself ! If you are using Mozilla/Firefox or IE 5+ and print this page, you will see that the paragraph under "Media Types" will be displayed in another font, and have a smaller font size than the rest of the text.
你自己来见证一下!如果你使用了Mozilla/Firefox 或 IE 5+的浏览器并打印这张页面,你就会看见在"Media Types"下面的段落会显示成另外种字体,而且比其余的字体都小。


Different Media Types
不同的媒介类型

Note: The media type names are not case-sensitive.
注意:媒体类型名称不区分大小写

Media Type 描述
all Used for all media type devices
可用在所有媒介设备上
aural Used for speech and sound synthesizers[发音]
braille Used for braille tactile feedback devices[触觉]
embossed Used for paged braille printers[盲人专用打印机]
handheld Used for small or handheld devices[移动]
print Used for printers[普通打印]
projection Used for projected presentations, like slides[幻灯片]
screen Used for computer screens[屏幕]
tty Used for media using a fixed-pitch character grid, like teletypes and terminals[电报]
tv Used for television-type devices[电视]

评论 (0) All

登陆 | 还没注册?