BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

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

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

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

В 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" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Рамка в css</title>
<style type="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" "http://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 и способы оформления

На этом все!

 

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Получай обновления блога!!! Подпишись:

Популярные статьи:

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Subscribe without commenting

Метки: ,

Мои цели на 2017 год:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Довести количество статей до 750

4). Создать портфолио и мини интернет-магазин шаблонов

5). Создать книгу

6). Довести количество статей до 800

7). Добиться посещаемости 3000 человек/сутки

8). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 704
Количество страниц на блоге: 20
Количество рубрик на блоге: 27
Количество меток на блоге: 71
Количество комментариев на блоге: 3821