Стиль списка

Рассмотрим работу со списками с помощью свойств 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

О нас

Добро пожаловать в каталог продукции DigiPortfoolio OÜ.

Начиная с 2001 года мы обучались и развивались в сфере мультимедийного дизайна. На данный момент мы предлагаем услуги по созданию интернет дизайна, печатного дизайна, разработки рекламы, создание сайтов, туров 360 градусов.

Так же мы можем сделать печать на различных материалах и размерах. Изготовляем наклейки, визитки, roll-up стенды, сувенирную продукцию, печать на футболках.

В каталоге Вы найдете предлагаемые варианты, так же Вы можете связаться с нами по телефону +372 5596 5762 или прислать свой заказ на электронную почту info@digipo.eu

Ищите нас в социальных сетях: