Вид маркера в списке.

Если вы помните, то в чистом HTML вид маркера в списке определял атрибут type и одно из его возможных значений, в CSS данную задачу берёт на себя свойство: list-style-type которое, в свою очередь, тоже имеет свои стандартные значения определяющие вид маркера как всего списка сразу, так и его отдельного " пункта".

Значения list-style-type:

· disc - Диск. (по умолчанию для < ul>)

· circle - Полый круг.

· square - Квадрат.

· decimal - Арабские цифры. (по умолчанию для < ol>)

· lower-roman - Строчные римские цифры.

· lower-alpha - Строчные буквы.

· upper-roman - Заглавные римские цифры.

· upper-alpha - Заглавные буквы.

· none - Маркер отсутствует.

Пример:

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN" " https://www.w3.org/TR/html4/loose.dtd" >
< html>
< head>
< title> Вид маркера в списке< /title>
< /head>
< body>
< ul style=" list-style-type: square " >
< li> Пункт 1.
< li> Пункт 2.
< li style=" list-style-type: circle " > Пункт 3 (особенный).
< /ul>
< ul style=" list-style-type: upper-roman " >
< li> Пункт 1.
< li> Пункт 2.
< li> Пункт 3.
< /ul>
< /body>
< /html>

Пользовательский маркер рисунок.

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

Эту задачу выполняет свойство list-style-image которое определяет в качестве маркера списка некое графическое изображение с указанием пути к нему.

Значений данного свойства всего два:

· none - Отменяет графическое изображение маркера.

· url - Путь к файлу с рисунком маркера.

Путь к рисунку после url указывается в круглых скобках.

Вот так:

list-style-image: url(graphics/marker.gif)

- Такая запись будет говорить о том, что рядом с документом есть папка graphics в которой лежит файлик-рисунок: " " - под названьем marker.gif

Теперь попрубуем сделать так, что бы каждый пункт нашего списока был промаркерован этим рисунком. Смотрим пример:

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN" " https://www.w3.org/TR/html4/loose.dtd" >
< html>
< head>
< title> Нестандартный маркер-рисунок< /title>
< /head>
< body>
< ul style=" list-style-image: url(graphics/marker.gif) " >
< li> Первый любимый пункт.
< li> Второй любимый пункт.
< li> И не менее любимый третий пункт.
< /ul>
< /body>
< /html>