Границы и фон

Дата добавления: 2015-07-09; просмотров: 564; Нарушение авторских прав

Границу можно легко разместить вокруг заголовка, списка, абзаца или их группы, поместив их в элемент div. Например:

div.box { border: solid; border-width: thin; width: 100% }

Обратите внимание, что, если не установить свойство "width", некоторые браузеры слишком выносят правое поле вправо. Это можно использовать с разметкой следующим образом:

<div class="box">Содержимое этого элемента DIV будет заключено в тонкую рамку.</div>

Имеются следующие типы границ: dotted (точечная), dashed (пунктирная), solid (сплошная), double (двойная), groove (вдавленная), ridge (выпуклая), inset (вложенная) и outset (наложенная). Свойство border-width определяет ширину. Его значения: thin (тонкая), medium (средняя) и thick (толстая); кроме того, можно задавать конкретное значение, например, 0.1em. Свойство border-color позволяет установить цвет.

Приятный эффект дает заполнение фона прямоугольника сплошным цветом или подогнанным изображением. Для этого используется свойство background. Прямоугольник можно заполнить с помощью элемента div следующим образом:

div.color { background: rgb(204,204,255); padding: 0.5em; border: none; }

Без явного определения свойства border некоторые браузеры будут изменять цвет фона только под каждым символом. Свойство padding задает некоторое расстояние между краями закрашенной области и содержащимся в ней текстом.

Можно задать различные значения этого расстояния слева, сверху, справа и снизу с помощью свойств padding-left, padding-top, padding-right и padding-bottom, например padding-left: 1em.

Предположим, Вам нужны границы не со всех сторон. С помощью семейства свойств border-left, border-top, border-right и border-bottom с соответствующим суффиксом: style, width или color можно управлять свойством border для каждой из сторон независимо, например

p.changed { padding-left: 0.2em; border-left: solid; border-right: none; border-top: none; border-bottom: none; border-left-width: thin; border-color: red; }

Здесь устанавливается красная граница вдоль нижнего и левого краев абзацев, принадлежащих классу "changed".

<== предыдущая лекция	\|	следующая лекция ==>
Установка пустого пространства над и под объектом	\|	Функции соединения с сервером MySQL