Управление списками
Любой список имеет только три основных свойства:
- list-style-type - тип маркера
- list-style-position - позиция
- list-style-image - картинка
Чтобы задать тип маркера пользуются свойством list-style-type. Даже при ненумерованном списке (<ul>), с применением к списку свойства
list-style-type со значением decimal, список становится нумерованным.
| HTML-код |
CSS-код |
<html>
<head>
<title>Пример CSS</title>
</head>
<body>
<ul class=list>
<li>Первый элемент</li>
<li>Второй элемент</li>
<li>Третий элемент</li>
<li>Четвертый элемент</li>
<li>Пятый элемент</li>
</ul>
<body>
</html>
|
ul.list {
border: 1px solid gray;
list-style-type: decimal;
}
|
| Получилось следующее: |
- Первый элемент
- Второй элемент
- Третий элемент
- Четвертый элемент
- Пятый элемент
|
Видно, что маркеры находятся вне контейнера с объектами списка. Если
нужно поместить маркеры внутрь, то это делается с помощью свойства
list-style-position: inside; По умолчанию это свойство имеет значение
outside (снаружи).
| HTML-код |
CSS-код |
<html>
<head>
<title>Пример CSS</title>
</head>
<body>
<ul class=list>
<li>Первый элемент</li>
<li>Второй элемент</li>
<li>Третий элемент</li>
<li>Четвертый элемент</li>
<li>Пятый элемент</li>
</ul>
<body>
</html>
|
ul.list {
border: 1px solid gray;
list-style-type: decimal;
list-style-position: inside;
}
|
| Получилось следующее: |
- Первый элемент
- Второй элемент
- Третий элемент
- Четвертый элемент
- Пятый элемент
|
Когда надо заменить маркеры на картинку, к примеру на
, то используйте свойство list-style-image: url(путь_к_картинке);
| HTML-код |
CSS-код |
<html>
<head>
<title>Пример CSS</title>
</head>
<body>
<ul class=list>
<li>Первый элемент</li>
<li>Второй элемент</li>
<li>Третий элемент</li>
<li>Четвертый элемент</li>
<li>Пятый элемент</li>
</ul>
<body>
</html>
|
ul.list {
border: 1px solid gray;
list-style-type: decimal;
list-style-position: inside;
list-style-image: url(img/ok.gif);
}
|
| Что получилось |
- Первый элемент
- Второй элемент
- Третий элемент
- Четвертый элемент
- Пятый элемент
|
С полным списоком значений, принимаемых группой свойств list-style, можно ознакомиться в
справочнике.