Met de CSS-eigenschappen die in deze tutorial worden getoond, kun je lijsten vormgeven. De informatie is gerelateerd aan de HTML-elementen ul en ol. Je kunt dus geordende en ongeordende lijsten aanpassen naar wens.
Algemene informatie over de lijst
Bij list-style gaat het om een samenvatting van de volgende drie eigenschappen:
• list-style-type
• list-style-position
• list-style-image
Met list-style kun je het uiterlijk van de bullets voor opsommingen en hun inspringing beïnvloeden. De genoemde informatie wordt elk door een komma van elkaar gescheiden genoteerd. De volgorde maakt niet uit. Bovendien hoeft niet voor elke eigenschap een waarde te worden opgegeven.
Een voorbeeld:
<!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>Hoe dit eruit ziet in de browser:
Grafische opsommingstekens
Je kunt een eigen afbeelding opgeven als opsommingsteken. Hiervoor wordt de eigenschap list-style-image gebruikt. De volgende waarden zijn mogelijk:
• url – de bestandsnaam en eventueel het pad naar de afbeelding
• none – er wordt geen afbeelding weergegeven.
een voorbeeld:
ul {
list-style-image: url(bullet.gif);
}
Let op dat het pad naar de opgegeven afbeelding bij URL correct is.
als er een verkeerd pad is opgegeven, moeten browsers terugvallen op een standaard opsommingsteken.
De positie van de opsommingstekens
Met list-style-position wordt bepaald hoe nummering of opsommingstekens zich qua inspringing moeten gedragen.
• inside – de eerste regel wordt zover ingesprongen dat opsommingstekens en lijstitems links uitlijnen.
• outside – het opsommingsteken staat links van het lijstitem.
In het volgende voorbeeld worden de beide waarden inside en outside gebruikt.
<!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>Een inside-lijst:</p>
<ul class="a">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<p>Een outside-lijst:</p>
<ul class="b">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>Op deze manier ziet u direct welke verschillende effecten deze twee waarden daadwerkelijk hebben.
Het uiterlijk van de opsommingstekens definiëren
Voor de bullets of opsommingstekens kunt u het uiterlijk expliciet bepalen. Ook het weergeven van genummerde lijsten kan worden beïnvloed. Hiervoor wordt de eigenschap list-style-type gebruikt. Toegestane waarden voor deze eigenschap zijn de volgende:
• decimal – voor nummerieke lijsten: Nummering 1, 2, 3 enz.
• lower-roman – voor nummerieke lijsten: Nummering i., ii., iii. enz.
• upper-roman – voor nummerieke lijsten: Nummering I., II., III., IV. enz.
• lower-alpha of lower-latin – voor nummerieke lijsten: Nummering I., II., III., IV. enz.
• upper-alpha of upper-latin – voor nummerieke lijsten: Nummering A., B., C., D. enz.
• disc – voor ongeordende lijsten: gevulde cirkel als bullet-teken
• circle – voor ongeordende lijsten: lege cirkel als bullet-teken
• square – voor ongeordende lijsten: rechthoek als bullet-teken
• none – geen bullet-teken noch nummering
• lower-greek – voor nummerieke lijsten: Nummering met Griekse letters
• hebrew – voor nummerieke lijsten: Nummering met Hebreeuwse letters
• decimal-leading-zero – voor nummerieke lijsten: Nummering met voorloopnul 0: 01., 02., 03., 04. enz.
• cjk-ideographic – voor nummerieke lijsten: Nummering met ideografische tekens
• hiragana – voor nummerieke lijsten: Japanse nummering (met kleine letters)
• katakana – voor nummerieke lijsten: Japanse nummering (met hoofdletters)
• hiragana-iroha – voor nummerieke lijsten: Japanse nummering (met kleine letters)
• katakana-iroha – voor nummerieke lijsten: Japanse nummering (met hoofdletters)
In het volgende voorbeeld worden enkele van de genoemde varianten gebruikt.
<!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>In de browser ziet het er als volgt uit:
Teller
Met ol-lijsten kunnen inhouden genummerd worden. Bij complexere toepassingen is deze vorm van nummering echter niet echt praktisch. CSS biedt hiervoor een alternatief met de Counters.
Hier laat ik zien hoe je Counters kunt gebruiken.
Om te beginnen maak ik een nieuwe Counter aan voor het body-element.
body {
counter-reset: kapitel;
}Dankzij deze definitie bestaat de Counter kapitel in het document. Deze Counter kan nu worden gebruikt.
h1 {
counter-increment: kapitel;
}
Met de getoonde syntaxis wordt de teller automatisch met de waarde 1 verhoogd telkens wanneer een nieuw h1-element verschijnt. Het probleem is echter dat er momenteel nog niets te zien is van de telling. Dit kan eenvoudig worden veranderd door het gebruik van pseudo-elementen.
h1::before {
content: counter(kapitel) ". ";
}
Een volledige toepassing kan er als volgt uitzien:
<!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>En dit is het resultaat in de browser:
In het getoonde voorbeeld wordt via ::before het respectieve nummer aan het begin van het h1-element weergegeven. Om te voorkomen dat het cijfer direct aan de tekst van de kop hangt, wordt een punt en een spatie toegevoegd na het cijfer.
content: counter(kapitel) ". "
Ook geneste tellingen zijn mogelijk. Hiervoor definieer je de Counter op de plaats waar hij uiteindelijk opnieuw moet beginnen.
h1 {
counter-increment: kapitel;
counter-reset: unterkapitel;
}In dit voorbeeld wordt de teller telkens gereset wanneer er een nieuw h1-element verschijnt. Het volgende voorbeeld toont een typische toepassing voor geneste Counters.
<!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>In de browser ziet dit er als volgt uit:
De voorbeelden hebben laten zien hoe krachtig Counters zijn.
