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

Рисунок 2.9.

Рисунок 2.8.

Рисунок 2.7.

Рисунок 2.6.

Рисунок 2.5.

Рисунок 2.4.

Рисунок 2.3.

Рисунок 2.2.

З шириною і висотою блоку тексту усе більш або менш зрозуміло. Задаватися вони можуть в друкарських пунктах(pt), пікселах(px) і умовних одиницях(em):(відкрити)

<DIV STYLE="width: 200px;">пікселі</DIV>

<DIV STYLE="width: 200pt;">друкарські пункти

</DIV>

<DIV STYLE="width: 5em;">умовні одиниці</DIV>

З висотою блоку тексту слід бути обережним, оскільки в четвертій версії Netscape Navigator багато хто з атрибутів CSS не підтримується, у тому числі висота звичайного блокового елементу.

Відстань від межі блокового елементу до межі вкладеного в нього блокового елементу називається padding. У рамках цього курсу лекцій для позначення цієї властивості використовується слово "набивання" або словосполучення "внутрішній відступ".

Відступ від "набивання" зовнішнього блокового елементу до межі вкладеного елементу н азивається margin. Для його позначення ми використовуватимемо термін "відступ" або словосполучення "зовнішній відступ".

Таким чином padding і margin характеризують відступи блокового елементу відносного початку його змісту і відносно межі елементу розмітки, що охоплює його, відповідно:

Відступи і "набивання" можуть бути лівими, правими, верхніми і нижніми. CSS дозволяє змінювати будь-які з них. Детальніше відступи розглядаються в розділі "Відступи"(margin) ", а "набивання" в розділі "Набивання"(padding) ".

При відображенні блоку тексту можна показати його видиму межу. CSS дозволяє визначити її стиль, ширину і колір. При використанні видимої межі слід зважати на специфіку браузерів. Одним з можливих способів застосування межі є видиме обмеження "плаваючих" блоків тексту.

"Плаваючий" текстовий блок дозволяє реалізувати можливість обтікання цього блоку текстом.

Притиснемо блок тексту управо. Ліворуч його обтікатиме інший текст.

Обтікання одного тексту іншим відбувається в тому ж ключі, що і Обтікання текстом картинки або таблиці. Текст блоку, що охоплює, прагне "втиснутися" на вільне місце, залишене "плаваючим" блоком. Коли межа "плаваючого" блоку кінчається, блок, що охоплює, поширюється на усю ширину відведеного для тексту простору.

CSS дозволяє вирівнювати блок тексту не лише по краю сторінки, але і по центру(тільки у Netscape Navigator).

Відцентруємо блок тексту.

Блок розміщений по центру сторінки, якщо сторінка видима в Netscape Navigator. CSS не підтримує значення center для атрибуту float.

Таким чином, блок тексту з точки зору розміщення на сторінці рівноцінний картинкам або прямокутним областям додатків.

Відступи(margin)

При відображенні блоку тексту на папері навколо нього зазвичай залишають поля. Поля можна задавати або відносно межі сторінки, або відносно самого блоку тексту. У першому випадку ми маємо справу з "відступом"(margin), а в другому — з набиванням(padding). Власне, ширина поля визначатиметься сумою ширини "набивання" і ширини відступу:

Зазвичай пунктирна лінія і межа блоку є невидимими лініями. Вони вгадуються по краю тексту, що вирівнюється. Вірніше, вгадується сумарна ширина полів. Стрілки вказують напрям відліку відступу. Padding відлічується від зовнішньої межі блоку всередину блоку, тоді як margin — від зовнішньої межі блоку в область блоку(назовні), що охоплює його.

Зовнішній відступ(margin) може відлічуватися по будь-якому напряму відносно сторін блоку:

margin — left — лівий зовнішній відступ. Визначає відстань від лівої межі блоку тексту до лівої межі внутрішнього відступу("набивання", padding) елементу, що охоплює;

margin — right — правий зовнішній відступ. Визначає відстань від правої межі блоку тексту до правої межі внутрішнього відступу("набивання", padding) елементу, що охоплює;

margin — top — верхній зовнішній відступ. Визначає відстань від верхньої межі блоку тексту до верхньої межі внутрішнього відступу("набивання", padding) елементу, що охоплює;

margin — bottom — нижній зовнішній відступ. Визначає відстань від нижньої межі блоку тексту до нижньої межі внутрішнього відступу("набивання", padding) елементу, що охоплює;

margin — задає загальний зовнішній відступ від усіх сторін блоку тексту. Застосовується у тому випадку, якщо блок тексту рівновіддалений від усіх меж внутрішнього відступу елементу, що охоплює.

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

В даному випадку для параграфа використовувався наступний опис стилю:

P { margin-left: 50px;margin-right: 5px;

margin-top: 15px;margin-bottom: 50px;

padding: 0px;text-align: left; }

Треба мати на увазі, що браузери можуть відображати ці параметри по-різному. Netscape Navigator 4.x досить незграбно обробляє margin, оптимізуючи представлення стилю там, де цього робити не треба.

