Стилизация списков в CSS

Стилизация списков в CSS

CSS предоставляет несколько свойств для стилизации наиболее часто используемых неупорядоченных и упорядоченных списков. Эти свойства списка CSS обычно позволяют:

  • Контролировать форму или внешний вид маркера.
  • Указать изображение вместо стандартного маркера или числа.
  • Установить расстояние между маркером и текстом в списке.
  • Указать, будет ли маркер отображаться внутри или снаружи поля, содержащего неупорядоченные или упорядоченные элементы списка.

В следующем разделе мы обсудим свойства, которые можно использовать для оформления списков.

Тип стиля списка

По умолчанию элементы в упорядоченном списке нумеруются цифрами (1, 2, 3 и т.д.), тогда как в неупорядоченном списке элементы помечаются круглыми маркерами. Но вы можете изменить этот тип маркера списка по умолчанию на любой другой тип, такой как круг, квадрат, римские цифры, латинские буквы и т.д., используя свойство list-style-type.

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

Изменение расположения маркеров списка

По умолчанию маркеры списка расположены за пределами полей элемента списка. Однако вы можете использовать свойство list-style-position, чтобы указать, будут ли маркеры отображаться внутри или снаружи блоков основного блока.

Это свойство принимает значение inside или outside, со значением outside по умолчанию. Если используется значение внутри, строки будут переноситься под маркер без отступа.

ul.in li {
  list-style-position: inside;
}
ul.out li {
  list-style-position: outside;
}

Использование изображений в качестве маркеров списка

Вы также можете установить изображение в качестве маркера списка, используя свойство list-style-image.

Правило стиля в следующем примере назначает прозрачное изображение PNG «arrow.png» в качестве маркера списка для всех элементов в неупорядоченном списке.

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

Результат приведенного выше примера может отличаться в браузерах. Internet Explorer и Opera будут отображать маркер изображения чуть выше, чем Firefox, Chrome и Safari. Ниже приведено кросс-браузерное решение этой проблемы.

Кросс-браузерное решение для изображения маркера

При использовании изображения в качестве маркера с использованием свойства list-style-image маркеры не точно совпадают с текстом в браузерах. В качестве обходного пути вы можете правильно выравнивать изображения маркеров с помощью свойства background-image CSS. Во-первых, уберите стандартные маркеры. Затем задайте неповторяющееся фоновое изображение для элемента списка.

В следующем примере маркеры изображения отображаются одинаково во всех браузерах:

ul {
  list-style-type: none;
}
ul li {
  background-image: url("arrow.png");
  background-position: 0px 5px; /* X и Y (начиная с верхнего левого угла) */
  background-repeat: no-repeat;
  padding-left: 20px;
}

Сокращенное свойство стиля списка

Свойство list-style является сокращенным свойством для определения всех трех свойств list-style-type, list-style-image и list-style-position списка в одном месте.

Это правило стиля устанавливает маркер списка для упорядоченных элементов списка в латинские буквы в верхнем регистре, которые появляются внутри блоков основного элемента списка:

ol {
  list-style: upper-latin inside;
}

Оставьте первый комментарий

Оставить комментарий

Ваш электронный адрес не будет опубликован.


*