Стиль списка - CSS-хитрости

Anonim

list-styleСвойство является свойством стенографии , что устанавливает значения для трех различных списков связанных свойств в одной декларации:

ul ( list-style: || || ; )

Вот пример синтаксиса:

ul ( list-style: square outside none; )

Это будет то же самое, что и следующая версия от руки:

ul ( list-style-type: square; list-style-position: outside; list-style-image: none; )

В сокращении, если какие-либо значения опущены, они вернутся в исходное состояние.

Ценности для list-style-type

list-style-typeСвойство определяет тип списка, установив содержание каждого маркера, или пули, в списке. Допустимые значения ключевых слов list-style-typeвключают:

  • disc
  • circle
  • square
  • decimal
  • decimal-leading-zero
  • lower-roman
  • upper-roman
  • lower-greek
  • lower-latin
  • upper-latin
  • armenian
  • georgian
  • lower-alpha
  • upper-alpha
  • none

У MDN есть более полный список. Значения, не связанные с ключевыми словами, были введены в CSS3 и начинают получать некоторую поддержку, например:

ul ( list-style-type: "→"; )

Следующая демонстрация включает группу неупорядоченных списков для демонстрации каждого значения ключевого слова:

list-style-typeСвойство применяется ко всем спискам, и к любому элементу , который устанавливается в display: list-item.

Цвет маркера списка будет тем же, что и вычисленный цвет элемента (устанавливается через colorсвойство).

Ценности для list-style-position

В list-style-positionопределяет свойство , где поместить маркер списка, и он принимает одно из двух значений: insideили за ее пределами. Они показаны ниже с paddingудалением из списков и добавленной левой красной рамкой:

Ценности для list-style-image

list-style-imageСвойство определяет , является ли список маркер установлен с изображением, и принимает значение «нет» или URL , который указывает на изображение:

ul ( list-style-image: url(images/bullet.png.webp); )

Больше демонстраций

Поддержка браузера

Хром Сафари Fire Fox Опера IE Android iOS
Работает Работает Работает Работает Работает Работает Работает

IE6 / 7 не поддерживает все значения ключевых слов, list-style-typeа также имеет ошибку, при которой элементы плавающего списка не отображают свой маркер списка. Это решается путем использования фонового изображения (вместо list-style-image) в элементах списка.