CSS стили рамок

Сегодня мы будем рассматривать одну из очень интересных возможностей каскадных таблиц, а именно, стили рамок css.

Для начала надо понять одну простую вещь, а именно то, что любой элемент на html странице, имеет так называемый невидимый контейнер. Этому контейнеру также можно придавать различные стили через CSS, ну и конечно мы можем придавать ему всякие рамки. Эти рамки очень могут вам пригодится тогда, когда вы например будете верстать сайт, очень удобно бывает выделить рамкой нужный элемент, для того чтобы точно знать к примеру его внутренний и внешний отступ. Ну в общем вы поняли, CSS стили рамок, вещь нужная.

Этот урок будет наверно весьма коротким, потому что для того чтобы задавать рамки, надо знать не больше трёх основных значений, а особого ума для этого не надо. Что-же это за значения такие?, спросите вы. Ладно, не буду вас томить, рассказываю. Вот эти три главных значения для стилей рамок:

border-width - Задаёт ширину рамки.

border-style - Придаёт внешний вид рамке, например сплошная, точечная или из черточек.

border-color - Этим значением мы будем придавать нашим рамкам стилевой цвет.

Так, базовые знания для стилей рамок CSS вы получили, осталось теперь закрепить их на практике. Допустим вы создали сайт и уже пишете для него контент, вдруг перед вами встала одна задача, вам нужно выделить заголовок стильной рамкой, давайте смотреть на реализацию этой задачи:

.frame {border-width:2px;
border-style:solid;
border-color:red;
}

Из вышеприведённого примера мы можем видеть, все три значения загнаны в класс "frame", эти значения предполагают ширину рамки в два пикселя (border-width:2px); стиль рамки сплошной (border-style:solid); цвет красный (border-color:red);
Теперь посмотри что у нас получилось:

В этом уроке мы изучаем стили рамок CSS

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

.frame {border: 2px solid red;}

Таким образом у нас получилась та же стилевая рамка, только правило для неё, намного короче прежнего.

У рамок еще могут быть и другие внешние стили, заместо "solid", можно писать "dotted" - это точечная рамка, еще есть "dashed" - это рамка из чёрточек, есть и другие, только они поддерживаются не всеми браузерами.

Можно также придавать относительные рамки, например сделать часть рамки с какой нибудь из сторон, для этого надо знать следующее:

border-top; - Рамка, с видимой верхней границей.

border-right; - С правой линией.

border-left; - С левой границей.

border-bottom; - С нижней линией.

Исходя из усвоенных выше знаний, для закрепления материала, давайте создадим необычную рамку, разную со всех сторон, как по цвету так и по стилю.

.ramka {border-top: 2px dashed #000000;
border-right: 3px dotted green;
border-bottom: 1px solid blue;
border-left: 3px dotted orange; }

Чтобы создать такое чудо, надо в совершенстве знать CSS стили рамок 

Ну вот и закончился еще один очередной урок, здесь мы прошли почти всё что встречается на практике со стилями рамок в CSS, если вы действительно всерьёз заинтересовались этой темой и хотите еще глубже вникнуть в неё, то я как уже где то писал, представленные на нашем сайте видеокурсы, очень помогут вам в этом деле. Желаю всем удачи.