При использовании таблиц стилей у автора имеется возможность позаботиться о том, чтобы страницы его сайта одинаково хорошо обрабатывались самыми различными устройствами. Это достигается созданием таблиц стилей, которые используются, если просмотр производится с помощью заданного устройства.

Сами таблицы стилей создаются как обычно, то есть в CSS‑файле или внутри HTML‑элемента STYLE. Вся хитрость заключается в указании нужного значения атрибута media элемента LINK (при подключении внешней CSS) или элемента STYLE (для встроенной таблицы).

Атрибут media может принимать в качестве значения список из одного или более следующих строковых идентификаторов:

• all – таблица подходит для любого устройства;

• aural – таблица используется для речевых синтезаторов (таблицы управления свойствами потоком речи гораздо более сложны, чем таблицы для графических средств просмотра, и в этой книге не рассматриваются);

• braille – таблица применяется для устройств, генерирующих последовательность символов алфавита Брайля (предназначенного для людей с ослабленным зрением);

• handled – таблица используется для устройств с небольшим экраном, имеющим также ограничения по цветопередаче и прочим параметрам (карманные ПК и прочие портативные устройства);

• print – таблица применяется при выводе страницы на печать, а также при выводе в окне предварительного просмотра;

• projection – таблица используется при просмотре документа с помощью проектора или другого сходного устройства;

• screen – таблица применяется при отображении на экране стандартного монитора (используется по умолчанию);

• tty – таблица используется при выводе на устройства с ограниченными возможностями отображения (телетайпы, терминалы и др.);

• tv – таблица применяется при отображении на экране телевизора или сходного по возможностям устройства.

Теперь рассмотрим небольшой пример документа, который по‑разному отображается, например, на экране монитора и при выводе на печать (самые доступные режимы при применении только ПК) (пример 11.8).

H1 {color: black; font-family: newroman; text-align: center}

H2, H3 {color: black; font-family: newroman; text-align: center}

P {font-style: normal; font-weight: normal; color: black}

BODY {background-color: black}

H1 {color: red; font-family: arial; text-align: center}

H2, H3 {color: yellow; font-family: courier; text-align: left}

P {font-style: italic; font-weight: bold; color: white}

Заголовок первого уровня

Текст абзаца

Заголовок второго уровня

Текст абзаца

Заголовок третьего уровня

Текст абзаца

На экране монитора документ выглядит так, как показано на рис. 11.12 (используется таблица со значением атрибута media равным screen).

Рис. 11.12. Страница в окне браузера

При выводе на печать (в окне предварительного просмотра) используется таблица стилей со значением media=print, что видно из рис. 11.13.

Рис. 11.13. Страница в окне предварительного просмотра

Конечно, даже при выводе на печать может потребоваться гораздо больше работы при создании таблицы стилей, чем показано в приведенном здесь примере. Однако думается, что даже в этом простом случае хорошо заметна потенциальная мощь CSS в подготовке документов для различных устройств.

Все, что было рассмотрено в предыдущих главах книги, относится к созданию хоть и красивых и удобных, но все же статичных веб‑страниц. Этого в большинстве случаев оказывается вполне достаточно. Однако по‑настоящему эффектными страницы получаются, если использовать при их создании возможности, предоставляемые большинством современных браузеров, – добавление в документы исполняемого содержимого.

Итак, исполняемым содержимым документа являются небольшие программы (названные сценариями), написанные автором документа и выполняющие в большинстве случаев несложные задачи по обработке данных или украшающие страницу.

Сценарии являются программами, поэтому естественно, что написаны они с использованием какого‑то языка программирования.

Среди языков, разработанных для программирования сценариев, можно привести JavaScript, VBScript, JScript как наиболее простые. В данной книге будет рассмотрено только программирование на языке JavaScript.