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

Неупорядоченный список создается элементами двух типов:

• <ul> - Unordered List, неупорядоченный список. Данный элемент создает, собственно, сам список, указывает его начало и конец.
• <li> - List Item, элемент списка.

Тип маркера списка по умолчанию - •. Но это положение вещей можно легко изменить. Для указания типа маркера всего списка или его отдельного элемента, ранее использовали атрибут type. Атрибут type может принимать следующие значения:

• "disc" - маркер в виде диска. Используется по умолчанию.
• "circle" - маркер в виде окружности (внутри пустой)
• "square" - маркер в виде заполненного квадрата

Данный тип списка используется для форматирования перечня действий или элементов, последовательность которых имеет значение. Например, пошаговое описание выполнения некоторого алгоритма, содержание статьи или книги (пронумерованный перечень глав).

Нумерованный список создается точно так же, как и маркированный, только вместо элемента <ul> используется элемент <ol> - Ordered List, упорядоченный список. Тип нуменации по умолчанию - арабские цифры (1,2,3…). Поменять способ нумерации можно, используя устаревший атрибут type.

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

• Свойство 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 - маркер или нумерация отсутствует

Свойство стиля list-style-type можно применять одинаково как для форматирования маркированного, так и для нумерованного списка. В принципе, можно маркированному списку (ul) дать нумерацию элементов, и наоборот - нумерованному (ol) присвоить маркер в виде диска, к примеру. Вопрос только в том, зачем? Сделав это вы грубо нарушите логику разметки.

Помимо дублирования значений отмененного атрибута type, с помощью стилей можно вообще запретить всяческую нумерацию или маркировку. Для этого используется значение none свойства list-style-type.

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

Листинг: Пример оформления списка с помощью стиля

<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 или *.png. При использовании *.gif или *.png явным преимуществом является поддержка прозрачности - маркер становится более универсальным и может быть применен на web-страницах, имеющих совершенно разные фоновые цвета или изображения.

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

Листинг: Использование графического маркера

<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 - маркеры расположенны "в тексте"

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

Все о разметке 
Предназначение разметки 
Важность синтаксически корректных и правильных документов 
Об элементах, атрибутах и объектах 
Дополнительная информация 
Обзор структуры элементов 
Общие атрибуты 
Дополнительная информация 
...

Для создания многоуровневого списка просто вложите в любой из элементов списка еще один список. Это и будет список второго уровня. Для создания третьего уровня, вложите список в элемент второго уровня. И так далее. Пример:

Листинг: Многоуровневый неупорядоченный список

<ul>
    <li>Элемент списка 1го уровня</li>
    <li>Элемент списка 1го уровня</li>
    <li>Элемент списка 1го уровня с вложенным списком
        <ul>
            <li>Элемент списка 2го уровня</li>
            <li>Элемент списка 2го уровня с вложенным списком
                <ul>
                    <li>Элемент списка 3го уровня</li>
                    <li>Элемент списка 3го уровня</li>
                    <li>Элемент списка 3го уровня</li>
                    <li>Элемент списка 3го уровня</li>
                </ul>
            </li>
            <li>Элемент списка 2го уровня</li>
            <li>Элемент списка 2го уровня</li>
        <ul>
    </li>
</ul>

При выполнении примера вы, несомненно, обратили внимание на тот факт, что типы маркеров для каждого уровня списка изменяются. Первый уровень маркируется как "disc", второй - "circle", третий и далее - "square". Проделав тот же опыт с упорядоченными списками, вы убедитесь в том, что каждый следующий уровень списка не меняет тип нумерации. Эту задачу придется решать самостоятельно.

Одним из вариантов ее решения является использование стиля для вложенных списков:

Листинг: Многоуровневый упорядоченный список

<ol style="font-weight: bold;">
    <li>Зима
        <ol style="list-style-type: lower-alpha; font-weight: normal;">
            <li>Декабрь</li>
            <li>Январь</li>
            <li>Февраль</li>
        </ol>
    </li>
    <li>Весна
        <ol style="list-style-type: lower-alpha; font-weight: normal;">
            <li>Март</li>
            <li>Апрель</li>
            <li>Май</li>
        </ol>
    </li>
    <li>Лето
        <ol style="list-style-type: lower-alpha; font-weight: normal;">
            <li>Июнь</li>
            <li>Июль</li>
            <li>Август</li>
        </ol>
    </li>
    <li>Осень
        <ol style="list-style-type: lower-alpha; font-weight: normal;">
            <li>Сентябрь</li>
            <li>Октябрь</li>
            <li>Ноябрь</li>
        </ol>
    </li>
</ol>

Для еще большего визуального отличия элементов первого и второго уровня, к внешнему списку применен полужирный шрифт (font-weight: bold;). В каждом вложенном списке жирность шрифта возвращается в норму (font-weight: normal;).