Якщо розмір усіх зовнішніх відступів однаковий, то можна просто скористатися атрибутом margin:

P { margin: 5px; }

При застосуванні зовнішнього відступу слід пам'ятати, що він відлічується від межі елементу до межі внутрішнього відступу("набивання", padding) елементу, що охоплює. Якщо цей факт не враховувати, то загальна ширина видимих полів може виявитися більше, ніж вказано в зовнішньому відступі.

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

Текст усередині блоку починається не від самої його межі. Між межею і змістом блоку є вільний простір. Воно називається внутрішній відступ текстового блоку або padding. Спільно із зовнішнім відступом(margin) текстового блоку padding утворює загальне поле відступу від межі елементу, що охоплює блок, розмітки.

Padding можна проілюструвати на прикладі лівого внутрішнього відступу тексту в параграфі:

Для цього прикладу при описі параграфа використовувався стиль:

P { padding-left: 100px;text-align: left;

border-width: 1px; }

Щоб браузер правильно відображав стилі, не слід розміщувати опис стилю на декількох рядках, як це зроблено в прикладі. Для Internet Explorer це не має значення, а Netscape Navigator може "спіткнутися".

У блоку тексту існує чотири сторони. Відповідно, padding може бути:

padding — left — лівий внутрішній відступ, який визначає відстань від лівого краю блоку до його змісту;

padding — right — правий внутрішній відступ, який визначає відстань від правого краю блоку до його змісту;

padding — top — верхній внутрішній відступ, який визначає відстань від верхнього краю блоку до його змісту;

padding — bottom — нижній внутрішній відступ, який визначає відстань від нижнього краю блоку до його змісту;

padding — визначає єдиний розмір внутрішнього відступу блоку. Цей параметр задається у разі однакового розміру відступу від усіх сторін блоку.

Проілюструємо застосування padding на прикладі:

P { padding-left: 100px;padding-right: 50px;

padding-top: 20px;padding-bottom: 10px;

text-align: left;border-width: 1px; }

При установці padding слід пам'ятати, що цей параметр задає розмір відступу від межі блоку до межі зовнішнього відступу(margin) змісту блоку. З цієї причини загальний розмір поля може виявитися більше, ніж задано в параметрі padding.

Межа(border)

У кожного блокового елементу розмітки є межа. Від межі відлічуються відступи(margin і padding). Уздовж межі "плаваючого" блоку його обтікає текст.

Для опису меж блоків застосовуються наступні атрибути:

border — top — width — ширина верхньої межі блоку;

border — bottom — width — ширина нижньої межі блоку;

border — left — width — ширина лівої межі блоку;

border — right — width — ширина правої межі блоку;

border — width — ширина межі блоку. Задається у тому випадку, якщо ширина межі блоку однакова по усьому периметру блоку;

border — color — колір межі блоку. Згідно специфікації CSS1 може бути заданий для кожної з меж блоку. Наприклад, border — right — color: red. Може задаватися як мнемонікою(red, blue, navy і тому подібне), так і в нотації RGB(border — color:#003366). Вказівка кольору для кожної з меж підтримується не усіма браузерами;

border — style — тип лінії межі блоку. Може набувати значень: none, dotted, dashed, solid, double, groove, ridge, inset, outset. Згідно специфікації CSS1, може бути заданий для кожної з меж блоку. Наприклад, border — right — style: dotted. Вказівка типу лінії межі підтримується не усіма браузерами.

Для опису межі немає необхідності вказувати в стилі усі атрибути. Існує скорочений запис атрибутів. Наприклад, для опису верхньої лінії межі можна використати запис типу:

P { border-top: 1px dotted red; }

атрибут: ширина_линии тип_линии цвет_линии код

Якщо необхідно обмежити блок тексту межею, то це може виглядати приблизно так:(відкрити)

В даному прикладі ми використали наступний опис стилю відображення межі:

P { text-align: left;border-width: 2px;

border-color: black;border-style: solid; }

Застосування межі для позначення блоку — не самий кращий спосіб оформлення документу. В усякому разі, його застосовують нечасто.

Вказуючи межу в Internet Explorer, треба обов'язково визначати її тип, інакше вона не відображатиметься.

Під обтіканням блоку текстом розуміють той же ефект, який можна реалізувати для графіки, коли картинка не розриває блок тексту, а вбудовується в нього. Текст в цьому випадку "обтікає" картинку з одного боку — там, де є вільне поле між межею сторінки(елементу) і картинкою. Обтікання картинки текстом від звичайного вбудовування картинки в текст документу відрізняється тим, що уздовж вертикальної межі картинки розташовується декілька рядків тексту, а не одна.

Обтіканням блоку тексту іншим текстом управляють два атрибути CSS: float і clear.

Атрибут float визначає "плаваючий" блок тексту. Він може набувати значень:

left — блок притиснутий до лівої межі елементу, що охоплює;

right — блок притиснутий до правої межі елементу, що охоплює;

both — текст може обтікати блок з обох боків.

Проілюструвати обтікання дозволяє наступний приклад:(відкрити)

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