Создание рамок

Создание рамок

  Каждому html-тэгу предназначается своя рамка.
  Для настройки внешнего вида рамки существуют 3 свойства:
  • border-width - по ширине рамки
  • border-style - по стилю рамки
  • border-color - по цвету рамки
  Если, например, нужно создать рамку для абзаца. Первое, что надо сделать это создать правило, придумав его название, к примеру - ".ram", где указываем ширину - 2 пикселя (2px), её стиль - сплошная (solid) и цвет рамки - синий (blue).

.ram {
border-width: 2px;
border-style: solid;
border-color: blue;
}
  и присвоим его первому предложению
<html>
<head>
<title>Пример CSS</title>
</head>
<body>
<p class="ram">Запись первого предложения.</p>
<p>Запись второго предложения.</p>
<p>Запись третьего предложения.</p>
<body>
</html>

  Наша рамка будет иметь следующий вид:

Запись первого предложения.
Запись второго предложения.
Запись третьего предложения.

  Поскольку свойства border-width, border-style и border-color находятся в одной группе свойств border, то наше правило ".ram" можно записать короче

.ram {
border: 2px solid blue;
}

  Более подробно о сокращенной записи можно прочитать в разделе "Сокращенная запись свойств".
  Полный список значений, применяемых к группе свойств border, можно посмотреть в справочнике.

  Любая рамка имеет четыре стороны. Чтобы какую-либо сторону рамки сделать с нужными шириной, стилем и цветом, надо использовать нижеследующие свойства CSS:
  • border-top - для вехней стороны рамки
  • border-right - для правой стороны рамки
  • border-bottom - для нижней стороны рамки
  • border-left - для левой стороны рамки
  Например, понадобилось вместо первоначального варианта рамки сделать верхнюю и нижнюю стороны рамки в первом абзаце в виде зелёных (green) точек (dotted), диаметром в 3 пикселя (3px), левую же и правую стороны рамки сделать сплошными (solid) синими (blue), шириной 4 пикселя (4px). Для этого дополним старое правило ".ram" нужными нам свойствами:
border-bottom: 3px dotted green;
border-top: 3px dotted green;
border-left: 4px solid blue;
border-right: 4px solid blue;

  Получится следующее:
.ram {
border: 2px solid blue;
border-bottom: 3px dotted green;
border-top: 3px dotted green;
border-left: 4px solid blue;
border-right: 4px solid blue;
}

  После того, как определены рамки для всех четырех сторон, свойство border: 2px solid blue; убираем из этого правила и получаем старое правило с новыми сойствами:

.ram {
border-bottom: 3px dotted green;
border-top: 3px dotted green;
border-left: 4px solid blue;
border-right: 4px solid blue;
}

  Наша рамка примет уже новый вид:

Запись первого предложения.
Запись второго предложения.
Запись третьего предложения.