CSS стили списка

CSS стили списка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>

Свойство CSS list-style-type
Свойство 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>

Свойство CSS списков list-style-position

Как видно из рисунка, текст в теге 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>

свойство CSS list-style-image
Свойство 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>

свойство CSS list-style
Применение свойства list-style уменьшает размер файла стилей и убыстряет оформление текста.
Как видите, управлять внешним видом списков значительно удобней с помощью CSS стилей списка, нежели средствами HTML.

Поделиться в соц. сетях

Опубликовать в Google Buzz
Опубликовать в Google Plus
Опубликовать в LiveJournal
Опубликовать в Мой Мир
Опубликовать в Одноклассники

Реклама

Оставить комментарий

Перед отправкой формы:
Human test by Not Captcha