Основы работы с XHTML и CSS

       

Тег <div>


Тег <div> (division) служит, как и тег <span>, разновидностью маркера. Его назначение состоит в ограничении и определении набора элементов страницы для применения стиля оформления к вложенному множеству. Тег <div> является блочным тегом, так как он охватывает другие теги и, что важно, создает на странице перенос строки перед своим вложенным содержимым и после него.

Использование тега <div> иллюстрируется двумя следующими параграфами. Оба параграфа оформляются одинаково. Однако вместо кодирования этих стилей с помощью линейных таблиц стилей в обоих тегах <p>, параграфы окружены тегом <div>, который определяет эти стили. Параграфы наследуют стили охватывающего тега <div>. Вывод браузером этого форматирования показан на рисунке 3.15.

<div style="text-indent:25px; margin-left:30px; margin-right:30px; text-align:justify">

<p>Этот параграф имеет отступ первой строки в 25 пикселей. Он имеет левое и правое поле по 30 пикселей и выровнен по ширине между двумя полями.</p>

<p>Этот параграф также имеет отступ первой строки в 25 пикселей. Он имеет левое и правое поле по 30 пикселей и выровнен по ширине между полями. Оба параграфа оформлены с помощью охватывающего тега раздела div для применения этих стилей к обоим параграфам.</p>

</div>

Листинг 3.32. Код оформления двух параграфов с помощью охватывающего тега <div> (html, txt)


Рис. 3.16.  Параграфы, оформленные охватывающим тегом <div>

Тег <div> не имеет никаких видимых собственных характеристик форматирования, кроме того факта, что он создает перенос строки перед и после окаймленного содержимого. Эти переносы строк не видны в приведенном выше примере, так как теги <p> сами создают собственные переносы строк, которые объединяются с переносами строк тега <div>.

Так как тег <div> подобно тегу <span> обеспечивает большую гибкость при обрамлении и оформлении содержимого страницы, в дальнейшем существуют многочисленные случаи использования тегов <span> и <div> для применения форматирования к широкому набору элементов страницы.



Содержание  Назад  Вперед