Елемент SPAN

Елемент DIV

Список рекомендованих джерел.

Основний: 3, 5, 6

Додатковий: 12, 13, 16, 19, 23, 24

Інтернет-ресурси: 28, 29

1. Блочні та рядкові елементи

У описанні елементів розмітки мови HTML існує поняття рядкового та блочного елементів розмітки. Пояснити різницю між блочними та рядковими елементами можна на прикладі:

· параграф – це блочний елемент розмітки;

· виділення курсивом – це рядковий елемент розмітки.

Блочні елементи можуть бути вкладені один в одного, але вони не повинні перетинатися. Рядкові елементи можна як вкладати, так і пересікати, але останнє робити не рекомендується. Зрозуміло, що за набором атрибутів управління відображенням (атрибути описання стилю) рядкові та блочні елементи відрізняються. Спрощено можна сказати, що атрибути описання стилю рядкового елементу є підмножиною атрибутів описання стилю блочного елементу. Узагальненнями блочного та рядкового елементів, з точки зору стилів, є елементи DIV та SPAN, відповідно.

DIV відіграє роль універсального блоку. Блочний елемент завжди відділено від інших елементів сторінки (контексту) порожнім рядком. DIV не несе ніякого змістового навантаження. Насправді, його використання має зміст тільки в контексті CSS. Ніяких правил за промовчанням для відображення DIV не існує. Це просто новий рядок тексту.

DIV дозволяє застосовувати атрибути стилю, зв’язані з межею блоку та відступами блоку від меж старшого елементу, а також «набивку», відступ від межі блоку до межі вкладеного елементу:

<DIV STYLE="margin:20px;padding:10px;">Блочний елемент, заданий елементом розмітки DIV.<P>Для нього задані межа та відступи як від меж старшого елементу розмітки, так і для вкладених в нього елементів розмітки.</P> </DIV>

У наведеному прикладі всередині вікна браузера розміщено блочний елемент (DIV), всередину якого вміщено іще один блочний елемент (P). Якщо web-сторінку планується переглядати браузерами, що не підтримують CSS, елемент DIV не рекомендується використовувати. У цьому випадку краще використовувати параграф чи інший елемент розмітки із стандартного набору HTML.

Елемент розмітки SPAN – це узагальнений елемент розмітки, використання якого не приводить до утворення блоку тексту. Він може замінити елементи FONT, I, B, U, SUB, SUP тощо. Розглянемо приклади таких відповідників, які наведені в таблиці 9.1.

Таблиця 9.1

CSS-аналоги HTML-елементів

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, де тег кінця можна співставити тільки з найближчим тегом початку елементу SPAN. Наведений нижче приклад правильно працює тільки в Internet Explorer:

<B> приклад <I> с перетину </B> стилів </I>

Якщо використовується SPAN, перетин рядкових стилів не допускається. Наведений вище приклад тут слід реалізувати так (рис. 9.1):

<SPAN STYLE="font-weight:bold;"> реалізація<SPAN STYLE="font-style:italic;"> прикладу з перетином стилів</SPAN></SPAN><SPAN STYLE="font-style:italic;">з використанням SPAN </SPAN>

Використання елементу SPAN обмежується браузерами, що підтримують CSS. При цьому не всі атрибути специфікації CSS підтримуються браузерами.

Рис. 9.1. Приклад використання SPAN без перетину рядкових стилів

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