![]() | Peatüki sisukord | ![]() |
6.2 Loendid
Selles peatükis käsitletakse loendeid. Materjali edukaks läbimiseks vajate põhiteadmisi märgenditest: <ul>, <ol>, <li> - mis olid selgitatud HTML-i peatükis.
Loendite puhul kehtivad kõik eelmises moodulis kirjeldatud teksti kujundusvahendid. Lisaks saab listidele määrata numbrite ja täppide stiili parameetri list-style-type abil.
Nummerdatud loendi puhul (märgend <ol>) saab parameetrile list-style-type järgmisi väärtusi omistada:
- decimal - araabia numbrid (vaikimisi väärtus)
- decimal-leading-zero - numbritele lisatakse polsterdusena ette 0
- lower-roman - väikesed rooma numbrid
- upper-roman - suured rooma numbrid
- lower-alpha - väikesed tähed
- upper-alpha - suured tähed
- none - tüüp puudub
Vaata rohkem siit
Nummerdamata loendi puhul (märgend <ul>) saab kasutada väärtuseid:
- disc - ketas (vaikimisi)
- circle - ring
- square - ruut
Näide
<!DOCTYPE html> <html> <head> <meta charset="ISO-8859-1" /> <style type="text/css">
ul {
list-style-type: upper-roman;
}
</style> </head> <body> <ul>Loendi näide <li>Üks</li> <li>Kaks</li> <li>Kolm</li> </ul> </body> </html>
Selle koodi tulemus näeb veebilehitsejas järgmiselt:

Loendi list-style-position omadus annab veebilehitsejale märku, kus peaks tekst olema selle märkide suhtes. Vaikimisi on tekst märkidest eemal, kuid saate teha ka nii, et märgid oleksid teksti kõrval.
outside- tekstist eemal (vaikimisi)inside- teksti kõrval
Iseseisev ülesanne:
Kasutage oma HTML ja CSS teadmisi ning koostage loend, mis näeks välja identne järgmisega:

![]() | Peatüki sisukord | ![]() |

