Типы носителей
Широкое развитие
различных платформ и устройств заставляет разработчиков делать
под них специальные версии сайтов, что достаточно трудоемко
и проблематично. Вместе с тем, времена и потребности меняются,
и создание сайта для различных устройств является неизбежным
и необходимым звеном его развития. С учетом этого в CSS введено
понятие типа носителя, когда стиль применяется только для
определенного приспособления. В таблице перечислены некоторые
типы носителей.
| Тип |
Описание |
| all |
Все типы.
Это значение используется по умолчанию |
| aural |
Речевые
синтезаторы, а также программы для воспроизведения текста
вслух. Сюда, например, можно отнести речевые браузеры. |
| braille |
Устройства,
основанные на системе Брайля, которые предназначены
для слепых людей. |
| handheld |
Наладонные
компьютеры и аналогичные им аппараты. |
| print |
Печатающие
устройства вроде принтера. |
| projection |
Проектор. |
| screen |
Экран монитора. |
| tv |
Телевизор. |
В CSS для указания
типа носителей применяются команды @import и @media, с помощью
которых можно определить определенный стиль для элементов
в зависимости от того, выводится документ на экран или на
принтер.
Ключевые слова @media и @import относятся к эт-правилам. Такое
название произошло от наименования символа @ — «эт», с которого
и начинаются эти ключевые слова. В рунете для обозначения
символа @ применяется устоявшийся термин «собака». Только
вот использовать выражение «собачье правило» язык не поворачивается.
При импортировании
стиля через команду @import тип носителя указывается после
адреса файла. При этом допускается задавать сразу несколько
типов, упоминая их через запятую, как показано в примере
<!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>Импорт стиля</title>
<style type="text/css">
@import "/style/main.css" screen; /* Стиль для вывода
результата на монитор */
@import "/style/palm.css" handheld, print; /* Стиль
для печати */
</style>
</head>
<body>
<p>...</p>
</body>
</html>
В данном примере
импортируется два файла — main.css предназначен для изменения
вида документа при его просмотре на экране монитора, и palm.css
— при печати страницы и отображении на КПК.
Команда @media
позволяет указать тип носителя для таблицы глобальных или
связанных стилей и в общем случае имеет следующий синтаксис.
@media тип носителя 1 {
Описание стиля для типа носителя 1
}
@media тип носителя 2 {
Описание стиля для типа носителя 2
}
После ключевого
слова @media идет один или несколько типов носителя, перечисленных
в таблице, если их больше одного, то они разделяются между
собой запятой. После чего следуют обязательные фигурные скобки,
внутри которых идет обычное описание стилевых правил. В примере
показано, как задать разный стиль для печати и отображения
на мониторе.
<!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>Типы носителей</title>
<style type="text/css">
@media screen { /* Стиль для отображения в браузере */
BODY {
font-family: Arial, Verdana, sans-serif; /* Рубленый шрифт
*/
font-size: 90%; /* Размер шрифта */
color: navy /* Цвет текста */
}
H1 {
background: linen; /* Цвет текста */
border: 2px dashed maroon; /* Рамка вокруг заголовка */
color: sienna; /* Цвет текста */
padding: 7px /* Поля вокруг текста */
}
H2 {
color: darkolivegreen; /* Цвет текста */
margin: 0px /* Убираем отступы */
}
P {
margin-top: 0.5em /* Отступ сверху */
}
}
@media print { /* Стиль для печати */
BODY {
font-family: Times, 'Times New Roman', serif /* Шрифт с засечками
*/
}
H1, H2, P {
color: black /* Черный цвет текста */
}
}
</style>
</head>
<body>
<p>...</p>
</body>
</html>
В данном примере
вводится два стиля — один для изменения вида элементов при
их обычном отображении в браузере, а второй — при выводе страницы
на печать. Просмотреть документ, у которого CSS установлен
как тип print можно, если распечатать определенную страницу.
Или пойти на хитрость и временно заменить слово print на screen,
чтобы отобразить итог в браузере.
Команда @media
применяется в основном для формирования одного стилевого файла,
который разбит на блоки по типу устройств. Иногда же имеет
смысл создать несколько разных CSS-файлов — один для печати,
другой для отображения в браузере — и подключать их к документу
по мере необходимости. В подобном случае следует воспользоваться
тегом <LINK> с параметром media, значением которого
выступают все те же типы, перечисленные в таблице
В примере
показано, как создавать ссылки на CSS-файлы, которые предназначены
для разных типов носителей.
<!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>Разные носители</title>
<link media="print, handheld" rel="stylesheet"
href="print.css" type="text/css">
<link media="screen" rel="stylesheet"
href="main.css" type="text/css">
</head>
<body>
<p>...</p>
</body>
</html>
В данном примере
используются две таблицы связанных стилей, одна для отображения
в браузере, а вторая — для печати документа и его просмотре
на КПК. Хотя на страницу загружаются одновременно два разных
стиля, применяются они только для определенных устройств.
|
