Уроки 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>

◄ Предыдущий урок

Содержание

Следующий урок ►