Свойства Color и Background

color

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

[1] цвет (+)

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

Описание: цвет

ПРИМЕР:

color:#f00000

backgroung-color

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

[1] цвет (+)

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

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

ПРИМЕР:

background-color:#f00000

backgurond image

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

[1] none - нет

[ 2]URL(+)

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

Описание: фоновое изображение

ПРИМЕР:

background-image;URL(cooi.gif)

background-repeat

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

[1] repeat -размножает фоновое изображение во всех направлениях

[2] repeat-x - размножает фоновое изображение горизонтально

[3] гереat-у - размножает фоновое изображение вертикально

[4] no-repeat - не повторяющееся изображение

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

Описание: повторения фонового изображения

ПРИМЕР:

background-repeat:no-repeat

background-attachment

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

[1} scroll - фоновое изображение скролится всеете с содержанием документа

[2] fixed - не скролится. Фиксируется в одном месте. Не работает в Нетскейпе

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

Описание: возможность прокрутки фонового изображения

ПРИМЕР:

background-attachment:fixed

background-position

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

[1] процент от ширины + процент от высоты (+)

[2] top, middle, bottom - одно из значений

[3] left, center, right - одно из значений

[4] расстояние от левого края + расстояние от вершины

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

Описание: положение фонового изображения (работает с background-repeat равным repeat-x, repeat-y или no-repeat)

ПРИМЕР:

background-position:50%0%

background

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

[1] background-color

[2] background-image

[3] background-position

[4] background-attachment

[5] background-repeat

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

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

ПРИМЕР:

background:no-repeat black fixed 50%0%

Свойства Box

margin-top

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

[1] длина (+)

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

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

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

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

ПРИМЕР:

margin-top: 100

margin-right

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

[1] длина (4)

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

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

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

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

ПРИМЕР:

margin-right 100%

margin -bottom

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

[1] длина (+)

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

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

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

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

ПРИМЕР:

margin-bottom: l00em

margin-left

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

[1] длина (+)

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

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

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

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

ПРИМЕР:

margin-left: l00pt

margin

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

[1] margin-top

[2] margin-right

[3] margin-left

[4] margin-bottom

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

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

ПРИМЕР:

background: l00pt

padding-top

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

[1] длина(+)

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

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

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

ПРИМЕР:

padding-top: l00pt

padding-right

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

[1] длина(+)

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

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

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

ПРИМЕР:

padding-right:100%

border-top-width ^Л

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

[1] длина (+)

[2] thin, medium или thick

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

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

ПРИМЕР:

border-top-width: l00pt

border-right-width

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

[1] длина (+)

[2] thin, medium или thick

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

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

ПРИМЕР:

border-right-width:thick

border-bottom -width

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

[1] длина (+)

[2] thin, medium или thick

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

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

ПРИМЕР:

border-bottom -width: l00em

border-left-width

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

[1] длина (,+)

[2] thin, medium или thick

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

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

ПРИМЕР:

border-left-width:medium

border-width

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

[1] border-top-width

[2] border-right-width

[3] border-left-width

[4] border-bottom-width

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

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

для разных border'oв. Если установлено одно значение - задается единая толщина для всех

сторон, если два - то задаются различная толщина для прилежащих сторон, а если четыре -

то задаются индивидуальная толщина для всех сторон

ПРИМЕР:

border-width: 15pt

border-color

Возможные значения:' [1]цвет(+)

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

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

ПРИМЕР:

border-color: green

border-style

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

[1] none

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

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

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

ПРИМЕР-

border-style: dotted groove border-top

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

[1] border-top-width

[2] border-style [3] border-color

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

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

ПРИМЕР:

border-top: l00em red groove

border-right

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

[1] border-right-width

[2] border-style border-color

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

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

ПРИМЕР:

border-right: 5pt magenta solid

border-left

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

[1] border-left-width

[2] border-style

[3] border-color

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

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

ПРИМЕР:

border-left: 15pc coral inset border-bottom

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

[1] border-bottom-width

[2] border-style

[3] border-color

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

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

Пример:

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 - с двух сторон

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

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

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

ПРИМЕР:

сlear:both

Классификация

display

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

[1] попе - не отображается

[2] block - разбивает строку до и после элемента (т.е. элемент не может находиться на однойлинии с другими элементами)

[3] inline - не разбивает строку

[4] list-item - разбивает линию строку до н после элемента + добавляет маркер как у list-item элементов

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

Описание: определяет, как будет отображаться элемент

ПРИМЕР:

display:none

white-space

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

[1] normaJ - "сжимает" несколько подряд идущих пробелов в один

[2] рге - допускает отображение нескольких подряд идущих пробелов

[3] nowrap - не допускает перенос строки без тera<BR>

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

Описание: определяет, как будут отображаться пробелы между элементами

ПРИМЕР:

white-space:поwrap

list-style-type

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

[1] disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha или upper-alpha

[2] none - никакой

*Применимо для: элементов со значением display равным list-item

Описание: определяет вид list-item маркера. Если значение list-style-image равно попе или не

уточнено

ПРИМЕР:

list-style-type:lower-alpha

list-style-image

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

[1] none - нет

[2]URL(+)

*Применимо для: элементов со значением display равным list-item

Описание: задает вид list-item маркера в виде картинки

ПРИМЕР:

list-sty le-image:URL(cool.gif)

list-style-position

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

[1] inside - при переносе следующие строки будут отображаться без отступа

[2] outside - по умолчанию

*Применимо для: элементов со значением display равным list-item

Описание: определяет положение маркера в зависимости от list item элемента

ПРИМЕР:

list-sty le-position:inside

list-style

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

[1] list-style-type

[2] list-style-position

[3] list-style-image

*Применимо для: элементов со значением display равным list-item

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

ПРИМЕР:

list-style:inside

Не нашли, что искали? Воспользуйтесь поиском: