Списки в CSS: подробное рассмотрение

Параметр 'list-style'

Данный параметр определяет все характеристики списка в одном объявлении.

Наследование:да.

Может принимать следующие значения:

Значение	Описание
list-style	Задает характеристики списка
list-style-type
list-style-position
list-style-image

Примеры:

ol{list-style: square inside url("www.intuit.ru/departament/image.gif")} ul{list-style: circle inside}

Параметр 'list-style-image'

Данный параметр позволяет заменить маркер элемента списка указанным изображением. Необходимо определять параметр "list-style-type" на тот случай, если изображение будет недоступно.

Наследование:да.

Может принимать следующие значения:

Значение	Описание
url	Путь доступа к изображению
None	Изображение не выводится

Пример:

ul{list-style-image: url("www.intuit.ru/speciality/image.gif");list-style-type: square}

Параметр 'list-style-position'

Параметр определяет способ размещения маркера элемента списка.

Наследование:да.

Может принимать следующие значения:

Значение	Описание
inside	Маркер смещен внутрь текста
outside	Маркер располагается слева от текста

Пример:

ul{list-style-position: outside}

Параметр 'list-style-type'

Данный параметр задает тип маркера элемента списка.

Наследование:да.

Может принимать следующие значения:

Значение	Описание
none	Без маркера
disc	Маркер — закрашенный круг
circle	Маркер — окружность
square	Маркер — закрашенный квадрат
decimal	Маркер — число
decimal-leading-zero	Маркер — число с добавленным ведущим нулем (01, 02, 03 и т.д.)
lower-roman	Маркер — римские цифры, представленные строчными буквами (i, ii, iii, iv, v и т.д. )
upper-roman	Маркер — римске цифры, представленные прописными буквами (I, II, III, IV, V и т.д.)
lower-alpha	Маркер — латинские строчные буквы (a, b, c, d, e и т.д.)
upper-alpha	Маркер —- латинские прописные буквы (A, B, C, D, E и т.д.)
lower-greek	Маркер — греческие прописные буквы (альфа, бета, гамма и т.д.)
lower-latin	Маркер — латинские строчные буквы (a, b, c, d, e и т.д.)
upper-latin	Маркер — латинские прописные буквы (A, B, C, D, E и т.д.)
hebrew	Традиционная еврейская нумерация
armenian	Традиционная армянская нумерация
georgian	Традиционная грузинская нумерация (an, ban, gan, и т.д.)
cjk-ideographic	Маркер — простые идеографические числа
hiragana	Маркер — a, i, u, e, o, ka, ki, и т.д.
katakana	Маркер — A, I, U, E, O, KA, KI и т.д.
hiragana-iroha	Маркер — i, ro, ha, ni, ho, he, to и т.д.
katakana-iroha	Маркер — I, RO, HA, NI, HO, HE, TO и т.д.

Примеры:

ol{list-style-type: circle} ul{list-style-type: decimal}

Лекция 10. Размеры элементов в CSS

Данные параметры CSS позволяют управлять высотой и шириной элемента, увеличением интервала между двумя строками.

Пример:

В примере показано, как увеличить интервал между строками. <html><head></head> <body><div>Стандартный интервал между строками.<br> Стандартный интервал между строками. </div><br> <div style="line-height: 0.4cm">Уменьшенный интервал между строками.<br> Уменьшенный интервал между строками. </div><br> <div style="line-height: 0.9cm">Увеличенный интервал между строками.<br> Увеличенный интервал между строками. </div> </body></html>