TML, CSS, СКРИПТЫ: практика создании сайтов

Технологические основы

Индивидуальные правила представления контента

для различных сред и устройств вывода

В CSS2 определен ряд типов сред и устройств вывода информации, к

каждому из которых можно применить индивидуальный набор правил, что дает

возможность создавать аппаратно-зависимые стили. Перечень имен типов

сред и устройств с пояснениями приведен в табл. 3.1.

Таблица 3.1. Типы устройств вывода информации,

определенные спецификацией CSS2

Имя

I all

aural

braille

embossed

handheld

print

projection

screen

tty

tv

Описание

Все среды и устройства

Речевые синтезаторы (только CSS2; в последующих версиях CSS по

ряду причин вместо aural надлежит использовать ключевое слово

speech)

Тактильные дисплеи Брайля

Печатные материалы с постраничной разбивкой, использующие

рельефную азбуку Брайля

Небольшие экраны мобильных устройств

Печатные материалы с постраничной разбивкой; документы,

отображаемые на экране в режиме предварительного просмотра перед

печатью

Постраничные презентации, демонстрируемые при помощи

проектора

Цветные дисплеи высокого разрешения (прежде всего речь идет о

«полноценных» экранах настольных компьютеров и ноутбуков)

Терминальные устройства, предназначенные для вывода символов

фиксированных размеров

Устройства с цветными экранами низкого разрешения, ограниченной

прокруткой и возможностью воспроизведения звука (наподобие

WebTV, некогда популярного на Западе) I

Существуют CSS-свойства, которые можно использовать только

применительно к конкретным типам устройств вывода. Так, например, все свойства,

использованные в нашем первом практическом примере к этой главе —

color, background-color, font-family И font-size,— актуальны ТОЛЬКО ДЛЯ

визуальных сред и устройств.

Обеспечить работу аппаратно-зависимых стилей можно несколькими

различными способами. Первый пример связывает страницу с внешним файлом

Глава 3. Оформление веб-страниц с использованием каскадных листов стилей 131

стилей printer.css, определяющим визуальное форматирование ее

содержимого при выводе на печать:

^>media=»print» />

Аналогичным образом атрибут media может быть задан и для тега .

Один документ вполне может содержать несколько элементов

.

Другой пример демонстрирует применение директивы @media для

определения аппаратно-зависимой части, которая задает правила произнесения текста

страницы программами синтеза речи, непосредственно во встроенном листе

стилей:

Наконец, в третьем примере показано, как использовать директиву @ import

для того, чтобы вставить во встроенный стиль внешний фрагмент, заданный

файлом pocketpc.css и определяющий правила форматирования содержания

страниц в версии для «наладонников»:

Будьте внимательны — Internet Explorer, включая даже шестую версию, не

восприимчив к последнему варианту синтаксиса. Подобную директиву

браузер от Microsoft попросту проигнорирует.

В главе 4 будет описан завершенный сайт, предусматривающий

автоматически генерируемые версии представления контента: экранную, для печати и

для КПК. Пока же предлагаю рассмотреть простейший практический пример,

явно определяющий стиль только для экранной версии страницы.

Соответствующий XHTML-документ, по обыкновению, назовем именем

index.html. Лист стилей будет внешним, организованным в виде файла

style.css.

132

Часть I. Технологические основы

{Листинг ЗА Код файла lndex.html

%> «http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd»>

^>media=»screen» />

Элементы логической разметки HTML

Bce элементы логической разметки можно подразделить на два

типа: блочные (block) и внутристрочные (inline). р>

Разница между ними заключается в том, что при визуальном отображении

страницы следующие друг за другом блочные элементы располагаются

вертикально, а внутристрочные — горизонтально.