3.Форматирование объектов с помощью css: отступы и границы.

Стиль Границы

Свойство border-style указывает, какой тип границы отображать.

Никакое из свойств границы не возымеет КАКОЙ-ЛИБО эффект до тех пор, пока свойство border-style не установлено!

Значения border-style:

none: Отсутствие границы

dotted: Граница из точек

dashed: Пунктирная граница

solid: Сплошная граница

double: Двойная граница. Ширина двойной границы равна значению border-width

groove: Определяет 3D рельефную границу. Эффект зависит от значения border-color

ridge: Определяет 3D хребтообразную границу. Эффект зависит от значения border-color

inset: Определяет 3D вдавленную границу. Эффект зависит от значения border-color

outset: Определяет 3D выпуклую границу. Эффект зависит от значения border-color

Ширина Границы

Свойство border-width используется, чтобы установить ширину границы.

Ширина устанавливается в пикселях, или с помощью одного из трех предопределенных значений: thin (тонкая), medium (средняя), или thick (толстая).

Замечание: Свойство "border-width" не работает, если используется в одиночку. Используйте сначала свойство "border-style", чтобы установить границы.

Пример:

p.one

{

border-style:solid;

border-width:5px;

}

p.two

{

border-style:solid;

border-width:medium;

}

Цвет Границы

Свойство border-color используется, чтобы установить цвет границы. Цвет может быть установлен с помощью:

-названия - укажите название цвета, например "red"

-RGB - укажите RGB значение, например "rgb(255,0,0)"

-Hex - укажите шестнадцатеричное значение, например "#ff0000"

Пример:

p.one

{

border-style:solid;

border-color:red;

}

p.two

{

border-style:solid;

border-color:#98bf21;

}

В CSS можно указать различные границы для разных сторон:

Пример:

p

{

border-top-style:dotted;

border-right-style:solid;

border-bottom-style:dotted;

border-left-style:solid;

}

Свойство border-style может иметь от одного до четырех значений.

border-style:dotted solid double dashed;

верхняя граница - из точек

правая граница - сплошная

нижняя граница - двойная

левая граница - пунктирная

Чтобы укоротить код, можно указать все свойства границы в одном свойстве. Оно называется стенографическим (или сокращенным) свойством - "border":

border:5px solid red;

При использовании свойства border, порядок значений таков:

border-width

border-style

border-color

Отступы

Оступы создают пространство вокруг содержания (внутри границы) элемента. На отступы влияет цвет фона элемента.

Верхний (top), правый (right), нижний (bottom) и левый (left) отступы могут быть заданы независимо, используя отдельные свойства. Стенографическое свойство также может использоваться, чтобы задать все отступы одновременно.

Возможные Значения

Длина: определяет фиксированный отступ (в пикселях, пунктах, единицах em, и т.д.)

%: определяет отступ в % от элемента-контейнера

В CSS можно указать различные отступы для разных сторон:

Примерpadding-top:25px;

padding-bottom:25px;

padding-right:50px;

padding-left:50px;

Чтобы укоротить код, можно указать все свойства отступов в одном свойстве. Оно называется стенографическим (сокращенным) свойством - "padding":

padding:25px 50px;

Свойство padding может иметь от одного до четырех значений.

padding:25px 50px 75px;

верхний отступ 25px

правый и левый отступы по 50px

нижний отступ 75px

Поля

Поле очищает пространство вокруг элемента (за пределами границы). Поля не имеет цвета фона и является полностью прозрачным.

Верхнее (top), правое (right), нижнее (bottom) и левое (left) поля могут изменяться независимо, используя различные свойства. Стенографическое свойство полей (margin) также может быть полезно, чтобы изменить все поля одновременно.

Возможные Значения

Auto: браузер устанавливает поля. Результат этого значения зависит от браузера

Длина: определяет фиксированное поле (в пикселях, пунктах, единицах em, и т.д.)

%: определяет поле в % от содержащего элемента

Можно использовать отрицательные значения, чтобы частично перекрыть содержание.

В CSS можно указывать различные поля для разных сторон:

Примерmargin-top:100px;

margin-bottom:100px;

margin-right:50px;

margin-left:50px;

Чтобы сократить код, можно указать все свойства полей в одном свойстве.оно называется стенографическим свойством - "margin":

margin:100px 50px;

Свойство margin может иметь от одного до четырех значений.

margin:25px 50px;

верхнее и нижнее поля равны по 25px

правое и левое поля равны по 50px