CSS/Loendid
HTMLi pakutavatele võimalustele loendite tegemiseks lisab CSS veel mõned.
Sümbol: list-style-type
muudaVäärtus: disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-alpha | upper-alpha | lower-latin | upper-latin | armenian | georgian | none | inherit
Atribuut list-style-type täiendab oluliselt HTMLi loendimärgivalikut, lisades juurde ka näiteks armeenia ja gruusia keelele vastavad märkimisviisid. Kasutada on kujundid:
- disc - seest täis ring
- circle - seest tühi ring
- square - ruut
numbrid:
- decimal - araabia number
- decimal-leading-zero - juhtnulliga araabia number (01, 02, 03 jne)
- lower-roman - väike rooma number (i, ii, iii, iv, v, jne)
- upper-roman - suur rooma number (I, II, III, IV, V, jne)
- armenian - armeenia number
- georgian - gruusia number
ja tähed:
- lower-alpha - väiketäht (a, b, c, d, jne)
- upper-alpha - suurtäht (A, B, C, D, jne)
- lower-latin - ladina väiketäht (rangelt ladina tähestik, täpitähti jne pole)
- upper-latin - ladina suurtäht
- lower-greek - kreeka väiketäht (α, β, γ, jne)
või kui tarvis võib märgid hoopistükkis välja lülitada:
- none - puudub
Enamik nendest väärtustest ei tohiks küsimusi tekitada, ainukestena ehk 'armenian' ja 'georgian', mis jäägu lugejale endale katsetada proovida - tulemused peaksid olema vähemalt huvitavad.
Näide:
ul { list-style-type: lower-roman }
Pilt: list-style-image
muudaVäärtus: <URI> | none | inherit
Atribuut list-style-image võimaldab defineerida graafilise loenditähise (sisuliselt pildi). Kui väärtuseks on 'none', siis näidatakse parameetriga 'list-style-type' määratud sümbolit. Samuti näidatakse viimast juhul, kui vastavat pildifaili ei suudeta serverist leida.
Näide:
ul
{
list-style-image: url("jubin.png");
list-style-type: circle;
}
NB! Kuna graafika võib olla eri põhjustel kättesaamatu, tuleb alati lisada varuvariandina ka 'list-style-type'-atribuut!
Taandrida: list-style-position
muudaVäärtus: inside | outside | inherit
Atribuut list-style-position määrab, kas loend on taandega või ilma (s.t. esimene rida ümbritsevast tekstist paremale nihutatud).
- inside - taandega
- outside - ilma taandeta
Vaikimisi on elemendid 'ol' ja 'ul' ilma taandeta ('outside').
Näide:
ol { list-style-position: inside }
Lühendatult: list-style
muudaVäärtus: <list-style-type> | <list-style-image> | <list-style-position> | inherit
Atribuuti list-style kasutatakse loendi kõigi kolme omaduse üheaegseks määramiseks:
ul { list-style: url("pildid/kala.png") disc inside }
ol { list-style: upper-roman outside }