List-style в CSS
- Данная статья написана командой Vertex Academy.
- Это одна из статей из нашего Самоучителя по HTML&CSS.
- Надеемся, что данная статья Вам будет полезна. Приятного прочтения!
Привет! В этой статье мы поговорим о стилизации списков, а именно о свойстве list-style.
Если Вам надо освежить в памяти, что такое списки в HTML, и каких типов они бывают - вернитесь к этой статье:
Стилизация маркеров списков
Как видите, слева от пунктов списка, есть так называемые маркеры. В первом пример - в виде черных кружочков. Во втором - в виде черных квадратиков.
Так вот, с помощью 3-х свойств можно менять внешний вид маркеров. Эти свойства:
- list-style-type - задает вид маркера (кружочек, квадратик, римские числа и т.д.)
- list-style-position - задает положение маркера относительно текста списка
- list-style-image -задает какое-то изображение в виде маркера
Ниже мы рассмотрим каждое свойство по порядку.
Свойство list-style-type
Как мы уже говорили, list-style-type используется для того, чтобы менять вид маркера. Это свойство может иметь такие значения:
Для ненумерованных списков (<ul>):
list-style-type: circle - "пустые кружочки". Например:
- Hello World!
list-style-type: disc - "зарисованные кружочки". Например:
- Hello World!
list-style-type: square - квадратный маркер. Например:
- Hello World!
Для нумерованных списков (<ol>):
decimal - "стандартная" нумерация (1, 2, 3 ...)
upper-alpha - большие латинские буквы (A, B, C ...)
lower-alpha - маленькие латинские буквы (a, b, c ...)
upper-roman - римская нумерация (I, II, III, IV, V...).
lower-roman - римская нумерация (i, ii, iii, iv, v...).
Например, попробуйте создать ненумерованный список и в CSS прописать следующее:
1 2 3 |
ul{ list-style-type: square; } |
Или создайте нумерованный список и в CSS пропишите следующее:
1 2 3 |
ol{ list-style-type: upper-roman; } |
Мы показали только основные возможные значения свойства list-style-type. На самом деле их намного больше.
Свойство list-style-position
list-style-position можно перевести как "стиль списка: расположение".
Возможные значения:
1 |
list-style-position: outside |
1 |
list-style-position: inside |
Пример 1:
Если в CSS пропишем для списка:
1 2 3 |
ul{ list-style-position: outside; } |
Как видите, маркеры как бы идут по внешней стороне списка.
Пример 2:
Если в CSS пропишем для списка:
1 2 3 |
ul{ list-style-position:inside; } |
Как видите, маркеры как будто "утоплены" в тексте.
Свойство list-style-image
А что если нам не подходит ни один из стандартных типов маркеров? Мы можем задать свой - с помощью list-style-image. Например, представим, что мы хотим вот такой маркер:
Если мы вставим это изображение в оригинальном размере, оно займет пол страницы. Нам ведь это не надо?
Поэтому мы скачаем его и уменьшим его размер до нужного нам. Давайте теперь сделаем так, чтобы CSS подставил наше изображение в качестве маркера! Пропишем:
1 2 3 |
ul{ list-style-image: url(image.png); } |
Получим:
Отлично!
Надеемся, данная статья была Вам полезна! Читайте дальше наши статьи или приходите учиться к нам на курсы по Front-End. Детальнее о наших курсах у нас на сайте здесь.