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

Дата добавления: 2015-07-09; просмотров: 880; Нарушение авторских прав

Если вы помните, то в чистом 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" "http://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 указывается в круглых скобках.

Вот так:

<== предыдущая лекция	\|	следующая лекция ==>
Z-index	\|	List-style-image: url(graphics/marker.gif)