Обобщенные блоковые и строковые элементы разметки

Внутристрочный» элемент не создает разрывов строки, за исключением случаев, когда ширины родительского элемента не хватает.

Блочная модель и типы элементов

Специфичности селектора.

- Порядка размещения правила в таблице стилей или селекторе. «Приоритет последнего».

Таким образом, «Каскад определяет упорядоченную последовательность таблиц стилей, в которой правила более поздних таблиц имеют приоритет над более ранними».

В основе системы визуального форматирования HTML-документа лежит блоковая модель (box model). Согласно блоковой модели все элементы HTML по умолчанию определены либо как «блочные», либо «внутристрочные». Разница между двумя этими типами элементов заключается в следующем. «Блочные» могут содержать «блочные» и «внутристрочные» элементы. «Внутристрочные» могут содержать только данные или другие «внутристрочные» элементы.

К «блочным» элементам относятся абзацы (p), заголовки различных уровней (h1, h2, …), списки (ol,ul,dl), универсальный (обобщенный) блоковый элемент (div) и другие. Примерами «внутристрочных» элементов являются анкеры (а), вставки изображений (img) и т.д.

В CSS понятия «блочный» и «внутристрочный» относятся только к представлению (раскладке). Как элемент следует представлять в раскладке определяется свойством display, которое может принимать значения: block, inline, none, list-item и run-in.

При использовании CSS любой HTML, XHTML или XML элемент может быть определен как «блочный» (display: block), так и «внутристрочный» (display: inline). По умолчанию элементы, определенные как «блочные» в HTML, имеют представление display: block, а «внутристрочные» display: inline.

«Блочный» элемент CSS всегда отделен от прочих элементов страницы (контекста) пустой строкой, занимает всю ширину родительского элемента, в котором он содержится и в нормальном потоке текста документа рядом с «блочным» элементом разместить ничего нельзя.

При отображении любой элемент («блоковый» или «внутристрочный») генерирует вокруг себя прямоугольник – блок элемента, который используется для позиционирования элементов и раскладки документа.

Блок элемента состоит из четырех компонентов:

- содержания;

- интервалов (набивки);

- границы;

- поля (отступы).

Базовыми свойствами блока элемента являются: высота (height), ширина (width), граница (border), поля (margin), интервал (padding), произвольное размещение (float), управление обтеканием (clear), фон (bgcolor).

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

Формально понятие строкового (in-line) элемента разметки и блочного (block) элемента разметки определены в DTD (Document Type Definition) языка разметки.

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

Обобщениями блочного и строкового элементов с точки зрения стилей выступают элементы DIV и SPAN соответственно.

Элемент div

Элемент div выступает в качестве универсального блока. Он всегда отделен от прочих элементов страницы (контекста) пустой строкой. Элемент div не несет никакой смысловой нагрузки. Часто говорят, что div - это раздел страницы. Но реально его применение осмысленно только в контексте CSS. Никаких правил умолчания для отображения div не существует. Это просто новая строка текста.

Элемент div позволяет применить атрибуты стиля, связанные с границей блока, отступами блока от границ старшего элемента и "набивку", т.е. отступ от границы блока до границы вложенного элемента:

Ниже приведен пример задания блочного элемента div. Для него определена граница и отступы как от границ старшего элемента разметки, так и для вложенных в него элементов разметки.

<div style="border-color:#003366;

border-width:1px;

margin:20px;

padding:10px;">

</div>

Элемент span

Элемент разметки span - это обобщенный строковый элемент разметки, применение которого не приводит к образованию блока текста. Он может заменить собой элементы: font, i, b, u, sub, sup и т.п. Приведем примеры таких соответствий:

HTML-элемент	CSS-аналог
<font color=red>... </font>	<span style="color:red;">...</span>
<i>...</i>	<span style="font-style:italic;">...</span>
<b>...</b>	<span style="font-weight:bold;">...</span>
<u>...</u>	<span style="text-decoration:underline;">... </span>
и т.п.

Применение элемента span ограничено браузерами, которые поддерживают CSS.

Дата добавления: 2014-01-13