Глава 13. Стиль списка
В 9-й главе учебника HTML мы с Вами уже знакомились с таким немаловажным элементом как список и действительно хорошее средство для структуризации данных. Однако списки организованные 1 средствами HTML весьма убоги в плане дизайна и не радуют глаз человека.
В этой главе мы немного поколдуем над списками с помощью свойств CSS. Будем говорить о стиле списка: ul, ol, li, dl, dt, dd - изложенная в "гл.9. Списки".
Вид маркера в списке
В чистом HTML вид маркера в списке определял атрибут type и 1 из его возможных значений, в CSS данную задачу берёт на себя свойство list-style-type, которое имеет свои стандартные значения, определяющие вид маркера как всего списка сразу, так и его отдельного пункта.
Значения list-style-type:
Пример:
<title>Вид маркера в списке</title>
<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>
Пользовательский маркер рисунок
Наиболее интересным CSS инструментом для работы со стилем списка является возможность вместо стандартных маркеров, описанных выше, использовать свои собственные нестандартные изображения (небольшие рисунки, вписывающиеся в общий дизайн сайта).
Эту задачу выполняет свойство list-style-image, которое определяет в качестве маркера списка некое графическое изображение с указанием пути к нему.
Значений данного свойства всего 2:
Путь к рисунку после url указывается в круглых скобках.
Вот так: list-style-image:url(graphics/marker.gif) (такая запись будет говорить о том, что рядом с документом есть папка graphics, в которой лежит файлик-рисунок marker.gif.
Теперь попрубуем сделать так, чтобы каждый пункт нашего списка был промаркерован этим рисунком.
Пример:
<title>Нестандартный маркер-рисунок</title>
<ul style=list-style-image:url(graphics/marker.gif)>
<li>1 пункт;
<li>2 пункт;
<li>3 пункт.
</ul>
Стиль обтекания маркера списком
Свойство list-style-position указывает браузеру на то, как следует отображать текст в списке относительно его маркеров. По умолчанию маркеры находятся в стороне от текста списка, но можно сделать так, что они будут обтекаться текстом.
Возможных значений свойства list-style-position всего 2:
Пример:
<title>Обтекание маркера текстом</title>
<style>
body{margin:0;background:#e8e}
div{width:300px;height:200px;float:left;margin:10px;padding:10px;border:RGB(25,125,25)2px ridge;background:#fff}
</style>
<div>
<h3>Здесь маркер обтекается текстом</h3>
<ul style=list-style-position:inside>
<li>Пункт, в котором говорится о том, что хорошо бы сделать что-то.
<li>Пункт, в котором говорится о том, что неплохо бы сделать нечто там.
</ul>
</div>
<div>
<h3>А здесь нет:</h3>
<ul style=list-style-position:outside>
<li>Пункт, в котором говорится о том, что хорошо бы сделать что-то.
<li>Пункт, в котором говорится о том, что неплохо бы сделать нечто там.
</ul>
</div>
list-style
Базовое свойство list-style используется, когда стилю списка необходимо одновременно присвоить несколько значений. Может иметь от 1 до 3 значений из свойств применяемых к стилю списка в любой последовательности через пробел.
Все 3 свойства и их возможные значения рассмотрены выше:
Пример:
<title>Стиль списка</title>
<div style=width:250px>
<ul style=list-style:url(graphics/marker.gif)inside>
<li>этот список использует в качестве маркера рисунок;
<li>текст этого списка обтекает маркер.
</ul>
</div>
