Свойства BOX

Часть Il1. Cвойства BOX

Свойства Box

margin-top

Возможные значения:

[1] длина (+)

[2] процент (+)

[3] auto - автоматически

*Применимо для: всех элементов

Описание: определяет отступ сверху

ПРИМЕР:

margin-top:100

margin-right

Возможные значения:

[1] длина (+)

[2] процент (+)

[3] auto - автоматически

*Применимо для: всех элементов

Описание: определяет отступ справа

ПРИМЕР:

margin-right:100%

margin-bottom

Возможные значения:

[1] длина (+)

[2] процент (+)

[3] auto - автоматически

*Применимо для: всех элементов

Описание: определяет отступ снизу

ПРИМЕР:

margin-bottom:100em

margin-left

Возможные значения:

[1] длина (+)

[2] процент (+)

[3] auto - автоматически

*Применимо для: всех элементов

Описание: определяет отступ слева

ПРИМЕР:

margin-left:100pt

margin

Возможные значения:

[1] margin-top

[2] margin-right

[3] margin-left

[4] margin-bottom

*Применимо для: всех элементов

Описание: обобщает все вышеперечисленные свойства

ПРИМЕР:

background:100pt

padding-top

Возможные значения:

[1] длина (+)

[2] процент (+)

*Применимо для: осех элементов

Описание: отступ от верхнего border'а

ПРИМЕР:

padding-top:100pt

padding-right

Возможные значения:

[1] длина (+)

[2] процент (+)

*Применимо для: всех элементов

Описание: отступ от правого border'а

ПРИМЕР:

padding-right:100%

padding-bottom

Возможные значения:

[1] длина (+)

[2] процент (+)

*Применимо для: всех элементов

Описание: отступ от нижнего border'а

ПРИМЕР:

padding-bottom:100em

padding-left

Возможные значения:

[1] длина (+)

[2] процент (+)

*Применимо для: всех элементов

Описание: отступ от левого border'а

ПРИМЕР:

padding-top:100

padding

Возможные значения:

[1] padding-top

[2] padding-right

[3] padding-left

[4] paddung-bottom

*Применимо для: всех элементов

Описание: обобщает вышеперечисленные свойства. Можно задать несколько значений одновременно (до четырех) для разных сторон. Если установлено одно значение - задается единый отступ для всех сторон, если два - то задаются различные отступы для прилежащих сторон, а если четыре - то задаются индивидуальные отступы для всех сторон.

ПРИМЕР:

padding:100px

border-top-width

Возможные значения:

[1] длина (+)

[2] thin, medium или thick

*Применимо для: всех элементов

Описание: толщина верхнего border'а

ПРИМЕР:

border-top-width:100pt

border-right-width

Возможные значения:

[1] длина (+)

[2] thin, medium или thick

*Применимо для: всех элементов

Описание: толщина правого border'а

ПРИМЕР:

border-right-width:thick

border-bottom-width

Возможные значения:

[1] длина (+)

[2] thin, medium или thick

*Применимо для: всех элементов

Описание: толщина нижнего border'а

ПРИМЕР:

border-bottom-width:100em

border-left-width

Возможные значения:

[1] длина (+)

[2] thin, medium или thick

*Применимо для: всех элементов

Описание: толщина левого border'а

ПРИМЕР:

border-left-width:medium

border-width

Возможные значения:

[1] border-top-width

[2] border-right-width

[3] border-left-width

[4] border-bottom-width

*Применимо для: всех элементов

Описание: толщина border'ов. Можно задать несколько значений одновременно (до четырех) для разных border'ов. Если установлено одно значение - задается единая толщина для всех сторон, если два - то задаются различная толщина для прилежащих сторон, а если четыре - то задаются индивидуальная толщина для всех сторон

ПРИМЕР:

border-width: 15pt

border-color

Возможные значения:

[1] цвет (+)

*Применимо для: всех элементов

Описание: Цвет border'а. Не работает в Нетскейпе

ПРИМЕР:

border-color:green

border-style

Возможные значения:

[1] none

[2] dotted, dashed, solid, double, groove, ridge, inset, outset

*Применимо для: всех элементов

Описание: стиль border'ов. Можно задать несколько значений одновременно (до четырех) для разных border'ов. Если установлено одно значение - задается единый стиль для всех сторон, если два - то задаются различные стили для прилежащих сторон, а если четыре - то задаются индивидуальные стили для всех сторон

ПРИМЕР:

border-style: dotted groove

<UL

•  border-top

Возможные значения:

[1] border-top-width

[2] border-style

[3] border-color

*Применимо для: всех элементов

Описание: обобщает вышеперечисленные свойства для верхнего border'а

ПРИМЕР:

border-top: 100em red groove

border-right

Возможные значения:

[1] border-right-width

[2] border-style

[3] border-color

*Применимо для: всех элементов

Описание: обобщает вышеперечисленные свойства для правого border'а

ПРИМЕР:

border-right: 5pt magenta solid

border-left

Возможные значения:

[1] border-left-width

[2] border-style

[3] border-color

*Применимо для: всех элементов

Описание: обобщает вышеперечисленные свойства для левого border'а

ПРИМЕР:

border-left: 15pc coral inset

border-bottom

Возможные значения:

[1] border-bottom-width

[2] border-style

[3] border-color

*Применимо для: всех элементов

Описание: обобщает вышеперечисленные свойства для нижнего border'а

ПРИМЕР:

border-bottom: 30 orange outset

border

Возможные значения:

[1] border-width

[2] border-style

[3] border-color

*Применимо для: всех элементов

Описание: обобщает вышеперечисленные свойства

ПРИМЕР:

border: thik black double

width

Возможные значения:

[1] длина (+)

[2] процент (+)

*Применимо для: block-level и replaced элементов

Описание: ширина элемента

ПРИМЕР:

width:10%

height

Возможные значения:

[1] длина (+)

[2] процент (+)

*Применимо для: block-level и replaced элементов

Описание: высота элемента

ПРИМЕР:

height:100pt

float

Возможные значения:

[1] left - слева

[2] right - справа

[3] none - по умолчанию

*Применимо для: всех элементов

Описание: расположение элемента

ПРИМЕР:

float:right

clear

Возможные значения:

[1] left - слева

[2] right - справа

[3] both - c двух сторон

[4] none - по умолчанию

*Применимо для: всех элементов

Описание: расположение других элементов вокруг данного

ПРИМЕР:

clear:both

Законьчена 3 Часть и я Перехожу к 4й.

Перейти к 4й части