Правило @media
Данное правило позволяет задать различные правила стилей для различных носителей информации в одной таблице стилей.
Стиль в следующем далее примере определяет для браузера вывод на экране шрифтом Times размером 30 пикселей. Но если страница будет печататься, то это будет сделано шрифтом Verdana размером 8 пикселей Отметим, что степень жирности шрифта задана normal, как на экране, так и на бумаге:
<html> <head> <style> @media screen { div.test {font-family: times,serif; font-size:8px} }
@media print { div.test {font-family: verdana,sans-serif; font-size:30px} } @media screen,print { div.test {font-weight:normal} } </style> </head> <body> ... </body> </html>
Различные типы носителей информации
Замечание: Имена типов носителей информации не зависят от регистра символов.
all | Используется для всех типов устройств носителей информации |
aural | Используется для синтезаторов речи и звука |
braille | Используется для устройств чтения азбуки Брайля для слепых |
embossed | Используется для устройств печати азбуки Брайля для слепых |
handheld | Используется для маленьких или карманных устройств |
Используется для принтеров | |
projection | Используется для проецируемых изображений, таких как слайды |
screen | Используется для экранов компьютера |
tty | Используется для носителей информации, использующих шрифтовую сетку с фиксированным шагом, таким как телетайп и экранный терминал |
tv | Используется для устройств телевизионного типа |
Типы носителей информации
- Некоторые параметры CSS предназначены только для определенных носителей информации. (Например, параметр "voice-family" создан для звуковых агентов пользователей.)Некоторые другие параметры можно использовать для различных типов носителей информации. (Например, параметр "font-size" можно использовать для экрана монитора и для печати на бумаге, но, возможно, с различными значениями.)
Что касается шрифтов, то документу обычно требуется на экране шрифт большего размера, чем на бумаге. Шрифты sans-serif легче читать на экране, а шрифты serif на бумаге.