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 |