Учебник HTML 

Урок 11. Применяем рамки.

Рамки на сайте служат для украшения, для выделения какой-то части (абзаца, цитаты и т.п.), а также для отделения друг от друга двух разных элементов.

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

1. Цвет рамки. Задается с помощью свойства border-color.

2. Толщина рамки – border width. Указывается в пикселях или одним из трех значений: thin (тонкая), medium (средняя), thick (толстая)

3. Тип рамки – border-style. Здесь существует целых 8 значений. Описать словами их сложно, поэтому лучше продемонстрирую это на наглядных примерах. У всех приводимых ниже рамок один цвет - красный и одинаковая толщина - 5 пикселей, но разный стиль:

dotted

Этот абзац обведен рамкой dotted

dashed

Этот абзац обведен рамкой dashed

solid

Этот абзац обведен рамкой solid

double

Этот абзац обведен рамкой double

groove

Этот абзац обведен рамкой groove

ridge

Этот абзац обведен рамкой ridge

inset

Этот абзац обведен рамкой inset

outset

Этот абзац обведен рамкой outset

 

А вот пример, в котором каждой стороне рамки мы задаем свои отдельные параметры:

p {
border-style: solid;
border-width: 3px;
border-top-color: red;
border-bottom-color: blue;
border-right-color: green;
border-left-color: orange;
}

Вот как это будет выглядеть в браузере:

Этот абзац мы обводим такой вот странной рамкой.

Как нетрудно понять, мы задали абзацу сплошную рамку толщиной 3 пикселя, у которой каждая сторона окрашена в отдельный цвет. В реальности, такие разноцветные рамки используются крайне редко, но для учебы этот пример очень нагляден.

См. также

• Следующий урок: Задаем высоту и ширину.
• Предыдущий урок: Изменение отображения общего вида сайта.