Вид маркера в списке.
Если Вы помните, то в чистом 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 указывается в круглых скобках.
Вот так:
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>
Смотреть пример
Дата добавления: 2015-11-04; просмотров: 674;