Маркированные и нумерованные списки

Маркированный список

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

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

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

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

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

Пример использования:

<ul type="circle">
 <li>Элемент списка 1</li>
 <li>Элемент списка 2</li>
 <li type="disc">Элемент списка 3 (особо отмеченный!)</li>
 <li>Элемент списка 4</li>
 <li>Элемент списка 5</li>
</ul>

Внимание! На данный момент атрибут type считается устаревшим и должен быть заменен таблицами стилей.

Нумерованный список

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

Нумерованный список создается точно так же, как и маркированный, только вместо элемента <ul> используется элемент <ol> - Ordered List, упорядоченный список.

Тип нуменации по умолчанию - арабские цифры (1,2,3...). Поменять способ нумерации можно, используя устаревший атрибут type, который может принимать следующие значения:

• "1" - нумерация арабская: 1, 2, 3, ... 10, 11, ...
• "A" - нумерация латинским алфавитом (верхний регистр): A, B, C, ... AA, AB, ...
• "a" - нумерация латинским алфавитом (нижний регистр): a, b, c, ... aa, ab, ...
• "I" - нумерация римскими цифрами (верхний регистр): I, II, III, IV, ...
• "i" - нумерация римскими цифрами (нижний регистр): i, ii, iii, iv, ...

Список можно начать не с "1" или "a", а, например и "3" или "c". Для этого используется отмененный атрибут start. В качестве его значения используется число, задающее смещение номера первого элемента:

<ol start="3" type="3">
...

В результате получим список, имеющий нумерацию в виде малых латинских букв, начинающийся с номера "c" и продолжающийся "d", "e"и т.д.

Кроме того, нумерацию списка можно разорвать, а затем продолжить с любого номера. В этом случае используется отмененный атрибут value элемента списка li. Атрибут value записывается в том элементе, с которого требуется продолжить нумерацию:

<ol type="I">
 <li>Элемент списка 1</li>
 <li>Элемент списка 2</li>
 <li>Элемент списка 3</li>
 <br /> ...
 <li value="10">Элемент списка 4</li>
 <li>Элемент списка 5</li>
</ol>

Это может быть полезным, если необходимо разместить на странице общеизвестный список, такой как список дней недели или месяцев. Такой список не имеет смысла приводить полностью, достаточно указать несколько первых и несколько последних элементов. Для смещения нумерации последних элементов и используют атрибут value.

В принципе, необходимость использования атрибутов start и value не так уж велика. Очевидно именно по жтой причине их дальнейшая поддержка спецификацией прекращена, а соответствующей замены в CSS не существует.

Пример использования:

<ol type="I">
 <li>Элемент списка 1</li>
 <li>Элемент списка 2</li>
 <li>Элемент списка 3</li>
 <li>Элемент списка 4</li>
 <li>Элемент списка 5</li>
</ol>

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

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

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

Резюме

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