Опубликован: 31.10.2006 | Уровень: для всех | Доступ: платный
Лекция 9:

Списки в CSS

< Лекция 8 || Лекция 9: 12 || Лекция 10 >

Параметры списков в CSS

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

Поддерживаются следующими браузерами: Internet Explorer, Firefox, Netscape.

Параметр Описание Значения IE F N W3C
list-style Параметр для задания всех характеристик списка в одном объявлении list-style-type 4 1 6 1
list-style-position
list-style-image
list-style-image Задает изображение в качестве маркера элемента списка none 4 1 6 1
url
list-style-position Задает размещение в списке маркера элемента списка inside 4 1 6 1
outside
list-style-type Задает тип маркера элемента списка none 4 1 4 1
disc
circle
square
decimal
decimal-leading-zero
lower-roman
upper-roman
lower-alpha
upper-alpha
lower-greek
lower-latin
upper-latin
hebrew
armenian
georgian
cjk-ideographic
hiragana
katakana
hiragana-iroha
katakana-iroha
marker-offset auto 1 7 2
length

Списки в 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
}
< Лекция 8 || Лекция 9: 12 || Лекция 10 >
Федор Антонов
Федор Антонов

Здравствуйте!

Записался на ваш курс, но не понимаю как произвести оплату.

Надо ли писать заявление и, если да, то куда отправлять?

как я получу диплом о профессиональной переподготовке?

Илья Ардов
Илья Ардов

Добрый день!

Я записан на программу. Куда высылать договор и диплом?

Данила Некрасов
Данила Некрасов
Россия, Пермь, ПНИПУ
Сергей Федоров
Сергей Федоров
Россия