Русский
Русский
English
Теги HTML
Атрибуты тегов
Статистика
Реклама

Атрибут media

Браузер
Internet Explorer
Chrome
Opera
Safari
Firefox
Версия
6.0
7.0
8.0
9.0
2.0
3.0
4.0
5.0
9.2
9.6
10
10.5
2.0
3.1
4.0
5.0
2.0
3.0
3.6
4.0
Поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Краткая информация
HTML: 3.2 4.01 5.0
XHTML: 1.0 1.1  
Описание
Устанавливает устройство вывода, для которого предназначена таблица стилей. Для каждого устройства — от карманного компьютера до принтера можно определить свою собственный стиль, который бы учитывал специфику устройства и подгонял под него вид веб-страницы.
Синтаксис
<link media="all|braille|handheld|print|screen|speech|projection|tty|tv">
Значения
all - Все устройства.
braille - Устройства, основанные на системе Брайля, предназначены для слепых людей.
handheld - Наладонники, смартфоны, устройства с малой шириной экрана.
print - Печатающее устройство вроде принтера.
screen - Экран монитора.
speech - Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда же входят речевые браузеры.
projection - Проектор.
tty - Телетайпы, терминалы, портативные устройства с ограниченными возможностями экрана.
tv - Телевизор.
Можно устанавливать сразу несколько значений, перечисляя их через запятую.
Значение по умолчанию
screen
Пример. Стили для разных устройств вывода

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Тег STYLE, параметр media</title>
<style type="text/css" media="screen">
.window {
background: #333;
border: 1px solid red;
font-size: 90%;
color: #fc0;
padding: 10px;
}
</style>
<style
type="text/css" media="print">
.window {
border: 1px solid black;
font-family: Arial;
font-size: 90%;
font-weight: bold;
color: black;
padding: 10px;
}
</style>
</head>
<body>
 <div class="window"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. </div>
</body>
</html>

Демонстрация примера
Результат данного примера продемонстрирован на рис. 1, где применяется стиль с параметром media="screen". На рис. 2 показана та же страница, но при этом уже действует стиль для печати, заданный параметром media="print". Результат эмулирован, поскольку стиль будет действовать только при отправке веб-страницы на печать.
Рис. 1. Страница со стилем для просмотра на мониторе
Рис. 2. Страница со стилем для вывода на печать
Первоисточник - htmlbook.ru Автор - Влад Мержевич
Комментариев (-)
Имя
Электронная почта

Последние комментарии

© 2006-2024, heroes-3.ru