ÍøÂçѧԺ w3popÉçÇø ÍøÂç×ÊÔ´ ITÐÂÎÅ

w3pop.com :: ÍøÂçѧԺ :: CSS :: CSS2 MediaÀàÐÍ

»áÔ±µÇ½

ÕʺÅ

ÃÜÂë

»Ø´ð

¼ÇסÃÜÂë

Íü¼ÇÃÜÂë? ×¢²á

CSS
CSS2 Aural
CSS µ¥Î»
CSS ÑÕÉ«
CSS ÑÕɫֵ
CSS ÑÕÉ«Ãû³Æ
CSS ±àÂëÓë×éÖ¯¼¼..
CSS Ä£¿é»¯Éè¼ÆË¼..
CSSÍêÃÀ¼æÈÝIE6/I..
CSS @ Ten: ÏÂÒ»¸..

CSS2 MediaÀàÐÍ


×÷Õß:w3pop.com ·­Òë/ÕûÀí:w3pop.com ·¢²¼:2007-04-28 ä¯ÀÀ:5216 :: ::

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ÊôÐÔֻΪijЩý½éËùÉè¼Æ¡£¾ÙÀýÀ´Ëµ "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[µçÊÓ]

ÆÀÂÛ (2) 1 All