CSS урок 22. Настраиваем списки
С помощью 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; }
Обычно редко когда используются маркеры в виде квадратиков или окружностей. Но вы можете применять их когда захотите. Благо, теперь вы знаете, как это сделать.
Маркеры нумерованных списков:
- Арабские числа (
decimal) - Римские числа в верхнем регистре (
upper-roman) - Римские числа в нижнем регистре (
lower-roman) - Заглавные латинские буквы (
upper-alpha) - Строчные латинские буквы (
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 был для вас полезен. Если это так, сделайте репост данной статьи в социальных сетях, чтобы больше людей получили от нее пользу.
