Рамки

Этот урок CSS посвятим созданию различных рамок вокруг элементов html-страницы.

Очень часто на сайтах, для улучшения вида и для разграничения объектов страницы, применяются рамки. Рамка может присутствовать не только при создании таблицы, какой нибудь кнопки, изображения. Любой элемент html-страницы может иметь рамку. Любому абзацу в тексте можно придать рамку.

Первым делом создадим стиль, который будет придавать рамку элементам html-страницы. Стиль - ramka.

За рамку отвечают три свойства:

border-width - ширина рамки (толщина линии)

border-style - стиль рамки (сплошная линия, прерывистая, линия из точек)

border-color - цвет рамки

Пример:

.ramka {

border-width:1px;

border-style:solid;

border-color:gray;

}

Но так свойства уже не записывают - очень громоздко. Пишем все свойства в одну строку через пробел.

Пример:

.ramka {

border:1px solid gray;

}

Чтобы добавить какому нибудь объекту страницы рамку прописываем в html-код этого объекта class="ramka".

Пример:

<p class="ramka">Текст абзаца</p>

Можно еще поработать над дизайном рамки. Каждой из сторон рамки можно придать индивидуальный вид.

border-bottom - нижняя сторона рамки

border-left - левая сторона рамки

border-right - правая сторона рамки

border-top - верхняя сторона рамки

Пример:

.ramka {

border-bottom:2px solid #000000;

border-left:1px dotted green;

border-right:1px dotted green;

border-top:1px solid gray;

}