List-style в CSS

Facebooktwittergoogle_plustumblrFacebooktwittergoogle_plustumblr
  • Данная статья написана командой 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 прописать следующее:

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

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

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

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

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

Пример 1:

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

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

Пример 2:

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

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

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

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

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

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

Получим:

Отлично!

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

Facebooktwittergoogle_plustumblrFacebooktwittergoogle_plustumblr

Facebooktwittergoogle_plustumblrFacebooktwittergoogle_plustumblr
Самоучители--узнать детальнее--