CSS/Loendid

Allikas: Vikiõpikud
< CSS
Jump to navigation Jump to search

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

Sümbol: list-style-type[muuda]

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[muuda]

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[muuda]

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[muuda]

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