Sąrašo stiliaus - CSS-gudrybės

Anonim

list-styleNuosavybė yra sutrumpinimas turtas, kuris nustato vertės trijų skirtingų sąrašą susijusių savybių vienoje deklaracijoje:

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

Štai sintaksės pavyzdys:

ul ( list-style: square outside none; )

Kuris būtų toks pat kaip šios ilgų rankų versijos:

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

Trumpai tariant, jei praleidžiamos kokios nors vertės, jos grįš į pradinę būseną.

Vertybės list-style-type

list-style-typeNuosavybė apibrėžia sąrašą tipą nustatant kiekvieno persekiotoją, arba kulkos turinį, sąraše. Priimtinos raktinių žodžių vertės list-style-typeapima:

  • 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 turi išsamesnį sąrašą. Ne raktinių žodžių vertės buvo įvestos CSS3 ir jose pastebimas tam tikras palaikymas, pvz .:

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

Toliau pateiktoje demonstracinėje versijoje yra nesutvarkytų sąrašų grupė, padedanti parodyti kiekvieną raktinio žodžio vertę:

list-style-typeNuosavybė taikoma visiems sąrašuose, ir bet kurio elemento, kuris yra nustatytas display: list-item.

Sąrašo žymeklio spalva bus tokia, kokia yra apskaičiuota elemento spalva (nustatyta per colorypatybę).

Vertybės list-style-position

Į list-style-positionnuosavybės apibrėžia, kur dėti sąrašo žymeklį, ir ji priima vieną iš dviejų verčių: insidear už jos ribų. Tai parodyta toliau paddingišbraukus iš sąrašų ir pridėjus kairę raudoną kraštinę:

Vertybės list-style-image

list-style-imageNuosavybė nustatoma, ar sąrašas žymeklis yra nustatytas su vaizdu, ir priima vertę "nėra" arba URL, nurodančius į paveiksliuko:

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

Daugiau demonstracinių versijų

Naršyklės palaikymas

„Chrome“ „Safari“ „Firefox“ Opera T.Y „Android“ „iOS“
Veikia Veikia Veikia Veikia Veikia Veikia Veikia

IE6 / 7 nepalaiko visų raktinių žodžių reikšmių, list-style-typetaip pat turi klaidą, kai plūduriuojantys sąrašo elementai nerodo savo sąrašo žymeklio. Tai išsprendžiama list-style-imagesąrašo elementuose naudojant fono vaizdą (vietoj jo ).