Свойства блоков

Элемент 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>
и т.п.

В новых версиях браузера Netscape пересекать описания строковых стилей нельзя. Таг конца элемента строкового типа закрывает ближайший элемент, а не тот, который открыт тагом начала данного строкового стиля. Такое поведение в точности совпадает с применением элемента SPAN, т.к. в последнем таг конца можно соотнести только с ближайшим тагом начала элемента span:

<b>предложение <i>с пересекающимися</b> стилями</i>
предложение с пересекающимися стилями

<span style="font-weight:bold;">предложение <span style="font-style:italic;">с пересекающимися</span> стилями</span>
предложение с пересекающимися стилями

Применение элемента SPAN ограничено браузерами, которые поддерживают CSS. При этом не все атрибуты спецификации CSS поддерживаются в разных браузерах. Например, атрибут vertical-align, который призван заменить элементы SUP и SUB, не поддерживается ни одним из браузеров.

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

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

Графически свойства можно представить следующим образом:

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

С шириной и высотой блока текста более или менее все понятно. Задаваться они могут в типографских пунктах(pt), пикселях(px) и условных единицах(em):

<div style="width:200px;">пиксели</div>
<div style="width:200pt;">типографские пункты</div>
<div style="width:5em;">условные единицы</div>

пиксели

типографские пункты

условные единицы

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