Стили для форматирования списков

Помимо стилевых правил для форматирования шрифта и цвета символов, рассмотренных на прошлом занятии, к списку и его отдельным элементам можно применить ряд специальных правил. Эти правила отвечают за назначение маркера или нумерации элементов списка, а, также, могут управлять положением маркера по отношению к элементу.

Свойство list-style-type

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

• disc - маркировка в виде дика (замена type="disc")

• circle - маркировка в виде окружности (замена type="circle")

• square - маркировка в виде квадрата (замена type="square")

• decimal - арабская (десятичная) нумерация (замена type="1")

• upper-roman - римская нумерация в верхнем регистре (замена type="I")

• lower-roman - римская нумерация в нижнем регистре (замена type="i")

• upper-alpha - алфавитная нумерация в верхнем регистре (замена type="A")

• lower-alpha - алфавитная нумерация в нижнем регистре (замена type="a")

• none - маркер или нумерация отсутствует

Пример применения стиля для нумерации списка в виде малых букв латинского алфавита:

Пример оформления списка с помощью стиля
<ol style="list-style-type: lower-alpha;"> <li>Элемент списка 1</li> <li>Элемент списка 2</li> <li>Элемент списка 3</li> <li>Элемент списка 4</li> <li>Элемент списка 5</li> </ol>

Свойство list-style-image

Еще одним эффектным способом визуального оформления списков является возможность использования графического маркера элемента списка. То есть, вместо использования нескольких скучных стандартных маркеров, вы сможете использовать собственноручно созданное изображение.

Изображение должно быть создано в формате *.jpg, *.gif. Предположим, что вы хотите использовать в качестве маркера изображение "marker.gif", размерами 10х16 пикселей, расположенное в той же папке, что и HTML страница. Код для достижения поставленной цели будет иметь следующий вид:

Использование графического маркера
<ul style="list-style-image: url(marker.gif);"> <li>Элемент списка 1</li> <li>Элемент списка 2</li> <li>Элемент списка 3</li> <li>Элемент списка 4</li> <li>Элемент списка 5</li> </ul>

Если в стиле для списка одновременно указать и стандартный тип маркера и графический маркер, то сработает только графический, так как он имеет больший приоритет.

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

Для отмены графического маркера используйте свойство list-style-image со значением none:

... <li style="list-style-image: none;"> ...

Свойство list-style-position

Свойство стиля list-style-position позволяет управлять положением маркера или номера элемента по отношению к тексту элемента списка. Возможные значения:

• outside - маркеры расположенны снаружи по отношению к тексту (по умолчанию)

• inside - маркеры расположенны "в тексте"

Пример:

Листинг №2.1.5: Управление положением маркера

<ul style="list-style-position: outside;"> <li>Для демонстрации этого примера необходимо, чтобы текст элемента списка не помещался в окно браузера и возникал перенос. Если такового не имеется - уменьшите немного ширину окна.</li> <li>Для демонстрации этого примера необходимо, чтобы текст элемента списка не помещался в окно браузера и возникал перенос. Если такового не имеется - уменьшите немного ширину окна.</li> </ul> <ul style="list-style-position: inside;"> <li>Для демонстрации этого примера необходимо, чтобы текст элемента списка не помещался в окно браузера и возникал перенос. Если такового не имеется - уменьшите немного ширину окна.</li> <li>Для демонстрации этого примера необходимо, чтобы текст элемента списка не помещался в окно браузера и возникал перенос. Если такового не имеется - уменьшите немного ширину окна.</li> </ul>

Посмотрите на результат - разница очевидна.

Многоуровневые списки.

Многоуровневые списки используют в тех случаях, когда требуется отразить иерархическую структуру, подчинение одних элементов другим. Наиболее ярким примером многоуровневого списка может служить оглавление сложного документа: