Главное меню

Списки

В этом уроке CSS рассмотрим возможность управления внешним видом списков с помощью каскадных таблиц стилей CSS.

Для этого необходимо будет создать на странице хотя бы один ненумерованный список

Пример:

<ul>

<li>Первый пункт списка</li>

<li>Второй пункт списка</li>

<li>Третий пункт списка</li>

<li>Четвертый пункт списка</li>

<li>Пятый пункт списка</li>

</ul>

 

Еще нам понадобится изображение галочки (рисунок размером 12×12px) для установки на место маркера.

Теперь можно создать новый стиль конкретно для списка ul

Пример:

ul.list {

list-style-type:desimal;

list-style-position:inside;

list-style-image:url(путь к файлу изображения галочки);

}

Свойство list-style-type - изменяет тип маркера для каждого пункта списка. Применив это свойство можно ненумерованный список (созданный тегом <ul>) переопределить в нумерованный список.

Значения, применяемые к этому свойству:

для маркированного списка:

circle - маркер в виде кружочка

disc - маркер в виде жирной точки

square - маркер в виде квадратика

для нумерованного списка:

decimal - арабские числа (1, 2, 3, 4 ...)

decimal-leading-zero - арабские числа с нулем впереди (01, 02, 03 ...)

lower-latin - маленькие латинские буквы (a, b, c, d ...)

upper-latin - заглавные латинские буквы (A, B, C, D,...)

lower-roman - маленькие римские числа (i, ii, iii, iv, v,...)

upper-roman - большие римские числа (I, II, III, IV, V,...)

lower-greek - маленькие греческие буквы (α, β, γ, δ,...)

armenian - армянская нумерация

georgian - грузинская нумерация

none - Отменяет маркеры для списка

Свойство list-style-position - где будет размещен маркер: внутри списка или за пределами текстового блока списка.
Значения свойства list-style-position:

inside - маркер расположен внутри блока списка (текст элемента списка может обтекать маркер).

outside - маркеры размещены за пределами текстового блока списка

Свойство list-style-image - устанавливает путь к файлу с изображением, которое будем использовать как маркер списка. В нашем случае - изображение галочки.

Значения свойства list-style-image:

none - отмена изображения в качестве маркера

url - путь к файлу с изображением, которое будем использовать как маркер списка.

inherit - наследует значение родителя