Установка маркера для списка
Сегодня мы разберем свойство, которое применяется к элементам списка, а именно с помощью него, можно устанавливать маркеры списка, убирать их, а также выставлять свои маркеры. Называется данное css свойство list-style. Данное свойство может принимать следующие значения, которые устанавливают тип маркера, а именно: значение circle означает, что маркер будет выглядеть в виде маленького кружочка, без внутренней заливки. Значение disc, является значением по умолчанию, которое устанавливает маркер, в виде черной точки. Предпоследнее значение, которое может принимать свойство list-style - square, устанавливает квадратный маркер списка. Заметьте, что данные свойства следует применять для ненумерованного списка, а для нумерованного списка существуют отдельные типы значений данного свойства. Скажу честно, я их в практике никогда не применял, поэтому если Вам интересно, какие значения может принимать изучаемое нами свойство для нумерованного списка, то посмотрите в справочнике, там все подробно и доступно написано, а также имеются примеры. Ну и последнее значение none, при его помощи можно убрать маркер вообще, если Вы не хотите его использовать.
Для того чтобы увидеть, каким образом эти свойства будут выглядеть, то напишите следующий код у себя:
<html>
<head>
<title>Свойство list-style</title>
<link rel="stylesheet" href="css/styles.css" type="text/css" />
</head>
<body>
<ul>
<li class="circle">Кружок без заливки</li>
<li class="disc">Стандартный маркер</li>
<li class="square">Квадратный маркер</li>
<li class="none">Без маркера</li>
<ul>
</body>
</html>
Для задания определенного маркера применим к следующим классам css стили:
.circle {
list-style: circle;
}
.disc {
list-style: disc;
}
.square {
list-style: square;
}
.none {
list-style: none;
}
Для, наглядности, можете посмотреть, что из этого получилось:
И напоследок расскажу, как установить собственный маркер. Если у Вас имеется картинка собственного маркера, или Вы скачали ее из интернета, где их множество, на любой вкус, приступаем к его установке на ваш сайт. Для этого нам необходимо всего лишь прописать после свойства list-style, путь к картинке, например: url(../images/marker/list.jpg);. Данный путь прописан исходя из того, что мы находимся в папке css с нашим файлом стилей. И обновив страницу, Вы получите свой изящный маркер.
