Рассмотрим работу со списками с помощью свойств 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>)
Создайте список с использованием различных рисунков в одном списке, так же используйте параметры обтекания текста.
