list-styleProprietatea este o proprietate care prescurtare valori seturi pentru trei proprietăți diferite legate de listă într - o singură declarație:
ul ( list-style: || || ; )Iată un exemplu de sintaxă:
ul ( list-style: square outside none; )Care ar fi același cu următoarea versiune de mână lungă:
ul ( list-style-type: square; list-style-position: outside; list-style-image: none; )În prescurtare, dacă se omit valori, acestea vor reveni la starea inițială.
Valori pentru list-style-type
list-style-typeProprietatea definește tipul de listă prin stabilirea conținutului fiecărui semn, sau glonț, pe listă. Valorile cuvintelor cheie acceptabile list-style-typeinclud:
disccirclesquaredecimaldecimal-leading-zerolower-romanupper-romanlower-greeklower-latinupper-latinarmeniangeorgianlower-alphaupper-alphanone
MDN are o listă mai completă. Valorile care nu sunt cuvinte cheie au fost introduse în CSS3 și încep să vadă un anumit suport, cum ar fi:
ul ( list-style-type: "→"; )Următoarea demonstrație include un grup de liste neordonate pentru a demonstra valoarea fiecărui cuvânt cheie:
list-style-typeProprietatea se aplică tuturor listelor, precum și orice element care este setat display: list-item.
Culoarea marcatorului listei va fi oricare ar fi culoarea calculată a elementului (setată prin intermediul colorproprietății).
Valori pentru list-style-position
De list-style-positiondefinește proprietatea unde să poziționeze marcatorul listei și acceptă una din două valori: insidesau exterior. Acestea sunt prezentate mai jos cu paddingeliminarea din liste și adăugarea unei margini roșii din stânga:
Valori pentru list-style-image
list-style-imageProprietatea determină dacă markerul listă este setat cu o imagine, și acceptă o valoare de „none“ sau un URL care indică spre imagine:
ul ( list-style-image: url(images/bullet.png.webp); )Mai multe demonstrații
Suport pentru browser
| Crom | Safari | Firefox | Operă | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Lucrări | Lucrări | Lucrări | Lucrări | Lucrări | Lucrări | Lucrări |
IE6 / 7 nu acceptă toate valorile cuvintelor cheie list-style-typeși au, de asemenea, o eroare în care elementele de listă plutitoare nu afișează marcatorul lor de listă. Acest lucru este rezolvat folosind o imagine de fundal (în loc de list-style-image) pe elementele listei.