В этом уроке мы узнаем, как стилизовать списки с помощью CSS!
Помните, что в HTML у нас есть два типа списков:
Неупорядоченные списки <ul> — элементы списка определяются с помощью буллитов:
- Кофе
- Чай
- Печенье
Упорядоченные списки <ol> — элементы списка определяются цифрами (или буквами i. ii. iii.):
1- Кофе
2- Чай
3- Печенье
И каждому элементу присваивается тег <li>, например, так:
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Biscuits</li>
</ol>
Мы постоянно используем списки при создании веб-страниц! Справедливо будет сказать, что большинство навигационных меню — это, по сути, HTML-списки, оформленные с помощью CSS.
Как стилизовать списки с помощью CSS
CSS имеет несколько свойств, которые мы можем использовать для стилизации. Мы можем устанавливать различные маркеры элементов списка, использовать изображения в качестве маркеров, а также добавлять цвета & цвета фона.
Давайте посмотрим на синтаксис!
List-style-type
Мы используем list-style-type, чтобы установить маркер для нашего списка:
li {
list-style-type: square;
}
На самом деле существует огромное количество возможных значений! Например, circle, square, decimal, upper-roman и none. Посмотрите все типы стилей списка.
Стоит отметить, что если вы задаете цвет маркера списка, то по умолчанию он будет соответствовать цвету элемента.
Также часто используется свойство list-style-type:none для полного удаления маркеров!
List-style-position
С помощью list-style-position вы можете расположить маркер снаружи (по умолчанию) или внутри содержимого списка:
li {
list-style-position: outside;
}
li {
list-style-position: inside;
}
При использовании inside, например, со списками текста, каждый маркер будет находиться внутри текстового поля, таким образом отступая от первой строки текста для каждого элемента списка.
List-style-image
list-style-image можно использовать для размещения пользовательского изображения в качестве маркера:
li {
list-style-image: url(goldstar.png);
}
URL указывает на местоположение изображения.
Хорошей практикой является также установка list-style-type в качестве запасного варианта, если изображение недоступно.
Стиль списка (сокращение)
Свойство сокращения list-style позволяет нам указать list-style-type, list-style-position и list-style-image в одном объявлении.
Например:
ul {
list-style: square inside url("goldstar.png");
}
Это будет эквивалентно:
ul {
list-style-type: square;
list-style-position: inside;
list-style-image: url(goldstar.png);
}
Используя это сокращенное свойство, помните о порядке: list-style-type, затем list-style-position и, наконец, list-style-image. Если какое-либо из этих свойств отсутствует, оно вернется к состоянию по умолчанию.
Заключение
Если вам понравилась эта статья, следуйте за мной в Twitter, где я ежедневно пишу о вещах, связанных с техникой!
Если вам понравилась эта статья и вы хотите оставить совет — нажмите здесь
🌎 Давайте общаться
-
Портфолио
-
Twitter
-
LinkedIn
-
Hashnode
-
Devto
-
Medium
-
Github
-
Codepen