Основы Web-инжиниринга. Часть 1. Громов Ю.Ю - 60 стр.

UptoLike

ВУЗ: 

ТГТУ | Тамбов

Составители: 

Рубрика: 

При установке padding следует помнить, что этот параметр задает размер отступа от границы блока до границы внешне-
го отступа (margin) содержания блока. По этой причине общий размер поля может оказаться больше, чем задано в параметре
padding.
3.8. ГРАНИЦА (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; }
атрибут: ширина_линии тип_линии цвет_линии код
Если необходимо ограничить блок текста границей, то это может выглядеть примерно так (рис. 36).
Рис. 36
В этом примере было использовано следующее описание стиля отображения границы:
P {text-align:left;border-width:2px; border-color:darkred;border-style:solid;}
Применение границы для обозначения блока не самый лучший способ оформления документа. Во всяком случае, его
применяют нечасто.
Указывая границу в Internet Explorer, нужно обязательно определять ее тип, в противном случае она не будет отобра-
жаться.
3.9. ОБТЕКАНИЕ БЛОКА ТЕКСТА
Под обтеканием блока текстом понимают тот же самый эффект, который можно реализовать для графики, когда кар-
тинка не разрывает блок текста, а встраивается в него. Текст в этом случае "обтекает" картинку с одной из сторон – там,
где есть свободное поле между границей страницы (элемента) и картинкой. "Обтекание" картинки текстом от обычного
встраивания картинки в текст документа отличается тем, что вдоль вертикальной границы картинки располагается не-
сколько строк текста, а не одна.
"Обтеканием" блока текста другим текстом управляют два атрибута CSS: float и clear.
Атрибут float определяет плавающий блок текста. Он может принимать значения:
left – блок прижат к левой границе охватывающего блок элемента;
rigth – блок прижат к правой границе охватывающего блок элемента;
both – текст может обтекать блок с обеих сторон.
Проиллюстрировать обтекание можно на следующем примере (рис. 37).

Страницы