css list-style

С помощью html мы можем создавать маркированные и нумерованные списки. Все бы хорошо, однако, порой возникает необходимость создать список с нестандартным внешним видом. Или сделать ее более красивой.

Здесь html нам не поможет. Но все же, у нас есть несколько CSS свойств, с помощью которых можно вполне успешно форматировать отображение списков. Именно с ними я бы хотел вас познакомить в этом уроке.

Готовы? Тогда начинаем!

1. Маркеры списков (list-style-type)

При помощи свойства list-style-type у нас есть возможность управлять маркерами списков. У нумерованных и ненумерованных списков есть свои маркеры. Давайте с ними и познакомимся.

Маркеры ненумерованных списков:

  • Точка (disc)
  • Квадрат (square)
  • Окружность (circle)

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

ul li {list-style-type: square; }

Как видите, оно довольно простое. Вот как это выглядит на практике:

Маркеры в виде квадратиков
Маркеры в виде квадратиков

Для задания отображения маркеров в виде окружности, мы используем значение circle.

ul li {list-style-type: circle; }

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

Маркеры нумерованных списков:

  1. Арабские числа (decimal)
  2. Римские числа в верхнем регистре (upper-roman)
  3. Римские числа в нижнем регистре (lower-roman)
  4. Заглавные латинские буквы (upper-alpha)
  5. Строчные латинские буквы (lower-alpha)

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

Маркеры в виде римских чисел
Маркеры в виде римских чисел

Как видите, все довольно-таки просто. Также можно для разных пунктов списка применять разные значения. Например, определив их через селектор класса или типа.

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

li:nth-of-type(even) {list-style-type: upper-latin; }

Вот как это выглядит на практике:

комбинированные маркеры
Комбинированные маркеры

Вот и все. Теперь вы можете с легкостью менять маркеры любых ваших списков.

2. Позиционирование и отступы (list-style-position)

Следующим шагом, давайте научимся управлять левосторонним отступом списка. Но для начала, вы должны знать, что сами маркеры пунктов не относятся к содержанию списка. Они находятся во внутреннем отступе, которое называется padding.

Если значение padding приравнять к нулю, то маркеры отображаться не будут. При увеличении этого значения, отступ слева от списка будет увеличиваться. Например, давайте зададим отступу слева значение в 60 пикселей.

li {padding-left: 60px; }

Вот как это выглядит на практике.

Список с отступом
Список с увеличенным отступом слева

Однако, мы также можем отобразить маркеры внутри самих списков. Для этого свойству list-style-position мы придаем значение inside.

li {list-style-position: inside; }

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

Как вы наверное догадываетесь, есть и противоположное значение - outside. Оно наоборот, выносит маркеры за пределы пунктов списка.

Свойство list-style-position наследуется. Поэтому значение outside используется для ее отмены во вложенных списках.

3. Изображения в виде маркеров (list-style-image)

И наконец, давайте-таки научимся задавать в качестве маркеров изображения. Для этого мы можем воспользоваться свойством list-style-image.

Например, я бы хотел использовать красивые графические галочки. Для этого мы создаем следующее CSS правило:

li {list-style-image: url(img/galochka.png); }

Обратите внимание, что в качестве значения мы указываем url и местонахождение картинки. Будьте внимательны в задании адреса изображения, ведь оно указывается относительно таблицы стилей.

В моем случае, папка img находится на одном уровне вложенности с таблицей стилей. Именно поэтому я сразу указал папку с картинкой. Бывает, когда CSS файл и изображение находятся в папках одного уровня. В таких случаях перед папкой с картинкой мы ставим двоеточие - ../img/galochka.png. Вот как это выглядит на практике:

Список с картинками
Список с изображением в виде маркеров

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

li { list-style-type: none; }
li:before { content: counter(item, disc) " "; color: #b181ca; }

Теперь наш список стал еще более заметным и привлекательным.

4. Сокращенная запись

Как и в случае с сокращенной записью font, такая же возможность есть и у list-style. Например, мы можем отобразить список с квадратными маркерами, находящимися внутри самих пунктов. Для этого пишем следующее правило:

ul li {list-style: square inside; }

Вот так вот все просто. Могу вас поздравить. Теперь вы в состоянии менять внешний вид списков по своему желанию.

А на этом у меня все. Надеюсь, данный урок по CSS был для вас полезен. Если это так:

  1. Сделайте репост данной статьи в социальных сетях, чтобы больше людей получили от нее пользу;
  2. [popup_trigger id="3874" tag="span"]Подписывайтесь[/popup_trigger] на мою рассылку, чтобы не пропустить полезные и интересные публикации на блоге.

На этом я с вами не прощаюсь. Спасибо за внимание и до встречи в следующих публикациях!

Оставить комментарий

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

Вы можете использовать следующие теги HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

шесть + пятнадцать =

Закрыть