Списки
В этом уроке 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 - наследует значение родителя
|