当前位置: 首页 > 网络学院 > 网页制作基础教程 > CSS > CSS2 Media类型
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可以让你的文档在不同的媒介上有不同的呈现形式,它们可以是显示器、纸张、发声浏览器等等。
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 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"下面的段落会显示成另外种字体,而且比其余的字体都小。
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[移动] |
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[电视] |