Z uporabo CSS lastnosti, prikazanih v tem vadnici, lahko oblikujete sezname. Podatki se nanašajo na HTML elementa ul in ol. Torej lahko urejate urejene in neurejene sezname po svojih željah.
Splošni podatki o seznamu
Element list-style je povzetek treh naslednjih lastnosti:
• list-style-type
• list-style-position
• list-style-image
Z lastnostjo list-style lahko vplivate na vrsto grafičnega prikaza oznak pred naštevanjem in njihovo zamikanje. Navedene informacije se zapišejo ločeno z vejico. Vrstni red ni pomemben. Poleg tega ni treba navesti vrednosti za vsako lastnost.
Primer:
<!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>V brskalniku se prikaže tako:
Grafične oznake za naštevanje
Lahko navedete svojo sliko kot oznako za naštevanje. Za to se uporablja lastnost list-style-image. Možne vrednosti so:
• url – ime datoteke in morda pot do slike
• none – slika ni prikazana.
Primer:
ul {
list-style-image: url(bullet.gif);
}
Pazite, da pot, navedena pri URL, ustrezno ustreza sliki.
V primeru napačne poti brskalniki uporabijo privzeto oznako za naštevanje.
Položaj oznak za naštevanje
Z lastnostjo list-style-position se določi, kako se bodo oštevilčenja ali oznake za naštevanje obnašale glede zamika.
• inside – prva vrstica je zamaknjena tako, da se oznaka za naštevanje in seznamski vnos poravnata levo.
• outside – oznaka za naštevanje stoji levo od seznamkega vnosa.
V naslednjem primeru se uporabljata vrednosti inside in 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>Inside seznam:</p>
<ul class="a">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<p>Outside seznam:</p>
<ul class="b">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>Tako je takoj razvidno, kakšne različne učinke imajo ti dve vrednosti dejansko.
Videz oznak za naštevanje
Za puščice oz. oznake za naštevanje lahko določite njihov videz. Prav tako lahko vplivate na prikaz oštevilčenih seznamov. Za to se uporablja lastnost list-style-type. Pri tej lastnosti so dovoljene naslednje vrednosti:
V spodnjem primeru so uporabljeni nekateri naštetih primerov.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
ul.a {
list-style-type:krogec;
}
ul.b {
list-style-type:kvadrat;
}
ol.c {
list-style-type:velika-rimska;
}
ol.d {
list-style-type:manjsa-abc;
}
</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>V brskalniku je prikazana naslednja slika:
Števci
Preko seznamov ol lahko vsebine oštevilčimo. Pri bolj kompleksnih aplikacijah ta način oštevilčevanja ni resnično uporaben. CSS v tem primeru nudi alternativo s pomočjo števcev.
Spodaj vam pokažem, kako lahko uporabimo števce.
Najprej ustvarim nov števec za element body.
body {
counter-reset: poglavje;
}Zahvaljujoč tej definiciji obstaja števec poglavje v dokumentu. Ta števec lahko sedaj uporabimo.
h1 {
counter-increment: poglavje;
}
Skozi prikazano sintakso se števec samodejno poveča za vrednost 1, ko se pojavi nov h1-element. Težava pri tem: Odštevanja še ni mogoče opaziti. To lahko zelo preprosto spremenimo z uporabo lažnih elementov.
h1::before {
content: counter(poglavje) ". ";
}
Celoten primer uporabe bi lahko izgledal takole:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
body {
counter-reset: poglavje;
}
h1 {
counter-increment: poglavje;
}
h1::before {
content: counter(poglavje) ". ";
}
</style>
</head>
<body>
<h1>Poglavje</h1>
<h1>Poglavje</h1>
</body>
</html>In tukaj je rezultat v brskalniku:
V primeru, prikazanem z ::before, je številka izpisana na začetku h1-elementa. Da številka ni neposredno ob besedilu naslova, je dodan pik in presledek za številko.
content: counter(poglavje) ". "
Možne so tudi vgrajene številke. Za to določimo števec na mestu, kjer naj se na koncu ponovno začne.
h1 {
counter-increment: poglavje;
counter-reset: podpoglavje;
}V tem primeru se števec vedno ponastavi, ko se pojavi nov element h1. Sledi primer običajne uporabe vgrajenih števcev.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
body {
counter-reset:poglavje;
}
h1 {
counter-reset:podpoglavje;
}
h1:before {
counter-increment:poglavje;
content: counter(poglavje) ". ";
}
h2:before {
counter-increment:podpoglavje;
content:counter(poglavje) "." counter(podpoglavje) " ";
}
</style>
</head>
<body>
<h1>Poglavje</h1>
<h2>Podpoglavje</h2>
<h2>Podpoglavje</h2>
<h2>Podpoglavje</h2>
<h1>Poglavje</h1>
<h2>Podpoglavje</h2>
<h2>Podpoglavje</h2>
<h2>Podpoglavje</h2>
</body>
</html>V brskalniku izgleda celotno tako:
Primeri so pokazali, kako zmogljivi so števci.
