Уроки CSS |
Рамки и стили в CSS |
В этом уроке на примере блоков будет показано – какие стили можно задать рамкам, ведь как правило вы встречаете на сайтах таблицы (и прочие элементы) с обычными (сплошными) рамками, но у некоторых может возникнуть необходимость сделать "нечто нестандартное".
Под стилем подразумевается в первую очередь сам тип рамки: сплошная, пунктирная, двойная и т.д. По мимо этого каждой из сторон рамки (левая, правая, низ, верх) можно задать по отдельности цвет и толщину. Следует заметить, что таким параметром, как "рамка" помимо блоков и таблиц обладают и другие элементы:, например - Заголовки (<h1></h1>) и Пункты (<li></li>). Это, кстати, применялось для создания вертикального меню в этом уроке.
И так, давайте, как уже говорилось ранее, на примере блоков рассмотрим основные типы рамок.
Создайте файл test_border.html в котором вы будете проверять работу стилей для рамок.
Пунктирная рамка – dotted;
<style>
#div_0 {
border: 6px solid Green;
border-style: dotted;
padding: 5px;
width: 400px;
}
</style>
<div id="div_0">
Пунктирная рамка блока из точек
</div>
Пунктирная рамка из коротких отрезков – dashed;
<style>
#div_1 {
border: 6px solid Green;
border-style: dashed;
padding: 5px;
width: 400px;
}
</style>
<div id="div_1">
Пунктирная рамка блока из коротких отрезков
</div>
Двойная рамка - double;
<style>
#div_2 {
border: 6px solid Green;
border-style: double;
padding: 5px;
width: 400px;
}
</style>
<div id="div_2">
Блок с двойной рамкой
</div>
Сплошная рамка - solid;
<style>
#div_3 {
border: 6px solid Green;
border-style: solid;
padding: 5px;
width: 400px;
}
</style>
<div id="div_3">
Сплошная рамка блока
</div>
Левый край рамки темнее правого - inset;
<style>
#div_4 {
border: 6px solid Green;
border-style: inset;
padding: 5px;
width: 400px;
}
</style>
<div id="div_4">
Рамка блока, у которого левый край темнее правого
</div>
Правый край рамки темнее левого - outset;
<style>
#div_5 {
border: 6px solid Green;
border-style: outset;
padding: 5px;
width: 400px;
}
</style>
<div id="div_5">
Рамка блока, у которого правый край темнее левого
</div>
А теперь, сделаем блок, у которого левая и верхняя сторона рамки будут иметь свой тип, цвет и размер:
<style>
#div_multi {
border: 6px solid Green;
border-top-style: dashed;
border-top-color: Orange;
border-left: 3px solid Red;
border-left-style: dotted;
padding: 5px;
width: 400px;
}
</style>
<div id="div_multi">
Мульти блок
<br>
<br>
У верхнего и левого края рамки свой стиль
</div>
У верхнего и левого края рамки свой стиль
◄ Предыдущий урок | Содержание | Следующий урок ► |