Все элементы в CSS являются прямоугольными блоками. Каждый такой блок имеет зону content, в которой располагается содержимое элемента (т.е. текст, изображения и т.д.). Вокруг зоны content могут располагаться необязательные зоны: padding, border и margin.
Зона padding окружает зону content. Данная зона используется для задания величины отступа содержимого элемента (зона content) от его границы (зона border). Зона может быть разбита на четыре части, которые могут оформляться независимо друг от друга: padding-top, padding-right, padding-bottom, padding-left.
Зона border окружает зону padding. Данная зона позволяет задать элементу границу произвольной ширины, стиля и цвета. Зона может быть разбита на: border-top, border-right, border-bottom, border-left.
Зона margin окружает зону border. Данная зона позволяет задать величину внешнего отступа данного элемента от окружающих. Зона может быть разбита на: margin-top, margin-right, margin-bottom, margin-left.
Пример использования блочной модели
.ex1
{
border:10px red solid;
margin-left:50px;
margin-right:10px;
padding:15px;
}
.ex2
{
border:5px brown solid;
margin-top:30px;
margin-left:250px;
margin-right:70px;
padding:15px;
}
Свойства width и height устанавливают ширину и высоту только блока content, а не элемента целиком.
Итоговый размер элемента помимо размеров content будет включать в себя еще и размеры padding, border и margin.
Пример:
.ex1
{
width:400px;
}
.ex2
{
width:250px;
padding-left:85px;
padding-right:85px;
border-left:5px brown solid;
border-right:5px brown solid;
}
CSS свойство border-style позволяет установить стиль для границ HTML элемента.
Значения для установки стилей границ:
- None – нет границ;
- Solid - границы будут нарисованы сплошной линией;
- Dashed - границы будут нарисованы пунктирной линией;
- Dotted - границы будут нарисованы точками;
- Double - границы будут нарисованы двойной сплошной линией;
- Groove - границы будут нарисованы вдавленной;
- Radge - границы будут нарисованы выпуклой;
- Inset – вдавленный блок;
- Outset – выпуклый блок;
Пример:
.bor1
{
border-style:solid;
}
.bor2
{
border-style:dashed;
}
.bor3
{
border-style:dotted;
}
Обратите внимание: по умолчанию граница элементов всегда невидима (значение none).
Если стили линий границы не заданы, то все прочие свойства границы не повлияют на отображение блока.
Свойство border-width устанавливает ширину для всех границ в одном объявлении. Это свойство может иметь от одного до четырех значений. За исключением процентных значений вы можете использовать любые единицы измерения CSS, либо ключевые слова:
- thin (тонкая линия).
- medium (средняя линия) – это значение по умолчанию.
- thick (толстая линия).
С помощью CSS свойства border-color Вы можете задать цвет границы HTML элемента.
Цвет может быть задан следующими способами:
- С помощью имени (например 'red' задаст красный цвет);
- С помощью RGB значения (например 'rgb(255,255,255)' задаст белый цвет);
- С помощью шестнадцатеричного значения (например '#00ff00' задаст зеленый цвет).
Пример:
.bor1
{
border-style:solid;
border-color:red;
}
.bor2
{
border-style:solid;
border-color:green;
}
.bor3
{
border-style:solid;
border-color:blue;
}
В CSS существует два вида отступов: внутренние и внешние.
Внутренний отступ - это расстояние между содержимым элемента и его границей. Внешний отступ - это расстояние отступаемое с внешней стороны границы элемента.
Величина отступов может определяться в пикселях (px), сантиметрах (cm), процентах (%), em.
CSS свойство padding позволяет установить величину внутреннего отступа.
Пример:
.pad1
{
border-style:solid;
padding:20px;
}
.pad2
{
border-style:solid;
padding:10px;
}
.pad3
{
border-style:solid;
padding:5px;
}
Величина отступа может быть независимо определена для каждой стороны элемента:
Пример:
/* Отступ от содержимого элемента до его верхней границы равен 30, до левой 20, до
нижней 10 и до правой 40 пикс. */
.pad1
{
padding-top:30px;
padding-left:20px;
padding-bottom:10px;
padding-right:40px;
}
С помощью CSS свойства margin Вы можете задать величину внешнего отступа.
Пример:
.mar1
{
margin:25px;
}
.mar2
{
margin:10px;
}
.mar3
{
margin:5px;
}
Величина внешнего отступа также может быть задана отдельно для каждой стороны элемента:
Пример:
/* Отступ с верхней стороны элемента равен 20, снизу 40, слева 70, а справа
10 пикселям */
.mar1
{
margin-top:20px;
margin-bottom:40px;
margin-left:70px;
margin-right:10px;
}
Для того, чтобы сократить размер кода Вы можете определять величину отступа для каждой стороны элемента используя краткую форму записи свойств.
Пример:
/* Отступ от содержимого до границы элемента сверху будет равен 60, справа 20,
снизу 40, а слева 50 пикселям */
.pad1
{
border:2px solid;
padding:60px 20px 40px 50px;
}
/* Отступ от содержимого до границы элемента сверху будет равен 40, слева и
справа 30, а снизу 10 */
.pad2
{
border:2px solid;
padding:40px 30px 10px;
}
/* Отступ от содержимого до границы элемента сверху и снизу будет равен 40,
а слева и справа 30 */
.pad3
{
border:2px solid;
padding:40px 30px;
}
Краткая форма записи может также использоваться с внешними отступами:
Пример:
/* Внешний отступ сверху элемента будет равен 50, справа 20, снизу 40 и слева 50
пикселям */
.mar1
{
margin:50px 20px 40px 50px;
}
/* Внешний отступ сверху элемента будет равен 30, слева и справа 40, а снизу 50
пикселям */
.mar2
{
margin:30px 40px 50px;
}
/* Внешний отступ сверху и снизу элемента будет равен 30, а слева и справа 50
пикселям */
.mar3
{
margin:30px 50px;
}
Создать структуру строения сайта:
