Пользовательский маркер рисунок.
Наиболее интересным 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" "http://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>
Стиль обтекания маркера списком.
Свойство list-style-position указывает браузеру на то, как следует отображать текст в списке относительно его маркеров. По умолчанию маркеры находятся в стороне от текста списка, но можно сделать так, что они будут обтекаться текстом.
Возможных значений свойства list-style-position всего два:
outside- Маркер находится в стороне от списка.(по умолчанию)
inside- Маркер обтекается текстом.
Пример для наглядности:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head> <title>Обтекание маркера текстом</title> <style type="text/css"> body { margin: 0px; background: #e8e8e8 } div { width: 300px; height: 200px; float:left; margin: 10px; padding: 10px; border: RGB(25, 125, 25) 2px ridge; background: #fff } h3 { text-align: center } </style> </head> <body> <div> <h3>Здесь маркер обтекается текстом:</h3> <ul style="list-style-position:inside"> <li>Пункт, в котором говорится о том, что хорошо бы было сделать, что-то там, где это что-то еще не сделано. <li>Пункт, в котором говорится о том, что неплохо бы было сделать, нечто там, где это нечто еще не сделано. </ul> </div> <div> <h3>А здесь нет:</h3> <ul style="list-style-position:outside"> <li>Пункт, в котором говорится о том, что хорошо бы было сделать, что-то там, где это что-то еще не сделано. <li>Пункт, в котором говорится о том, что неплохо бы было сделать, нечто там, где это нечто еще не сделано. </ul> </div> </body></html>
list-style
Базовое свойство list-style используется, когда стилю списка необходимо одновременно присвоить несколько значений. Может иметь от одного до трёх значений из свойств применяемых к стилю списка, в любой последовательности через пробел.
Все три свойства и их возможные значения мы рассмотрели выше, поэтому повторятся не буду, а просто перечислю их:
list-style-type- Вид маркера в списке
list-style-image- Нестандартный маркер рисунок
list-style-position- Стиль обтекания маркера списком
Если в голове остались какие то пробелы можете вернуться и перечитать.
Пример:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head> <title>Стиль списка</title> </head> <body> <div style="width: 250px;"> <ul style="list-style: url(graphics/marker.gif) inside"> <li>- Этот список использует в качестве маркера рисунок. <li>- Текст этого списка обтекает маркер. </ul> </div> </body></html>