Войти на сайт
Регистрация
Обратная связьНаш магазинБлог администрации
Российская школа CSS - Справочник CSS, уроки CSS, jQuery
Оптимизатор CSS Конструктор CSS
Российская школа CSS » Справочник CSS » Глава 5. Границы объектов
Не нравится(-) 17 Нравится(+)
2-07-2008, 01:53 - GZ Design (Справочник CSS)
Глава 5. Границы объектов

Следующая глава нашего справочника CSS посвящена стилям, применяемым для оформления границ объектов...


border – атрибут, задающий стили границ объектов. С его помощью, можно настроить их толщину, цвет и исполнение.
Все стили для границ, чаще всего, пишутся именно внутри этого атрибута, без использования дополнительных. Это делается следующим образом:
border:2px solid #333;

Таким образом, мы задали границу для объекта со следующими её параметрами: ширина – 2 пикселя, исполнение – сплошная линия, цвет – тёмно-серый (#333333).
Все атрибуты типа Border совместимы с Internet Explorer, начиная с версии 4.0.
Теперь обо всех них подробнее:

border-color – атрибут, который задаёт цвет границ объекта. Может быть задан одним, двумя, тремя, или четырьмя значениями:

- Если выставлено одно значение, то такой цвет будет задан для всех границ;
- Если выставлено два значения, то первое значение – верхняя и нижняя границы, а второе – левая и правая;
- Если выставлено три значения, то первое задаёт цвет верхней границы, второе – левой и правой, третье – нижней.

Также, цвет границ можно задать с помощью дополнительных атрибутов:

border-top-color – задаёт цвет верхней границы;
border-bottom-color – задаёт цвет нижней границы;
border-left-color – задаёт цвет левой границы;
border-right-color – задаёт цвет правой границы;


Примеры:
Зададим цвет левой границы #e2e2e2:
border-left-color: #e2e2e2;

Совместимость:
Поддерживается Internet Explorer начиная с версии 4.0.

--------------------------------------------------




border-style – атрибут, который задаёт тип границ объекта. Задаётся с помощью установленных значений:

none – отсутствие границы (значение по умолчанию);
dashed – штриховая граница;
dotted – точечная граница;
double – двойная сплошная линия;
groove – трёхмерная вдавленная граница;
ride – трёхмерная выпуклая граница;
solid – сплошная одинарная граница;
inset – трёхмерная «ступенька вверх»;
outset – трёхмерная «ступенька вниз»;

Также, тип границ можно задать с помощью дополнительных атрибутов:

border-top-style – задаёт тип верхней границы;
border-bottom-style – задаёт тип нижней границы;
border-left-style – задаёт тип левой границы;
border-right-style – задаёт тип правой границы;


Примеры:
Зададим тип левой границы простой сплошной линией:
border-left-style: solid;

Совместимость:
Поддерживается Internet Explorer начиная с версии 4.0.

--------------------------------------------------




border-width – атрибут, который задаёт толщину границ объекта. Может быть задан одним, двумя, тремя, или четырьмя значениями:

- Если выставлено одно значение, то такой толщина будет задана для всех границ;
- Если выставлено два значения, то первое значение – верхняя и нижняя границы, а второе – левая и правая;
- Если выставлено три значения, то первое задаёт толщину верхней границы, второе – левой и правой, третье – нижней.

Также толщину можно задать с помощью установленных значений:

thin – тонкая линия;
medium – средняя линия;
thick – толстая линия;

Толщину границ можно задать с помощью дополнительных атрибутов:

border-top-width – задаёт ширину верхней границы;
border-bottom-width – задаёт ширину нижней границы;
border-left-width – задаёт ширину левой границы;
border-right-width – задаёт ширину правой границы;


Примеры:
Зададим ширину левой границы в 5 пикселей:
border-left-width: 5px;

Совместимость:
Поддерживается Internet Explorer начиная с версии 4.0.



-----------------------------------
Правила копирования материалов статьи
Вернуться к содержанию


Уважаемый посетитель Российской школы CSS! Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. Спасибо за внимание!



---------------------------------------
---------------------------------------

Похожие публикации

Публикацию посмотрели 11397 раз(а) и написали 6 комментариев.
Подписаться на канал RSS Добавить сайт в закладки

«    Август 2017    »
ПнВтСрЧтПтСбВс
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
© 2008-2017 Copyright, Российская школа CSS. CSS-School.RU. Все права защищены.
Designed by GZ Design, OniX © 2010 - 2017
Valid XHTML 1.0 Transitional Правильный CSS!