Selle õpetuse abil saate CSS-omaduste abil loendeid kujundada. Andmed viitavad HTML-i elementidele ul ja ol. Seega saate tellitud ja tellimata loendeid oma soovide järgi kohandada.
Üldine teave loendi kohta
Lähtest on list-style kokkuvõte järgmistest kolmest omadusest:
• list-style-type
• list-style-position
• list-style-image
Üle list-style saate mõjutada loetelu loendimärkide graafilist esitust ja nende taandust. Nimetatud andmed kirjutatakse eraldi komadega eraldatult. Järjekord ei ole oluline. Lisaks ei pea iga omaduse jaoks olema väärtust.
Näide:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
ul {
list-style:square;
}
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>Vaatajas näeb see välja järgmiselt:
Graafilised loendi märgid
Saate määrata omaenda graafika loendi märgiks. Selleks kasutatakse omadust list-style-image. Võimalikud väärtused on järgmised:
• url – pildi failinimi ja vajadusel asukoht
• none – kuvatakse mingit pilti.
Näide:
ul {
list-style-image: url(bullet.gif);
}
Veenduge, et URL-i antud pildi tee oleks õige.
Kui on antud vale tee, peaks brauserid minema tagasi vaikimisi loendi märgile.
Loendi märgi positsioon
Üle list-style-position määratakse, kuidas nummerdus või loendi märgid peaksid taanduma.
• inside – esimene rida on nii taandatud, et loendi märk ja loendi kirje lõppevad vasakule joondatult.
• outside – loendi märk asub vasakul loendi kirjest.
Järgmises näites kasutatakse kahte väärtust inside ja outside.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
ul.a {
list-style-position:inside;
}
ul.b {
list-style-position:outside;
}
</style>
</head>
<body>
<p>Sisemine loend:</p>
<ul class="a">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<p>Välimine loend:</p>
<ul class="b">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>Nii saate kohe näha, millist mõju omavad need kaks väärtust tegelikult.
Loendi märkide välimus
Bullet- ehk loendi märkide välimust saate konkreetset määrata. Samuti saate mõjutada nummerdatud loendite kuvamist. Selleks kasutatakse omadust list-style-type. Selle omaduse puhul on lubatud järgmised väärtused:
• decimal – ol-loendid: Nummerdamine 1, 2, 3 jne.
• lower-roman – ol-loendid: Nummerdamine i., ii., iii. jne.
• upper-roman – ol-loendid: Nummerdamine I., II., III., IV. jne.
• lower-alpha või lower-latin – ol-loendid: Nummerdamine I., II., III., IV. jne.
• upper-alpha või upper-latin – ol-loendid: Nummerdamine A., B., C., D. jne.
• disc – ul-loendid: täidetud ring loendi märgina
• circle – ul-loendid: tühi ring loendi märgina
• square – ul-loendid: ristkülik loendi märgina
• none – ei loendi märki ega nummerdamist
• lower-greek – ol-loendid: nummerdamine kreeka tähtedega
• hebrew – ol-loendid: nummerdamine heebrea tähtedega
• decimal-leading-zero – ol-loendid: nummerdamine juhtiva nulliga 0: 01., 02., 03., 04. jne.
• cjk-ideographic – ol-loendid: nummerdamine ideograafiliste märkidega
• hiragana – ol-loendid: jaapani nummerdamine (väikeste tähtedega)
• katakana – ol-loendid: jaapani nummerdamine (suurtähtedega)
• hiragana-iroha – ol-loendid: jaapani nummerdamine (väikeste tähtedega)
• katakana-iroha – ol-loendid: jaapani nummerdamine (suurtähtedega)
Järgmises näites kasutatakse mõnda loetletud variatsioonidest.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
ul.a {
list-style-type:circle;
}
ul.b {
list-style-type:square;
}
ol.c {
list-style-type:upper-roman;
}
ol.d {
list-style-type:lower-alpha;
}
</style>
</head>
<body>
<ul class="a">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<ul class="b">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<ol class="c">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
<ol class="d">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
</body>
</html>Brauseris kuvatakse järgmine pilt:
Lugemismärkide loendamine
ol-loendite abil on võimalik sisule numbrid lisada. Komplekssemate rakenduste puhul pole see nummerdamisviis aga eriti praktiline. Selleks pakub CSS alternatiivina loendurid.
Allpool näitan, kuidas loendureid kasutada.
Kõigepealt loon uue loenduri body-elementide jaoks.
body {
counter-reset: kapitel;
}Tänu sellele definitsioonile on dokumendis loendur "kapitel" olemas. Seda loendurit saab nüüd kasutada.
h1 {
counter-increment: kapitel;
}
Näidatud süntaksi abil suurendatakse loendurit automaatselt väärtuse võrra 1, kui ilmub uus h1-element. Probleem seisneb aga selles, et nummerdamist ei ole hetkel veel näha. Seda saab lihtsalt muuta pseudo-elementide abil.
h1::before {
content: counter(kapitel) ". ";
}
Täielik rakendus võiks välja näha järgmine:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
body {
counter-reset: kapitel;
}
h1 {
counter-increment: kapitel;
}
h1::before {
content: counter(kapitel) ". ";
}
</style>
</head>
<body>
<h1>Kapitel</h1>
<h1>Kapitel</h1>
</body>
</html>Ja siin on tulemus brauseris:
Näidetes on näidatud, kui võimsad loendurid on.
