CSS/Loendid

HTMLi pakutavatele võimalustele loendite tegemiseks lisab CSS veel mõned.

Sümbol: list-style-type

Vää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

Vää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

Vää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

Vää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 }

Raamat: CSS

<< Taustad

Raamide imitatsioonid >>

Sisukord