Стил на списък - 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имота определя дали списък маркер е настроен с изображение, и приема стойност "никой" или адрес, който сочи към снимката:

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

Още демонстрации

Поддръжка на браузър

Chrome Сафари Firefox Опера IE Android iOS
Върши работа Върши работа Върши работа Върши работа Върши работа Върши работа Върши работа

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