Иллюстрированный самоучитель по Web-графике

Стили

Рис. 665.

В приведенном примере использованы тэг <DIV> и атрибут CLASS. Тэг <DIV> применяется для задания части страницы (фрагмента документа). Он ничего не форматирует, а лишь помечает фрагмент текста, который рассматривается как единый объект. Атрибут CLASS позволяет сослаться на таблицу стилей и тем самым задать стиль представления текста, расположенного между тэгами <DIV CLASS… > и </DlV>. Обратите внимание на то, как в таблице стилей определяется стиль: набору свойств в фигурных скобках присваивается имя, перед которым ставится точка. В дальнейшем идут ссылки на эти имена с помощью атрибута CLASS для применения ранее определенного стиля. Идея проста: сначала определяется что-то, а затем используется это определение путем ссылки на него.

В этом примере тексты определяются как бы в слоях, которые накладываются друг на друга. Так, сначала выводится слой тень, затем на него накладывается слой основа, а потом – слой1 и слой2. Порядок, в котором слои накладываются друг на друга, задается порядком следования фрагментов текста, помеченных тэгом <DIV>. Собственно перекрытие слоев обеспечивается применением отрицательных значений свойства margin-top (отступ сверху).

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

• margin-top – отступ сверху;
• color – цвет;
• font-size – размер шрифта;
• font-family – семейство шрифтов;
• weight – степень "жирности" шрифта;
• line-height – высота строки.

Используя отрицательные значения свойства margin-top, можно наложить один текст на другой.

Кроме рассмотренных выше способов задания стилей, можно применять атрибут STYLE, вставляемый в тэги заголовков, абзаца <Р>, тела < BODY>, <DIV> и <IMG>. В этом случае стиль задается в следующем формате:

Описание свойств стиля заключается в кавычки и содержит свойства и их значения, перечисленные через точку с запятой, как это делалось при использовании тэга <STYLE>.

Атрибут STYLE обычно применяется в тех случаях, когда необходимо задать стиль элемента по месту его появления в программе. Вот пример использования атрибута STYLE для форматирования заголовка второго уровня.