Лекція 10. Блокові і стрічкові елементи css

Блокові і стрічкові елементи: опис, форматування і властивості.

• Блокові і стрічкові елементи

• Елемент DIV

• Елемент SPAN

• Властивості блоків

• Відступи (margin)

• Набивання (padding)

• Кордон (border)

• Обтікання блоку тексту

Блокові і стрічкові елементи

В описі елементів розмітки мови HTML існує поняття строкового (in-line) елемента розмітки і блочного (block) елемента розмітки. Формально вони визначені в DTD SGML-опису мови HTML. Пояснити відмінність між блоковим і строковим елементами можна на прикладі:

1. параграф - це блоковий елемент розмітки;

2. виділення курсивом - це стрічковий елемент розмітки.

Блокові елементи можна вкладати один в одного, але вони не повинні перетинатися. Строкові елементи можна як вкладати, так і перетинати (згідно DTD і практиці старих версій браузерів), але останнє робити не рекомендується.

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

Узагальненнями блочного і строкового елементів, з точки зору стилів, є елементи DIV і SPAN, відповідно.

Елемент div

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

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

<DIV STYLE="margin:20px;padding:10px;">

Блоковий елемент, заданий елементом розмітки DIV.

<P> Для нього визначена межа і відступи як

від кордонів старшого елемента розмітки , так і

для вкладених в нього елементів розмітки. </

P>

</DIV>

Рис. 9.1.

У даному прикладі всередині вікна браузера розташований блоковий елемент (DIV), всередину якого поміщений ще один блоковий елемент (P). DIV має білий фон і кордон.

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

Елемент span

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

Таблиця 9.1.
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, може не підтримуватися деякими браузерами.