Главная » Все про CSS » Свойства списков в css.

Свойства списков в css.

2013-04-30 / Вр:23:38 / просмотров: 14012

CSS дает возможность создавать маркированные и нумерованные списки, оформлять списки маркеров изображением, а также, если нужно, вообще убирать любые обозначения маркированного списка.

CSS стили списка маркера.

list-style-type

Значение:

disk – маркированный список в виде закрашенного кружка

circle – маркированный список в виде не закрашенного кружка

square – маркированный список в виде закрашенного квадратика

decimal – нумерованный список арабскими числами (1,2,3 и т.д.)

upper-roman – нумерованный список большими римскими цифрами (I,II,III,IV и т.д.)

lower-roman – нумерованный список маленькими римскими цифрами (i,ii,iii,iv и т.д.)

upper-alpha – нумерованный список заглавными буквами (A,B,C и т.д.)

lower-alpha – нумерованный список строчными буквами (a,b,c и т. д.)

none – без маркера.

Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
 <title>Свойства списков в css</title>
 <style ENGINE="text/css">
 UL {
 list-style-type: circle; /* Маркеры в виде не закрашенного кружочка */
 color: navy; /* Цвет текста списка */
 }
 </style>
 </head>
 <body>
 <ul>
 <li>Верь в лучшее, ожидай худшее.</li>
 <li>Жизнь - это болезнь, со смертельным исходом.</li>
 <li>Никогда не говори никогда.</li>
 </ul>
 </body>
</html>

Результат:

Свойства списков в css

Убрать отображение маркера из списка.

Бывают такие случаи, когда отображения маркера в списке нужно убрать. Для этого в коде CSS пропишите

list-style-type: none;

Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
 <title>Свойства списков в css</title>
 <style type="text/css">
 UL {
 list-style-type: none; /* Убираем маркеры */
 color: navy; /* Цвет текста списка */
 }
 </style>
 </head>
 <body>
 <ul>
 <li>Верь в лучшее, ожидай худшее.</li>
 <li>Жизнь - это болезнь со смертельным исходом.</li>
 <li>Никогда не говори никогда.</li>
 </ul>
 </body>
</html>

Результат:

Убрать отображение маркера из списка.

Изображение вместо маркера.

Можно обычные маркеры в списке заменить собственными изображениями. Это можно сделать с помощью свойства list-style-image.

list-style-image

list-style-image: url(картинка.png);

Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
 <title>Свойства списков в css</title>
 <style type="text/css">
LI {
 list-style-image: url("images/marker1.png"); /* Путь к изображению */
 }
 </style>
 </head>
 <body>
 <ul>
 <li>Верь в лучшее, ожидай худшее.</li>
 <li>Жизнь - это болезнь со смертельным исходом.</li>
 <li>Никогда не говори никогда.</li>
 </ul>
 </body>
</html>

Результат:

Изображение вместо маркера

Отступ маркера от текста

Можно также задать маркированному списку расстояние от текста. Это можно сделать с помощью свойства padding-left для селектора li.

Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
 <title>Свойства списков в css</title>
 <style type="text/css">
 li {
 padding-left: 30px; /* Отступ от маркера до текста */
 }
 </style>
 </head>
 <body>
 <ul>
 <li>Верь в лучшее, ожидай худшее.</li>
 <li>Жизнь - это болезнь со смертельным исходом.</li>
 <li>Никогда не говори никогда.</li>
 </ul>
 </body>
</html>

Результат:

Отступ маркера от текста

Цвет маркеров.

Следующая задача состоит в том, чтобы изменить цвет маркера, но при этом не изменять цвет текста. Как это возможно сделать? Цвет маркера можно изменить, если к тесту добавить тег <span>.
Это выглядит вот так:

<li><span>текст</span></li>

Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
 <title>Свойства списков в css</title>
 <style type="text/css">
 li {
 color: #0f66с0; /* Цвет маркеров */
 }
 li span {
 color: #cc0000; /* Цвет текста */
 }
 </style>
 </head>
 <body>
 <ul>
 <li><span>Верь в лучшее, ожидай худшее.</span></li>
 <li><span>Жизнь - это болезнь со смертельным исходом.</span></li>
 <li><span>Никогда не говори никогда.</span></li>
 </ul>
 </body>
</html>

Результат:

Цвет маркеров

Дополнение к общей теме.
Если вам нужно, по каким-либо причинам, задать нумерацию списка маркера не с нуля, а, допустим, с 8, вы можете сделать такой ход.

Пример:

<!DOCTYPE html>
<html>
 <head>
 <title>Свойства списков в css</title>
 <style>
 li { list-style-type: none; } /* Убираем исходную нумерацию у списка */
 ul { counter-reset: list 8; } /* Инициируем счетчик */
 ul li:before {
 counter-increment: list; /* Увеличиваем значение счетчика */
 content: counter(list) ". "; /* Выводим число */
 }
 </style>
 </head>
 <body>
 <ul>
 <li>Верь в лучшее, ожидай худшее.Пункт 1</li>
 <li>Жизнь - это болезнь со смертельным исходом.Пункт 2</li>
 <li>Никогда не говори никогда.Пункт 3</li>
 <li>Это все что я знал. Пункт 4</li>
 </ul>
 </body>
</html>

Результат:

задать нумерацию списка маркера не с нуля а допустим с 8