23. Блоки
Для задания типа любой из четырех частей границы применяются свойства border-top-style, border-right-style, border-bottom-style и border-left-style. Свойство border-style определяет одновременно типы всех частей границы. Значениями этих свойств могут быть ключевые параметры none, solid, double, groove, ridge, inset, outset. Типы границ, соответствующих всем перечисленным значениям, представлены в таблице 1.
Таблица 1. Типы линий границы |
|
Параметр |
Тип границы |
none |
Граница не отображается (несмотря на значение свойства border-width). |
solid |
Граница отображается сплошной линией. |
double |
Граница отображается двойной линией (сумма толщины двух линий и промежутка между ними равна значению свойства border-width). |
groove |
Граница отображается, как будто она вдавлена в лист ("желобок"). |
ridge |
Граница отображается, как будто она выдавлена из листа ("барельеф"). |
inset |
Весь блок элемента отображается, как будто он вдавлен в лист. |
outset |
Весь блок элемента отображается, как будто он выдавлен из листа. |
Последняя большая группа свойств позволяет установить ширину, тип и цвет частей границы или всей границы в целом. Свойства border-top, border-right, border-bottom и border-left определяют ширину, тип и цвет, соответственно, верхней, правой, нижней и левой границы. Свойство border определяет одновременно параметры всех частей границы. В отличие от аналогичных свойств, задающих параметры полей и отступов, данное свойство устанавливает одинаковые значения для всех частей границы.
Проиллюстрируем использование перечисленных свойств. Изменим пример из предыдущего шага так, чтобы результат его просмотра в браузере был аналогичен приведенному на рисунке 1.
Рис.1.
Результат просмотра измененного
HTML-документа в браузере
Чтобы получить такой результат нужно задать следующие параметры у тэга <P>:
стиль границы определен как inset;
ширина ее правой и левой сторон равна 25px, верх - 0px, низ - 40px;
цвета: синий (верх-низ) и красный (лево-право);
отступы: сверху и снизу - 20px; слева и справа - 0px.
24. Визуальное форматирование (общие сведения)
Элементы HTML отображаются браузером последовательно, в том порядке, как они определены в тексте HTML-документа. Кроме этого обязательно учитывается расположение уже отображенных элементов и элементов-контейнеров, в которых могут содержаться отображаемые элементы. При компоновке страницы используются установки браузера для определения положения каждого элемента. Например, два последовательных абзаца следуют друг за другом, причем каждый начинается с новой строки.
Однако в некоторых случаях при создании Web-страницы требуется изменить естественный порядок отображения элементов. В этом случае можно воспользоваться свойством position элемента, которое позволяет определить способ его позиционирования на странице. Это свойство задает один из способов расположения элемента на странице:
статический,
относительный или
абсолютный.
Относительный способ определяет смещение элемента относительно его естественного положения в потоке отображения элементов. Абсолютный способ удаляет элемент из естественного потока позиционирования и позволяет разместить его на странице абсолютно произвольным образом. Статический способ, являющийся умалчиваемым способом позиционирования элементов, предполагает естественный поток отображения элементов страницы в окне браузера в соответствии с иерархией объектов документа.
Работу этих способов можно представить следующим образом. Элементы, которые нужно разметить на Web-странице, можно представить в виде очереди, из которой браузер берет по одному элементу и размещает в соответствии с заданными параметрами. Статический способ, используемый по умолчанию, не изменяет принятых установок браузера в отношении расположения элементов Web-страницы. Относительный способ похож на статический, только здесь можно сместить следующий элемент относительно предыдущего. Абсолютный способ исключает элемент из очереди и отображает его в соответствии с указанными параметрами.
Значения static, relative и absolute свойства position определяют соответствующий способ позиционирования элемента, который, в конечном счете, складывается из значения указанного свойства элемента и значений его свойств top и left. Эти последние свойства определяют смещение вниз и вправо левого верхнего угла блока отображения элемента.
Рассмотрим более подробно эти способы позиционирования.