14. List-style в CSS

  • Данная статья написана командой Alash Academy.

  • Это одна из статей из нашего Самоучителя по HTML&CSS.

  • Надеемся, что данная статья Вам будет полезна. Приятного прочтения!

Привет! В этой статье мы поговорим о стилизации списков, а именно о свойстве list-style.

Если Вам надо освежить в памяти, что такое списки в HTML, и каких типов они бывают - вернитесь к этой статье:

14.1. Стилизация маркеров списков

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

../_images/lesson14_list_style_1-2.png ../_images/lesson14_list_style_2.png

Так вот, с помощью 3-х свойств можно менять внешний вид маркеров. Эти свойства:

  • list-style-type - задает вид маркера (кружочек, квадратик, римские числа и т.д.)

  • list-style-position - задает положение маркера относительно текста списка

  • list-style-image -задает какое-то изображение в виде маркера

Ниже мы рассмотрим каждое свойство по порядку.

14.1.1. Свойство 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 прописать следующее:

ul{
    list-style-type: square;
}

Или создайте нумерованный список и в CSS пропишите следующее:

ol{
    list-style-type: upper-roman;
}

Мы показали только основные возможные значения свойства **list-style-type. **На самом деле их намного больше.

../_images/lesson14_list_style_Screen-Shot-2018-07-27-at-7.12.38-PM.png

14.1.2. Свойство list-style-position

**list-style-position **можно перевести как «стиль списка: расположение».

Возможные значения:

list-style-position: outside

list-style-position: inside

Пример 1:

Если в CSS пропишем для списка:

ul{
    list-style-position: outside;
}

Как видите, маркеры как бы идут по внешней стороне списка.

Пример 2:

Если в CSS пропишем для списка:

ul{
    list-style-position:inside;
}

Как видите, маркеры как будто «утоплены» в тексте.

../_images/lesson14_list_style_Screen-Shot-2018-07-27-at-7.21.35-PM.png

14.1.3. Свойство list-style-image

А что если нам не подходит ни один из стандартных типов маркеров? Мы можем задать свой - с помощью list-style-image. Например, представим, что мы хотим вот такой маркер:

../_images/lesson14_list_style_list-style-image.png

Если мы вставим это изображение в оригинальном размере, оно займет пол страницы. Нам ведь это не надо?

Поэтому мы скачаем его и уменьшим его размер до нужного нам. Давайте теперь сделаем так, чтобы CSS подставил наше изображение в качестве маркера! Пропишем:

ul{
    list-style-image: url(image.png);
}

Получим:

../_images/lesson14_list_style_Screen-Shot-2018-07-27-at-7.30.16-PM.png

Отлично!

Надеемся, данная статья была Вам полезна! Читайте дальше наши статьи или приходите учиться к нам на курсы по Front-End. Детальнее о наших курсах у нас на сайте здесь.