Отдельные блоки для разных типов носителей также могут быть вынесены непосредственно в html-код, тогда это выглядит так:
<style type="text/css"> @media print { div {overflow:visible; }}</style>
Типы носителей и их описание
Широкое развитие различных платформ и устройств заставляет разработчиков делать под них специальные версии сайтов, что достаточно трудоемко и проблематично. Вместе с тем, времена и потребности меняются, и создание сайта для различных устройств является неизбежным и необходимым звеном его развития. С учетом этого в CSS введено понятие типа носителя, когда стиль применяется только для определенного приспособления. В таблице перечислены некоторые основные типы носителей.
Тип
Описание
all
Все типы. Это значение используется по умолчанию.
aural
Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда, например, можно отнести речевые браузеры.
braille
Устройства, основанные на системе Брайля, которые предназначены для слепых людей.
handheld
Наладонные компьютеры и аналогичные им аппараты.
print
Печатающие устройства вроде принтера.
projection
Проектор.
screen
Экран монитора.
tv
Телевизор.
Импорт файла стилей
В CSS для указания типа носителей применяются команды @import и @media, с помощью которых можно определить определенный стиль для элементов в зависимости от того, выводится документ на экран или на принтер.
При импортировании стиля через команду @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:#000080; /* Цвет текста */}
H1 {background:#faf0e6; /* Цвет текста */border:2px dashed maroon; /* Рамка вокруг заголовка */color:#a0522d; /* Цвет текста */padding:7px; /* Поля вокруг текста */}
H2 {color:#556b2f; /* Цвет текста */margin: 0; /* Убираем отступы */}
P {margin-top: 0.5em; /* Отступ сверху */}}
@media print {/* Стиль для печати */
BODY {font-family: Times, serif; /* Шрифт с засечками */}
H1, H2, P {color: black; /* Черный цвет текста */}}</style></head><body><p>...</p></body></html>
В данном примере вводится два стиля — один для изменения вида элементов при их обычном отображении в браузере на экране компьютера, а второй — при выводе страницы на печать. При этом облик документа для разных носителей может сильно различаться между собой.
Просмотреть документ, у которого CSS установлен как тип print можно, если распечатать определенную страницу. Или пойти на хитрость и временно заменить слово print на screen, чтобы отобразить итог в браузере. Но тогда вы не увидите разных технологических штук, которые подстерегают вас при общении со специфическими настройками печати. Идеальным вариантом является печать в PDF или на картинку.
Команда @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>
В данном примере используются две таблицы связанных стилей, одна для отображения в браузере, а вторая — для печати документа и его просмотре на КПК. Хотя на страницу загружаются одновременно два разных стиля, применяются они только для определенных устройств.