Войти
Регистрация

Изменение списков в CSS

Изменение списков в CSS

В статье по созданию списков в HTML я Вам показал примеры верстки списков со стилизацией по умолчанию.

При помощи свойств в CSS можно задать иные стилевые отличия списков и об этом читайте дальше.

Как Вы помните, списки бывают маркерованные и нумерованные. В нашем случае стили применяться будут к маркерованным спискам.

Свойство list-style-type, которое применяется к тегу <li> задает разные значения маркера.

Маркерам списка можно задать 3 стандартных значения:

1. circle - маркер в виде кружка.

2. disc - маркер в виде точки, как по умолчанию.

3. square - маркер в виде квадрата.

li {
   list-style-type: circle;
}

Получим

  • Элемент списка

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

4. lower-greek - задает маркер арабскими буквами (α, β, γ)

5. lower-roman - задает маркер в виде римских цифр в нижнем регистре (i, ii, iii, iv)

6. upper-roman - задает маркер в виде римских цифр в верхнем регистре (I, II, III, IV)

li {
   list-style-type: lower-greek;
}

Получим

  • Элемент списка
  • Элемент списка
  • Элемент списка

Еще один способ изменить маркер - это вставить свою картинку через свойство list-style-image:

li {
   list-style-image: url("images/checked.png");
}

Получим

  • Элемент списка
  • Элемент списка
  • Элемент списка

Здесь в свойстве list-style-image мы указываем путь к иконке, у меня она размером 16х16px, важно подбирать квадратную картинку, чтобы она ровно встала, иначе необходимо будет ее выравнивать.

Как изменить цвет маркеров списка в CSS?

Вообще, это делается просто, для тега <li> прописывается свойство color и в значении указываем цвет, например red:

li {
   color: red;
}

Но тут закрасится в красный и маркер и сам текст. Как же быть?

Делаем так: текст вставляем внутри строчного тега <span>, задаем тегу <li> красный цвет и тегу <span> возвращаем исходный цвет, у нас черный:

<ul>
   <li><span>Первый элемент списка</span></li>
   <li><span>Второй элемент списка</span></li>
   <li><span>Третий элемент списка</span></li>
</ul>

И пишем для этого списка CSS-правила:

li {
   color: red;
}
li span {
   color: black;
}

Таким образом закрасили весь список в красный, а потом тексту вернули черный. Есть еще символы Юникода, псевдоэлементы для изменения маркеров, но об этом я рассказываю в бесплатном видеокурсе.

Украшайте Ваши списки на сайте. На этом у меня все. Увидимся в следующей статье, где я пишу про блочные элементы.

С уважением, Самвел Погосов

Рекомендую к изучению мой бесплатный видеокурс по HTML и CSS для начинающих с подробными видеоуроками и заданиями: Перейти к видеокурсу

Комментарии к статье

Бесплатный видеокурс

HTML и CSS для начинающих

Практический и бесплатный курс по основам HTML и CSS для начинающих. С этим курсом Вы сможете изучить базовые понятия верстки и стилей CSS. Курс с практическими уроками и заданиями, все видеоуроки последовательны и увлекательны. Я научу Вас всему, чему научился сам.

Получить курс
Опрос

Для чего Вы изучаете HTML и CSS?