Tel: +372 5596 5762
e-mail: info@digipo.eu

Рассмотрим работу со списками с помощью свойств CSS.  В CSS данную задачу берёт на себя свойство: list-style-type, которое в свою очередь, тоже имеет свои стандартные значения определяющие вид маркера как всего списка сразу, так и его отдельного "пункта".

Значения list-style-type:

  • disc - Диск. (по умолчанию для <ul>)
  • circle - Полый круг.
  • square - Квадрат.
  • decimal - Арабские цифры. (по умолчанию для <ol>)
  • lower-roman - Строчные римские цифры.
  • lower-alpha - Строчные буквы.
  • upper-roman - Заглавные римские цифры.
  • upper-alpha - Заглавные буквы.
  • none - Маркер отсутствует.


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

Значений данного свойства всего два:

  • none - Отменяет графическое изображение маркера.
  • url - Путь к файлу с рисунком маркера.


Путь к рисунку после url указывается в круглых скобках.

Вот так:
list-style-image: url(images/marker.gif)
- Такая запись будет говорить о том, что рядом с документом есть папка graphics в которой лежит файлик-рисунок: "  " - под названьем 1c.gif

Стили списков

Пример кода CSS:
body { color: black; }
ul { list-style-type: disc; margin: 1em 0 1em 40px; }
ol { list-style-type: square; margin: 1em 0 1em 40px; }
.ul2 { list-style-type: circle; list-style-position: outside; }
.li1 { list-style-type: disc; }
.li2 { list-style-type: square; }
.li3 { list-style-image: url(../1c.gif); }
.li4 { list-style-type: disc; list-style-image: url(../2c.gif); }

Пример кода HTML:
<head>
<title>My CSS</title>
<link rel="stylesheet" type="text/css" href="/style/style.css" media="all"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<ul>
<li>Пункт 1.
<li>Пункт 2.
<li>Пункт 3.
</ul>
<ul class="ul2">
<li class="li1">Пункт 1.
<li class="li2">Пункт 2.
<li>Пункт 3.
</ul>
<ul>
<li class="li3">Пункт 1.
<li class="li4">Пункт 2.
</ul>
</body>
</html>

Стиль обтекания маркера списком.
Свойство list-style-position указывает браузеру на то, как следует отображать текст в списке относительно его маркеров. По умолчанию маркеры находятся в стороне от текста списка, но можно сделать так, что они будут обтекаться текстом.
Возможных значений свойства list-style-position всего два:

  • outside - Маркер находится в стороне от списка.(по умолчанию)
  • inside - Маркер обтекается текстом.


Пример кода HTML:
<head>
<title>My CSS</title>
<link rel="stylesheet" type="text/css" href="/style/style.css" media="all"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div>
<h3>Здесь маркер обтекается текстом:</h3>
<ul>
<li>Обтекаемый текст. Обтекаемый текст. Обтекаемый текст.
<li>Обтекаемый текст. Обтекаемый текст. Обтекаемый текст.
</ul>
</div>
<div>
<h3>А здесь нет:</h3>
<ul class="ul1">
<li>Не обтекает. Не обтекает. Не обтекает. Не обтекает. Не обтекает. Не обтекает.
<li>Не обтекает. Не обтекает. Не обтекает. Не обтекает. Не обтекает. Не обтекает.
</ul>
</div>
</body>
</html>

Пример кода CSS
body { color: black; }
ul { list-style-type: disc; margin: 1em 0 1em 40px; list-style-position: inside; }
.ul1 { list-style-position: outside; }
div {width: 300px; height: 220px; float:left; margin: 10px; padding: 10px; border: RGB(25, 125, 25) 2px ridge; background: #fff}
h3 {text-align: center}

list-style
Базовое свойство list-style используется, когда стилю списка необходимо одновременно присвоить несколько значений. Может иметь от одного до трёх значений из свойств применяемых к стилю списка, в любой последовательности через пробел.
Все три свойства и их возможные значения мы рассмотрели выше, поэтому повторятся не буду, а просто выложу внутри страничную навигацию:

  • list-style-type - Вид маркера в списке
  • list-style-image - Нестандартный маркер рисунок
  • list-style-position - Стиль обтекания маркера списком


Задания
Создайте собственные списки с параметрами:

  • disc - Диск. (по умолчанию для <ul>)
  • circle - Полый круг.
  • square - Квадрат.
  • decimal - Арабские цифры. (по умолчанию для <ol>)

Создайте список с использованием различных рисунков в одном списке, так же используйте параметры обтекания текста.

В предыдущем уроке рассматривали ссылки

В следующем уроке рассмотрим class и id