Задаем рамку для элемнтов
Сегодня мы приступим к изучению очередного свойства, при помощи которого мы сможем задавать рамки для различных элементов страницы сайта. Называется данное css свойство border. При помощи данного свойства мы и будем с Вами задавать рамку для элемента. Для начала давайте я покажу Вам синтаксис данного свойства, а потом начну рассказывать, какие значения может принимать данное свойство.
<html>
<head>
<title>Использование рамок border</title>
<link rel="stylesheet" href="css/styles.css" type="text/css" />
</head>
<body>
<p>Зададим рамку для абзаца.</p>
<div>
<span>Блок с рамкой</span>
</div>
</body>
</html>
В данном html коде мы создали параграф и блок, к которым мы применим различные рамки, изучив которые, Вам будет вполне достаточно, чтобы реализовывать их уже при создании своего сайта.
p {
width: 500px;
border: 1px solid #ccc;
}
div {
border-top: 3px solid #f00;
border-bottom: 5px dashed #0f0;
border-right: 2px dotted #00f;
width: 100px;
height: 100px;
}
Мы задали определенные размеры для параграфа и нашего блока. Также для параграфа мы задали свойство border, в котором прописали, что мы хотим, чтобы вокруг нашего параграфа, была рамка толщиной в один пиксель, сплошная, и задали цвет для нее. Первый параметр отвечает за толщину рамки, второй за то, как она будет выглядеть, и третий это ее цвет.
Думаю здесь все понятно, однако как задать рамку с определенной стороны, или со всех сторон различного цвета. Для этого я привел пример с блоком, вокруг которого нарисованы 3 рамки различных цветов и стилей. Для того чтобы рамка была только сверху, необходимо вместо свойства border, применить свойство border-top. Данное свойство обозначает, что мы хотим задать рамку и через дефис указываем, где именно, top - сверху, bottom - снизу, left - слева, right - справа. И напоследок расскажу о стилях рамок, solid - сплошная рамка, dashed - рамка с черточками (как дефисы), dotted - рамка из точек. Также если Вам необходимо применить рамку со всех сторон, конечно же используете просто свойство border, ведь Вам будет необходимо написать одну строчку вместо четырех, и это будет уменьшать количество вашего кода.
На этом все о рамках и их применении, данной информации Вам хватит для создания различных красочных рамок, которые Вам захочется реализовать.
