CSS стили списка дают более широкие возможности для определения внешнего вида списков, нежели простые теги в HTML, которые были рассмотрены в статье «Списки» ранее.
Рассмотрим основные свойства стилей, определяющих внешний вид списков. Их всего четыре и они совсем просты:
- list-style-type — Позволяет менять вид маркера каждого из элементов списка.
list-style-image — Устанавливает изображение, служащее маркером для списка.
list-style-position — Задаёт положение маркера относительно текста.
list-style — Это свойство универсально и позволяет задавать одновременно как стиль маркера, так и его положение, а также даёт воможность определить изображение для использования его в качестве маркера.
Свойство list-style-type
Как Вы знаете, существуют маркированные и нумерованные списки.
Фигурок, заданных в маркированных списках обычным способом, всего три:
- disc — маркер в виде точки(закрашенный кружок).
- square — маркер в виде квадратика.
- circle — маркер в виде кружка(незакрашенная точка).
А вот «нумера» в нумерованных списках могут быть заданы как цифрами, так и буквами. Цифры, в свою очередь, могут быть арабскими, или римскими. А буквы, кроме строчных и прописных, могут браться из алфавитов разных языковых пакетов. Рассмотрим наиболее часто встречающиеся:
- decimal — обычные арабские числа: 1, 2, 3,и. т д.
- lower-roman — римские числа в нижнем регистре: i, ii, iii, iv, v, и.т.д.
- upper-roman — римские числа в верхнем регистре: I, II, III, IV, V, и.т.д.
- upper-alpha — заглавные латинские буквы: A, B, C, D, и.т.д.
- lower-alpha — строчные латинские буквы: a, b, c, d, и.т.д.
- none — применяется для отмены маркеров в списках.
Рассмотрим пример:
<html>
<head>
<title>list-style-type</title>
<style type="text/css">
UL {
list-style-type: square;
}
OL {
list-style-type: upper-roman;
}
</style>
</head>
<body>
<ul>
<li>Ненумерованный список</li>
<li>Ненумерованный список</li>
<li>Ненумерованный список</li>
</ul>
<ol>
<li>Нумерованный список</li>
<li>Нумерованный список</li>
<li>Нумерованный список</li>
</ol>
</body>
</html>
Свойство list-style-position
Иногда возникает необходимость изменить положение маркера относительно текста, или сделать невозможным обтекание маркера текстом. Тут нам на помощь приходит свойство list-style-position. Без дополнительных значений оно определяет положение маркера относотельно блока с текстом. Основных значений два:
- inside — помещает маркер внутрь блока с текстом, и является его частью.
- outside — маркер выводится за пределы блока с текстом, а последний выравнивается по левому краю (используется по умолчанию).
Рассмотрим всё на примере:
<html>
<head>
<title>list-style-position</title>
<style type="text/css">
UL {
list-style-type: square;
}
OL {
list-style-type: upper-roman;
list-style-position: inside;
}
</style>
</head>
<body>
<ul>
<li>Ненумерованный список</li>
<li>Ненумерованный список</li>
<li>Ненумерованный список Ненумерованный список Ненумерованный список Ненумерованный список Ненумерованный список </li>
</ul>
<ol>
<li>Нумерованный список</li>
<li>Нумерованный список</li>
<li>Нумерованный список Нумерованный список Нумерованный список Нумерованный список Нумерованный список Нумерованный список</li>
</ol>
</body>
</html>
Как видно из рисунка, текст в теге OL ближе к маркеру и обтекает его, что менее читабельно и привлекательно. Хотя, используя свойства CSS MARGIN и PADDING, возможно менять все эти расстояния. Но это тема для другого поста.
Свойство list-style-image
Данное CSS свойство позволяет использовать изображение в качестве маркера. Здесь всё просто — в значение свойства ставится адрес картинки и она встаёт на место маркера. Рассмотрим нагядно:
<html>
<head>
<title>list-style-image</title>
<style type="text/css">
UL {
list-style-image: url ('mar.gif');
}
</style>
</head>
<body>
<ul>
<li>Ненумерованный список</li>
<li>Ненумерованный список</li>
<li>Ненумерованный список Ненумерованный список Ненумерованный список Ненумерованный список</li>
</ul>
</body>
</html>
Свойство list-style
Ну, и последнее свойство list-style, которое совмещает в себе все описанные выше, т.е. универсальное. Значения данного свойства пишутся через пробел. А вот и пример:
<html>
<head>
<title>list-style</title>
<style type="text/css">
UL {
list-style: url ('mar.gif') inside;
}
OL {
list-style: upper-roman; outside;
}
</style>
</head>
<body>
<ul>
<li>Ненумерованный список</li>
<li>Ненумерованный список</li>
<li>Ненумерованный список Ненумерованный список Ненумерованный список</li>
</ul>
<ol>
<li>Нумерованный список</li>
<li>Нумерованный список</li>
<li>Нумерованный список Нумерованный список Нумерованный список Нумерованный список</li>
</ol>
</body>
</html>
Применение свойства list-style уменьшает размер файла стилей и убыстряет оформление текста.
Как видите, управлять внешним видом списков значительно удобней с помощью CSS стилей списка, нежели средствами HTML.
