|Web Учебник | Самоучитель по HTML |Самоучитель по PHP + MySql |Основы PhotoShop |Контакты. |

Как задать цвет, стиль и размер бордюра в боксах.

В языках разметки бордюр(border), имеют только таблицы, картинки и фреймы, в некоторых случаях удается задать цвет бордюра и на этом все. Каскадные таблицы стилей дают нам больше возможностей, но обо всем по порядку.

В CSS мы можем управлять шириной рамки(бордюра) при помощи border-width, а если быть точнее то мы можем управлять толщиной каждой стороны отдельно:
border-top-width - толщина верхнего бордюра
border-right-width - толщина правого бордюра
border-bottom-width - толщина нижнего бордюра
border-left-width - толщина левого бордюра
Но может быть и сокращенная форма:
P{border-width:top right bottom left;} (верх право низ лево).
Ширина бордюра может задаваться:
цифрами DIV{border-width:5px}, от ноля до бесконечности, т.е. положительные.
thin - тонкий бордюр, DIV{border-width:thin}
medium - средний бордюр, DIV{border-width:medium}
thick - толстый бордюр, DIV{border-width:thick}
С цифрами понятно, а вот с этими значениями все зависит от браузера, но все же thin <= medium <= thick.

Так-же мы можем управлять цветом бордюра при помощи border-color или если быть точнее цветом каждой стороны:
border-top-color цвет верхнего бордюра;
border-right-color цвет правого бордюра;
border-bottom-color цвет нижнего бордюра;
border-left-color цвет бордюра с левой стороны.
Значение цвета задается как для color, т.е. одним из 16 цветов: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white или yellow, также цвета можно задавать: color:#000000, color:#AF0 , color:rgb(255,0,0) или color:rgb(100%, 0%, 0%).
Не зависимо какую цветовую схему вы выберите, браузеры все равно его переведут в color:rgb(255,0,0). Например color:lime = color:#00ff00 = color:#0F0 = color:rgb(0%, 100%, 0%), а для браузера все равно color:rgb(0,255,0), т.е. он вычислит это значение.

Если толщиной и цветом бордюра может управлять и HTML то стилем(border-style) только CSS!!!
Стилем можно управлять каждой стороной отдельно:
border-top-style стиль верхнего бордюра;
border-right-style стиль правого бордюра;
border-bottom-style стиль нижнего бордюра;
border-left-style стиль бордюра с левой стороны.
Теперь рассмотрим значения ститилей:
1)border-style:none - Это значение по умолчанию, аналогично border-width:0.
2)border-style:hidden - Тоже самое, за исключением таблиц(table), которые мы рассмотрим позже.
3)border-style:dotted - Бордюр из точек.
4)border-style:dashed - Бордюр из пунктирной линии.
5)border-style:solid - Бордюр из сплошной линии, т.е. как в HTML.
6)border-style:double - Бордюр из двойной сплошной линии, здесь нужна толщина(border-width) минимум 3пикселя.
7)border-style:groove - Бордюр выглядит как вырезанный в канве.
8)border-style:ridge - Бордюр выглядит как выступающий над канвой.
9)border-style:inset - Весь бокс выглядит как вдавленный в канву.
10)border-style:outset - Противоположен предыдущему.
Некоторые браузеры могут игнорировать значения: dotted, dashed, double, groove, ridge, inset и outset и выводит их как solid, т.е. обычным бордюром.

Все конечно это так, но все примеры выше это только принцип работы, а не механизм.
Свойство правила border подразумевает {border: размер стиль цвет;}, это правило выполняется при наличии всех трех значений и только в такой последовательности, например H1{ border: 5px double red;}, но могут быть и исключения, если эти значения предусмотрены языками разметки, например для таблицы TABLE{border: 2px}, т.е. задается только одно значения.

Для того чтобы управлять не всем бордюром, а каждой частью в отдельности существуют правила:
{border-top: размер стиль цвет;} Управление верхним бордюром;
{border-right: размер стиль цвет;} Управление бордюром справа;
{border-bottom: размер стиль цвет;} Управление нижним бордюром;
{border-left: размер стиль цвет;} Управление бордюром слева.
Эти правила можно использовать как по отдельность так и все вместе.

Исключением есть вот такое правило:
H1{
border-left: 2px double red;
border: 4px solid green;
}

Дело все в том что в CSS последнее правило имеет самый высокий приоритет, данном случае свойство border содержит в себе border-left и потому правило border-left будет проигнорировано, правильно вот так:
H1{
border: 4px solid green;
border-left: 2px double red;
}

С начала мы устанавливаем правила для всего бордюра, а потом уже для от дельных участков.

По бордюрам для элементов у меня все, разве что некоторые свойства рассмотрим когда доберемся до таблиц и прочих исключений.

 

                   Перейти к выбору следующей страницы
 

Добавить в закладки
Добиться абсолютной межбраузерности для механизма добавления в закладки не существует ни на каких языках!!! А для браузера "Chrome" не работают вообще ни какие механизмы!!!
Потому это лучше всего делать в ручную при помощи одновременого нажатия клавиш Ctrl и D , после чего нужно нажать готово(добавить). Такой "механизм работает всегда и везде!!!