Вы здесь: Главная » CSS » Стили для списков

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

Стили для списков начинаются с приставки list-style-. К ним относятся: list-style-type, list-style-position, list-style-image и объединенное свойство list-style. Рассмотрим их  последовательно.

Стили маркеров (цифр)

И для маркированных, и для нумерованных списков внешний вид маркеров или цифр определяет свойство list-style-type. Оно имеет следующие значения:

Для маркированных списков:

  1. disc - темная точка (значение по умолчанию)
  2. circle - кружок
  3. square - в виде темного квадрата

Для нумерованных списков:

  1. desimal - 1, 2, 3 ... - арабские цифры (значение по умолчанию);
  2. decimal-leading-zero - 01, 01, 03 - арабские цифры с ведущим нулем в первой десятке;
  3. lower-alpha, lower-latin - строчные (маленькие) латинские буквы.
  4. upper-alpha, upper-latin - прописные (большие) латинские буквы;
  5. lower-roman - строчные римские цифры;
  6. upper-roman - прописные римские цифры;
  7. lower-greek - строчные греческие буквы;
  8. upper-greek - прописные греческие буквы;
  9. armenian - армянская нумерация;
  10. georgian - грузинская нумерация.

Посмотреть на варианты отображения различных маркеров можно ниже. Хотя в примере и используется список ol, но маркеры с помощью кнопок могут назначаться, как и для ul. В реальной практике этого следует избегать.

  • Элемент списка 1
  • Элемент списка 2
  • Элемент списка 3
  • Элемент списка 4
  • Элемент списка 5
  • Элемент списка 6
  • Элемент списка 7
  • Элемент списка 8
  • Элемент списка 9
  • Элемент списка 10

Свойство list-style-position

Определяет позицию маркера. Бывает:

  1. outside -маркер расположен снаружи текста (значение по умолчанию);
  2. inside - маркер встроен внутрьтекста и обтекается им;
  3. inherit - свойство наследуется от родителя (как правило, во вложенных списках).

Как правило, если используют это свойство, то со значением inside, т.к. значение outside применяется по умолчанию, а inherit используется очень редко.

Пример с использование list-style-position: inside:

  1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore impedit aliquam dolores tempora nisi sapiente, dolorem nihil, harum consequuntur porro ab in eveniet aspernatur esse!
  2. Harum modi architecto perferendis officiis labore voluptate eveniet aut alias minima excepturi quaerat quod atque eum dolorem, unde porro sit deserunt dolor dolorum expedita, veniam.
  3. Reprehenderit ullam saepe recusandae corporis dignissimos impedit voluptates suscipit delectus, facilis officia quisquam perspiciatis, excepturi autem! Dolor non tempora sint facilis labore autem harum quisquam.
  4. Dicta ducimus, pariatur, magni molestiae temporibus excepturi dignissimos dolores repudiandae soluta quos, voluptate laborum. Ullam nemo, cum corporis dignissimos, fugit similique omnis placeat assumenda modi?

Изображения вместо маркеров или цифр

Задаются с помощью сойства list-style-image. Значения этого свойства - это none(т.е. отсутствие изображеня - вариант по умолчанию) или url(путь_к файлу_изображения.расш).

Путь к файлу указывается либо относительно положения html-файла, либо в виде абсолютного пути вместе с именем сайта.

Например:

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

Пример:

  • Элемент списка 1
  • Элемент списка 2
  • Элемент списка 3
  • Элемент списка 4
  • Элемент списка 5
  • Элемент списка 6
  • Элемент списка 7
  • Элемент списка 8
  • Элемент списка 9
  • Элемент списка 10

Чтобы удалить маркер в виде изображения, необходимо записать:

Свойство list-style

Еще одно свойство является универсальным и содержит в себе перечисление предыдущих трех:

В этом свойстве могут быть указаны все свойства или какая-то часть из этих свойств, даже одно. Например, можно записать так:

Или так:

Или так:

наши партнеры: макияж татуаж

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *