Главная » Все про CSS » Рамки в CSS и способы оформления

Рамки в CSS и способы оформления

2014-05-09 / Вр:22:22 / просмотров: 11094

В CSS есть возможность красиво оформлять рамки, увеличивать размер и делать рамку как видимой так и не видимой.
Какие свойства мы рассмотрим в сегодняшнем уроке?
Это свойства:
«border-width» - толщина рамки;
«border-color» - цвет рамки;
«border-style» - вид (стиль) рамки;
«border» - сокращенная форма оформления стиля рамки.

Толщина рамки

Толщина рамки задается в пикселях (px). Чтобы задать толщину рамки, для этого в коде CSS пропишите:

border-width:5px;

Для лучшего ориентирования посмотрите схему, где я указал размеры рамок в пикселях:

Рамки в CSS и способы оформления

Цвет рамки

Чтобы задать цвет рамки в коде CSS пропишите:

border-color:#cc0000;

Цвет задается шестизначным кодом #cc0000 либо словами red (пример: border-color: red;). Кода цветов и как они называются, можете почитать тут.

Вид (стиль) рамки

Существует восемь разновидностей рамок. По крайне мере, я знаю только восемь, это:

solid - сплошная рамка;
dotted - точечная рамка;
dashed - пунктирная рамка;
double - из сплошной двойной линии;
groove - рамка с объемной вдавленной линией;
ridge - рамка с выпуклой линией;
inset - рамка, похожая на вдавленный блок;
outset - рамка делает как бы выпуклый блок

А теперь на примере как выглядят рамки:

Вид (стиль) рамки

Итак, чтобы задать вид рамки в коде CSS пропишите:

border-style:dotted;

Теперь объединим все три свойства (так как они зависят друг от друга) и смотрим результат.

Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Рамка в css</title>
<style ENGINE="text/css">
H1 {
border-width:5px;
border-color:#cc0000;
border-style:dotted;
}
</style>
</head>
<body>
<H1>
Верь в лучшее, ожидай худшее.
</H1>
</body>
</html>

Результат:

Рамки в CSS и способы оформления

Сокращенная форма оформления стиля рамки

Я пользуюсь сокращенной формой, так как это удобно и быстро. Сейчас вы увидите разницу и поймете, почему я выбрал для себя именно этот способ.

Схема:
border:толщина рамки вид рамки цвет рамки;

border:5px double #cc0000;

Можно так:

border:5px double gold;

Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
 <title>Рамка в css</title>
 <style type="text/css">
 H1 {
 border:5px double #cc0000;
}
 </style>
 </head>
 <body>
 <H1>
 Верь в лучшее, ожидай худшее.
 </H1>
 </body>
</html>

Результат:

Рамки в CSS и способы оформления