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


Стили - часть 4


<DIV CLASS=ocHOBa>Мы/DIV>

<DIV CLASS=слой1>сделали это без всякой графики</DIV>

<DIV CLASS=слой2>используя только стили текста</DIV>

</TD> </TR>

</TABLE>

</CENTER>

</BODY>

</HTML>

Рис. 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>. В этом случае стиль задается в следующем формате:

STILE ="описание_свойств_стиля"

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

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

<Н2 STYLE="font-size:48; font-family:Аг1а1">Некоторый текст</Н2>




Начало  Назад  Вперед