=> Главная База Знаний HTML 11.8. Использование элементов DIV и SPAN


11.8. Использование элементов DIV и SPAN

Использование HTML‑элементов SPAN и DIV позволяет в некоторых случаях значительно облегчить применение стилей к нужным фрагментам документа. С помощью HTML‑элемента SPAN можно, например, изменить цвет шрифта в отрывке текста только с помощью таблиц стилей (без использования HTML‑элемента FONT с атрибутом color):

...

Слово зеленый отображается соответствующим цветом...

Элемент SPAN применяется для создания встроенных элементов, как в предыдущем примере. Чаще всего этот элемент применяется потому, что надо где‑то указать значение style, class или id для участка текста.

В отличие от SPAN, HTML‑элемент DIV позволяет создавать блочные элементы. При этом можно объединять несколько элементов (в том числе и блочных) в один блочный элемент. Это удобно во многих случаях, например, когда нужно обвести рамкой или свободно позиционировать группу элементов, задать общий фон для группы элементов.

Использование HTML‑элементов DIV и SPAN отражено в примере 11.5.

Пример 11.5. Использование элементов DIV и SPANИспользование элементов DIV и SPAN

Список сотрудников

Имя: Василий
Фамилия: Пупкин

Должность: Директор
Телефон: 123-45-01 (секретарь)

Имя: Владимир
Фамилия: Замахов

Должность: Зам. директора
Телефон: 123-45-02

Имя: Мария
Фамилия: Иванова

Должность: Секретарь
Телефон: 123-45-01

...

Приведенный HTML‑документ выглядит так, как показано на рис. 11.9.

Рис. 11.9. Использование элементов DIV и SPAN

Обратите внимание, что каждый элемент DIV имеет ширину 80 % от ширины окна браузера, а каждый четный элемент смещен на 20 % от ширины окна вправо. Главным в этом примере является то, что содержимое элемента DIV позиционируется как единое целое, а с помощью элемента SPAN удалось отделить текст с названием поля, описывающего данные сотрудника, от данных, соответствующих этому полю. Вообще, такого же эффекта можно добиться применением обычных таблиц, однако пришлось бы приложить гораздо больше усилий.