Медиа типы CSS


назад вперед

Медиа типы позволяют вам указать то, как будет отображаться ваш документ на различных устройствах. Можно задать разный стиль для отображения документа на мониторе, при печати, в голосовых браузерах и т.д.


Медиа типы

Некоторые свойства CSS созданы под определенные устройства отображения веб-страниц. Например, свойство "voice-family" создано для использования в голосовых браузерах. Некоторые свойства можно использовать для разлычных устройств. Например, свойство "font-size" можно использовать как для монитора, так и для вывода документа на печать. Документ обычно имеет больший шрифт на мониторе, чем на бумаге, кроме того шрифты sans-serif лучше читаются с экрана, а для печати лучше подходят шрифты serif.


Правило @media

Правило @media позволяет нам назначать различные стили для разных устройств в пределах одной таблицы стилей.

Следующий css-код указывает браузеру, что он должен отображать текст на мониторе размером 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>


Различные медиа типы

Заметка: названия медиа типов не чувствительны к регистру.

Название Описание
all Все типы устройств и программ
aural Голосовые браузеры
braille Устройства со шрифтом Брайля
embossed Принтеры со шрифтом Брайля
handheld Мобильные устройства и КПК
print Принтеры
projection Проекторы и слайдеры
screen Мониторы
tty Телетайпы
tv Устройства телевизионного типа


Поисковой портал Jooble - позволяет в один клик найти любую интересующую вакансию по всему интернету.

Понравилась запись? Сказать "Спасибо" очень просто, поделитесь записью в социальных сетях!


назад вперед

СТАТИСТИКА



ССЫЛКИ


Подпишись на новости сайта