Лист-стиле - ЦСС-трикови

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

МДН има комплетнију листу. Вредности које нису кључне речи уведене су у ЦСС3 и почињу да виде одређену подршку, попут:

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); )

Још демонстрација

Подршка прегледача

Хром Сафари Фирефок Опера ИЕ Андроид иОС
Извођење радова Извођење радова Извођење радова Извођење радова Извођење радова Извођење радова Извођење радова

ИЕ6 / 7 не подржава све вредности кључних речи за, list-style-typeа такође има и грешку у којој плутајуће ставке листе не приказују маркер листе. Ово се решава употребом слике у позадини (уместо list-style-image) на ставкама листе.