Рамки
Этот урок 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;
}
|