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

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

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

Стили маркеров (цифр). Свойство list-style-type

И для маркированных, и для нумерованных списков внешний вид маркеров или цифр определяет свойство 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

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

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

Например:

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

Пример:

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

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

Свойство list-style

Свойство list-style является универсальным (обобщенным) и содержит в себе перечисление предыдущих трех:

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

Или так:

Или так:

Используем псевдоэлементы ::before и ::marker для оформления списков

Для того чтобы оформить списки, можно использовать псевдоэлемент ::before,  а также специальный псевдоэлемент ::marker.

Для начала давайте заменим точки у маркированного списка на небольшие черточки + сделаем их красными. Для этого необходимо отключить стандартные маркеры и использовать псевдоэлемент ::before.

Вот, что получилось:

  • Lorem ipsum dolor.
  • Iure, vitae, quidem.
  • Quisquam quis, rerum!
  • Earum, numquam impedit.
  • A aliquid, eum!

Для псевдоэлемента ::before можно также использовать различные HTML-спецсимволы. Например, для добавления длинного тире можно использовать спецсимвол —. Однако для записи его в свойстве content необходимо Unicode-написание этого символа с обратным слэшом в начале.

Так будет выглядеть сейчас наш список:

  • Lorem ipsum dolor.
  • Iure, vitae, quidem.
  • Quisquam quis, rerum!
  • Earum, numquam impedit.
  • A aliquid, eum!

Давайте теперь попробуем добавить размеры, рамку и изменение цвета нового маркера при наведении на элемент списка.

Наведите на элементы списка.

  • Lorem ipsum dolor.
  • Iure, vitae, quidem.
  • Quisquam quis, rerum!
  • Earum, numquam impedit.
  • A aliquid, eum!

С помощью псевдоэлемента ::before можно заменить изображение-маркер на html-символ, если подобрать подходящий.

Если вы всего лишь хотите поменять цвет маркера по сравнению с цветом текста списка или сделать его полужирным, достаточно использовать псевдоэлемент ::marker. Он сработает и для маркированного, и для нумерованного списка. Единственный минус - псевдоэлемент ::marker поддерживается в Firefox 68+ иSafari 11.1+и с ограничениями в Chrome и Edge 80+. Ряд мобильных браузеров пока его не поддерживает.

Посмотрим, как это выглядит на 2-х списках.

  • Lorem ipsum dolor.
  • Iure, vitae, quidem.
  • Quisquam quis, rerum!
  • Earum, numquam impedit.
  • A aliquid, eum!
  1. Lorem ipsum dolor.
  2. Iure, vitae, quidem.
  3. Quisquam quis, rerum!
  4. Earum, numquam impedit.
  5. A aliquid, eum!

Вы можете посмотреть на различные варианты оформления списков в примере ниже.

See the Pen CSS Маркеры для списков by Elen (@ambassador) on CodePen.18892

Изменение вида счетчиков в нумерованных (упорядоченных списках)

Для нумерованных (упорядоченных) списков, которые формируются с помощью тега <ol>, необходимо также менять внешний вид нумерации (счетчиков) с помощью оформления псевдоэлементов ::before. Однако тут важно, чтобы нумерация продолжалась с каждым новым элементом списка. Поэтому в стилях для элементов li такого списка (в примере он имеет id="circle-counter") необходимо задать свойство  counter-increment: list (значение может быть любым словом), а в css для псевдоэлемента ::before нужно использовать это значение в свойстве content: counter(list).

Посмотрите, что получилось:

  1. Элемент списка №1
  2. Элемент списка №2
  3. Элемент списка №3
  4. Элемент списка №4
  5. Элемент списка №5
Варианты значения свойства counter-increment для li

Внизу списка есть переключатели, которые дают возможность протестировать несколько значений для свойства counter-increment: с отрицательными значениями, четные, через 10 единиц.

Автор: Админ

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

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

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