Как всегда CSS предоставляет большие возможности при создании списков, чем только HTML.
Собственно свойств для списков существует всего три:
list-style-type - определяет внешний вид маркера или нумератора.
list-style-image - определяет пользовательское изображение маркера.
list-style-position - определяет положение маркеров относительно блока.
Рассмотрим их на примерах.
list-style-type
Для маркерованных списков ничего нового, все теже значения, что и в HTML:
disk - закрашенный кружок.
circle - незакрашенный кружок.
square - закрашенный квадрат.
Давайте посмотрим, как они выглядят в браузере. Для этого создадим три одинаковых списка, но каждому в стилях зададим
свое значение свойства. Итак, код html-страницы:
Для нумерованных списков перечень более широк, чем в HTML, но не все значения поддерживаются всеми браузерами.
Поэтому пока рекомендуется использовать только следующие:
decimal - десятичные числа.
lower-roman - строчные римские цифры.
upper-roman - прописные римские цифры.
lower-alpha - строчные латинские буквы.
Давайте посмотрим, как они выглядят в браузере. Для этого создадим четыре одинаковых списка, но каждому в стилях зададим
свое значение свойства. Итак, код html-страницы:
Это свойство позволяет задать свой вид маркера. Для этого сначала надо создать картинку с маркером.
Предположим у нас есть вот такая картинка: и мы хотим, чтобы она была маркером.
Создадим список:
CSS списки
Первый пункт
Второй пункт
Третий пункт
На странице style.css зададим стиль:
#spisok{
list-style-image:url(marker.gif);
}
Обратите внимание, для данного примера картинка лежит в той же папке, что и наши страницы. Если же поместить картинку, например,
в папку images, то и путь к ней надо указать, как list-style-image:url(images/marker.gif);. В общем, где бы
не лежала картинка, вы должны правильно указать путь к ней.
Результат:
Первый пункт
Второй пункт
Третий пункт
Как вы понимаете, на внешний вид вашего списка будет влиять размер картинки. Помните об этом.
list-style-position
Это свойство определяет положение маркера: внутри блока - inside или снаружи - outside.
Понятнее будет на примере. Создадим два списка, расположенных в div-е:
Вот собственно и все, наши уроки подошли к концу. Мы рассмотрели все свойства CSS. Теперь ваша задача научиться их
применять для решения конкретных задач. В этом вам поможет раздел css - полезные навыки.