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

Рисунок 2.1.

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

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

Елемент SPAN

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

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

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

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

Графічно властивості можна представити таким чином:

Дата добавления: 2013-12-12