A listákat formázott CSS tulajdonságokkal lehet megjeleníteni ebben a bemutatóban. A megadások az ul és ol HTML elemekre vonatkoznak. Tehát rendezett és rendezetlen listákat a kívánságaitok szerint testreszabhatjátok.
Általános információk a listáról
A list-style egy összefoglalása a következő három tulajdonságnak:
• list-style-type
• list-style-position
• list-style-image
A list-style segítségével befolyásolhatjátok a felsorolási jelek grafikus megjelenését az előfordulások előtt és azok belépését. A felsorolt megjegyzéseket vesszővel választva megjegyzik. A sorrend lényegtelen. Ezenkívül nem minden tulajdonsághoz kell érték megadni.
Egy példa:
<!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>
A böngészőben ez így fog megjelenni:
Vizuális felsorolási jegyek
Megadhatjátok saját grafika formátumot a felsorolási jegyekre. Erre a list-style-image tulajdonságot használják. Az alábbi értékek lehetségesek:
• url - a kép fájlneve valamint útvonala
• none - nincs megjelenített kép.
Egy példa:
ul {
list-style-image: url(bullet.gif);
}
Figyeljetek arra, hogy az URL-nek megadott kép útvonala helyes legyen.
Ha helytelen útvonalat adtak meg, a böngészőnek a standard felsorolási jelre kell visszatérnie.
A felsorolási jelek pozíciója
A list-style-position segítségével megadhatjátok, hogy a számozások vagy felsorolási jelek hogyan viselkedjenek a belépésre vonatkozóan.
• inside - az első sor olyan mértékben van belépítve, hogy a felsorolási jel és a listaelem balra zárulnak.
• outside - a felsorolási jel a listaelem bal oldalán van.
A következő példában mindkét értéket, az inside és outside használják.
<!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>Egy inside lista:</p>
<ul class="a">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<p>Egy outside lista:</p>
<ul class="b">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>
Így azonnal látható, hogy a két értéknek milyen különféle hatásai vannak.
A felsorolási jelek megjelenése
A bullet vagy felsorolási jelek kinézetét kifejezetten beállíthatjátok. Az számozott listák megjelenítését is befolyásolhatjátok. Ehez a list-style-type tulajdonságot használják. Ennek a tulajdonságnak a következő értékei engedélyezettek:
• decimal - az ol-listához: számozás 1, 2, 3 stb.
• lower-roman - az ol-listához: számozás i., ii., iii. stb.
• upper-roman - az ol-listához: számozás I., II., III., IV stb.
• lower-alpha vagy lower-latin - az ol-listákhoz: számozás I., II., III., IV. stb.
• upper-alpha vagy upper-latin - az ol-listákhoz: számozás A., B., C., D. stb.
• disc - az ul-listákhoz: kitöltött kör mint felsorolási jel
• circle - az ul-listákhoz: üres kör mint felsorolási jel
• square - az ul-listákhoz: téglalap mint felsorolási jel
• none - sem felsorolási jel, sem számozás
• lower-greek - az ol-listákhoz: számozás görög betűkkel
• hebrew - az ol-listákhoz: számozás héber betűkkel
• decimal-leading-zero - az ol-listákhoz: számozás vezető nulla-val 0: 01., 02., 03., 04. stb.
• cjk-ideographic - az ol-listákhoz: számozás ideografikus karakterekkel
• hiragana - az ol-listákhoz: japán számozás (kisbetűkkel)
• katakana - az ol-listákhoz: japán számozás (nagybetűkkel)
• hiragana-iroha - az ol-listákhoz: japán számozás (kisbetűkkel)
• katakana-iroha - az ol-listákhoz: japán számozás (nagybetűkkel)
Az alábbi példában néhány felsorolt variáns kerül használatra.
<!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>A böngészőben a következő kép jelenik meg:
Számláló
A tartalmak számozására számozott listákat használhatunk. Azonban bonyolultabb alkalmazásoknál ez a számozási forma valójában nem túl gyakorlatias. A CSS ezzel kapcsolatban a számlálók egy alternatíváját kínálja.
Mutatom, hogy hogyan lehet használni a számlálókat.
Először is létrehozok egy új számlálót a body-elemhez.
body {
counter-reset: kapitel;
}Ezen definíció következtében a kapitel számláló létezik a dokumentumban. Ezt a számlálót most lehet használni.
h1 {
counter-increment: kapitel;
}
A bemutatott szintaxis szerint a számláló automatikusan növekszik 1 értékkel, amikor egy új h1-esemény jelenik meg. A probléma az, hogy jelenleg még nem látható a számolás. Az egyszerű pseudelemenek alkalmazásával azonban ez könnyedén megváltoztatható.
h1::before {
content: counter(kapitel) ". ";
}
Egy teljes alkalmazás így nézhet ki:
<!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>És íme az eredmény a böngészőben:
A példák megmutatták, mennyire hatékonyak a számlálók.
content: counter(kapitel) ". "
Az egymásba ágyazott számlálások is lehetségesek. Ehhez definiálnunk kell az elért helyet, ahol az végül ismét nullázódik.
h1 {
counter-increment: kapitel;
counter-reset: unterkapitel;
}Ebben a példában a számláló akkor nullázódik, amikor egy új h1-esemény jelenik meg. A következő példa egy tipikus alkalmazást mutat be az egymásba ágyazott számlálásokra.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
body {
counter-reset:kapitel;
}
h1 {
counter-reset:unterkapitel;
}
h1:before {
counter-increment:kapitel;
content: counter(kapitel) ". ";
}
h2:before {
counter-increment:unterkapitel;
content:counter(kapitel) "." counter(unterkapitel) " ";
}
</style>
</head>
<body>
<h1>Kapitel</h1>
<h2>Unterkapitel</h2>
<h2>Unterkapitel</h2>
<h2>Unterkapitel</h2>
<h1>Kapitel</h1>
<h2>Unterkapitel</h2>
<h2>Unterkapitel</h2>
<h2>Unterkapitel</h2>
</body>
</html>A böngészőben így fest az egész:
A példák bemutatták, mennyire hatékonyak a számlálók.
