НОУ ІНТУІТ, Лекція, Блокові та рядкові елементи

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

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

• параграф- це блоковий елемент розмітки;
• виділення курсивом- це рядковий елемент розмітки.

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

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

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

Елемент DIV

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

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

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

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

Елемент SPAN

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

Таблиця 2.1.HTML-елемент CSS-аналог

.	.
.	.
.	.
.	text-decoration: underline; ">.
і т.п.

У нових версіях браузера Netscape описи рядкових стилів не повинні перетинатися. Тег кінця елемента рядкового типу закриває найближчий елемент, а не той, який відкритий тегом початку цього рядкового стилю. Також і у разі застосування елемента SPAN, де тег кінця можна співвіднести тільки з найближчим тегом початку елемента SPAN:

---