Как применять разные типы таблиц стилей



Вам нужно предоставить таблицы стилей для разных типов устройств вывода информации (media type), таких как акустические (aural), печатные или переносные (handheld).
Создайте отдельные внешние таблицы стилей для разных устройств вывода и назовите их в соответствии с типом устройства, например print.css, screen.css, handheld.css. Затем для связывания с этими стилями используйте на Web-странице элемент link с типом устройства. Другой способ — применение правила @media.
Далее приведен текст файла print.css:
body {
font: 10pt Times, Georgia, serif; line-height: 120%;
}
Новый файл, названный screen.css:
body {
font: 12px verdana, arial, sans-serif; line-height: 120%;
Затем еще один файл, названный projection.css:
body { font: 14рх; line-height: 120%;
}
Далее на Web-странице сошлитесь на эти три файла, используя следующие строки в разделе head. У каждой ссылки свой тип устройства вывода:
clink rel="stylesheet" type="text/css" href="/css/print.css" media="print" />
clink rel="stylesheet" type="text/css" href="/css/screen.css" media="screen" />
clink rel="stylesheet" type="text/css" href="/css/projection.css" media="projection" />
Для задания в одной таблице стилей разных правил для различных типов устройств можно воспользоваться правилом @media:
cstyle type="text/css"> с! —
0media print { body {
font: lOpt Times, Georgia, serif;
}
}
0media screen { body {
font: 12pt Verdana, Arial, sans-serif;
}
}
@media projection { body { font-size: 14pt;
}
}
@media screen, print, projection { body { line-height: 120%;
}
}
—>
c/style>

Разработав стили для печати, добавьте их в файл print.css, и только эти стили будут применяться во время печати. Это гарантирует печать страницы без потери места на
листе и чернил на печатание изображений. Только устройства, поддерживающие конкретный тип вывода, будут видеть соответствующие этому типу стили CSS. Таблицы стилей с учетом типа устройства вывода не влияют на устройства других типов и на саму Web-страницу.
Правило @media позволяет вам поместить все типы устройств в одну таблицу стилей.
Пользователям не нужно печатать боковые компоненты, поэтому скопируйте файл таблицы стилей screen.css и сохраните его как новый с именем print.css. Вместо того, чтобы начинать с нуля, измените содержимое файла screen.css, оптимизируя вывод Web-страницы на печать. В файле print.css были изменены следующие компоненты файла screen.css.
#sub_banner { background-color: #ссс; border-bottom: solid lpx #999; font-size:.8em; font-style: italic; padding: 3px 0 3px 5px;
}
#navl {
position: absolute; width: 30%; left: 60%; top: lOOpx;
padding: 5px 5px px 5px 0;
}
#nav2 { position: absolute; width: 15%; left: 1%; top: lOOpx;
padding: 5px 5px px 5px 0;
}
hi {
text-align: left; color: #fff; font-size: 1.2em; text-align: left; margin-bottom: 5px; margin-top: 5px;
}
.entry {
padding-bottom: 20px; padding: 5px; border: solid lpx #999; background-color: #fcfcfc; margin-bottom: 25px;
#sub_banner { display: none;
}
#navl {
display: none;
}
#nav2 {
display: none;
}
hi { display: none;
}
.entry { padding: 5px;
На странице удален sub banner с подзаголовком и скрыты две навигационные колонки. Нет необходимости выводить элемент hi и его удаление сэкономит место в верхней части листа. У выводимых строк светло-серые поля вывода требуют больших затрат чернил (порошка), поэтому их вывод упрощен: сохранены только отступы между ними.
Не забудьте вставить элемент link в HTML-код страницы:
<link rel="stylesheet" type="text/css" href=”/css/print.css” media=”print” />
<link rel=”stylesheet” type=”text/css” href=”/css/screen.css” media=”screen” />
Вот и все, что нужно. Технология CSS упрощает многие вещи, включая подготовку страницы для вывода на различные устройства.



Правельные рецепты CSS