В данном учебнике используется метод-создание ссылки на внешнюю тублицу стилей

Поля

Для задания поля используем свойство margin.Предположим требуется задать поле в 10px.

h1{margin:10px;background:red;}

Свойство margin принимает любые единицы измерения длины.Также данное свойство позволяет создавать поля вокруг изображения.

img{margin:5px;}

Размер полей можно задать разный следуя порядку значений.

margin:top,right,bottom,left
h1{margin:10px 20px 15px 5px;}

Существует возможность задания поля с одной стороны.

h2{margin-left:2px;margin-bottom:5px;margin-right:9px;margin-top:16px;background:red;}

Также существует возможность задавать элементу отрицательные поля.Это может привести к тому,что блок элемента будет выходить за рамки его родителя.

Рамки

Толщина рамки
  Определяется свойством border-width,которое
может иметь значения thin,medium и thick, или числовое значение в пикселах.
p{border-width:thin;border-color:red;}Города
p{border-width:medium;border-color:red;}Города
p{border-width:thick;-color:red;}Города
Также можно задавать ширину рамки для каждой стороны отдельно ,например border-top-width

p{border-top-width:thick;border-color:red;}Города
p{border-bottom-width:thick;border-color:red;}Города
p{border-left-width:thick;border-color:red;border-style:solid;}Города
p{border-right-width:thick;border-color:red;border-style:solid;}Города


Цвет рамки
  Задается свойством border-color.Зададим условие:
элемент p имеет тонкую красную рамку сверху и снизу и толстую зеленую рамку по бокам.
p{border-style:solid;border-width:thin thick;border-color:red green;} сто лет

Сокращенный вариант записи:
h1{border-bottom-width:chick;
border-bottom-style:solid;
border-bottom-color:green;}		h1{border-bottom:thick solid green;}
Типы рамок
dotted     dashed     solid     double     
groove     ridge     inset     outset     

Отступы

Между рамкой и областью содержимиого существуют отступы.Отступы задаются свойством padding.

h2{padding:10px;}

Возможно задать отступы с одной стороны.

h2{padding-left:10px;}

Отступы можно применять к изображениям.

img{padding:20px;}

.
Hosted by uCoz