Списки


назад вперед

С помощью CSS вы можете изменить:


Список

В HTML существуют два типа списков:


Различные маркеры списков

Тип маркера списка можно изменить с помощью свойства list-style-type:

Пример

ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}

ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}

Посмотреть

Значения свойства list-style-type различаются для упорядоченных и неупорядоченных списков.

Маркеры неупорядоченных списков

Значение Описание
none Нет маркеров
disc Значение по умолчанию. Маркер в виде закрашенного кружка
circle Маркер в виде незакрашенной окружности
square Маркер в виде квадрата

Маркеры упорядоченных списков

Значение Описание
armenian Традиционная армянская нумерация
decimal Числовая нумерация
decimal-leading-zero Числовая нумерация с нулем перед цифрой (01, 02, 03)
georgian Традиционная грузинская нумерация (an, ban, gan)
lower-alpha Строчные латинские буквы (a, b, c, d, e)
lower-greek Строчные греческие буквы (alpha, beta, gamma)
lower-latin Строчные латинские буквы (a, b, c, d, e)
lower-roman Римские цифры в нижнем регистре (i, ii, iii, iv)
upper-alpha Заглавные латинские буквы (A, B, C, D, E) 
upper-latin Заглавные латинские буквы (A, B, C, D, E)
upper-roman Римские цифры в верхнем регистре (I, II, III, IV, V)

Заметка: ни одна версия Internet Explorer (включая IE8) не поддерживает следующие значения свойства list-style-type: "decimal-leading-zero", "lower-greek", "lower-latin", "upper-latin", "armenian" и "georgian".


Использование изображения в качестве маркера

Для того, чтобы отображать в качестве маркера ваше изображение, используйте свойство list-style-image:

Пример

ul
{
list-style-image: url('sqpurple.gif');
}

Посмотреть

Этот пример сгенерирует различный результат в разных браузерах. В IE и Opera маркер будет отображаться чуть выше, чем в Firefox, Chrome и Safari.

Для того, чтобы маркер-изображение отображалось одинаково во всех браузерах, используйте следующее решение:

Пример

ul
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
li
{
background-image: url(sqpurple.gif);
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 14px;
}

Посмотреть

Объясним пример:


Краткая запись свойств списка

Чтобы задать все свойства списка в одной записи, используйте следующий код:

Пример

ul
{
list-style: square url("sqpurple.gif");
}

Посмотреть

При использовании краткой записи свойств списка рекомендуется соблюдать следующий порядок свойств:

Если вы не укажете какое-либо свойство, будет подставлено значение по умолчанию.


Все свойства списков — справка CSS

Число в столбце "CSS" указывает на то, в какой версии CSS появилось соответствующее свойство (CSS1 или CSS2).

Свойство Описание Значения CSS
list-style Все свойства списка одной записью list-style-type
list-style-position
list-style-image
inherit
1
list-style-image Путь к изображению-маркеру URL
none
inherit
1
list-style-position Положение маркера относительно пункта списка inside
outside
inherit
1
list-style-type Тип маркера none
disc
circle
square
decimal
decimal-leading-zero
armenian
georgian
lower-alpha
upper-alpha
lower-greek
lower-latin
upper-latin
lower-roman
upper-roman
inherit
1


Поисковой портал Jooble - позволяет в один клик найти любую интересующую вакансию по всему интернету.

Понравилась запись? Сказать "Спасибо" очень просто, поделитесь записью в социальных сетях!


назад вперед

СТАТИСТИКА



ССЫЛКИ


Подпишись на новости сайта