Med de CSS-egenskaber, der vises i denne vejledning, kan du designe lister. Oplysningerne gælder HTML-elementerne ul og ol. Du kan derfor tilpasse ordnede og uordnede lister efter dine ønsker.
Generelle oplysninger om listen
Ved list-style er der tale om en sammenfatning af de følgende tre egenskaber:
• list-style-type
• list-style-position
• list-style-image
Med list-style kan du påvirke typen af de grafiske opstillingspunkter for opremsninger og deres indrykning. De nævnte oplysninger noteres hver for sig adskilt af et komma. Rækkefølgen er ligegyldig, og det er heller ikke nødvendigt at angive en værdi for hver egenskab.
Et eksempel:
<!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>Sådan ser det ud i browseren:
Grafiske opstillingspunkter
Du kan angive dit eget billede som opstillingspunkt. Egenskaben list-style-image anvendes til dette. De følgende værdier er mulige:
• url – filnavnet og eventuel sti til billedet
• none – intet billede vises.
Et eksempel:
ul {
list-style-image: url(bullet.gif);
}
Vær opmærksom på, at stien til det angivne billede ved URL'en er korrekt.
Hvis en forkert sti er angivet, bør browsere vende tilbage til en standard opstillingspunkt.
Opstillingspunktets position
Med list-style-position defineres, hvordan nummereringer eller opstillingspunkter skal opføre sig med hensyn til indrykning.
• inside – den første linje er indrykket så meget, at opstillingspunktet og listeelementet afsluttes venstrejusteret.
• outside – opstillingspunktet er til venstre for listeelementet.
I det følgende eksempel anvendes værdierne inside og 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>En indeni-liste:</p>
<ul class="a">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<p>En udenfor-liste:</p>
<ul class="b">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>På denne måde kan man straks se, hvilke forskellige virkninger disse to værdier faktisk har.
Opsætning af opstillingspunkternes udseende
For bullet- eller opstillingspunkterne kan du bestemme udseendet eksplicit. På samme måde kan du påvirke visningen af nummererede lister. Egenskaben list-style-type bruges til dette. Tilladte værdier for denne egenskab er følgende:
• decimal – for ol-lister: Numerering 1, 2, 3 osv.
• lower-roman – for ol-lister: Numerering i., ii., iii. osv.
• upper-roman – for ol-lister: Numerering I., II., III., IV. osv.
• lower-alpha eller lower-latin – for ol-lister: Numerering I., II., III., IV. osv.
• upper-alpha eller upper-latin – for ol-lister: Numerering A., B., C., D. osv.
• disc – for ul-lister: Fyldt cirkel som opstillingspunkt
• circle – for ul-lister: Tom cirkel som opstillingspunkt
• square – for ul-lister: Rektangel som opstillingspunkt
• none – hverken opstillingspunkt eller numerering
• lower-greek – for ol-lister: Numerering med græske bogstaver
• hebrew – for ol-lister: Numerering med hebraiske bogstaver
• decimal-leading-zero – for ol-lister: Numerering med førende nuller 0: 01., 02., 03., 04. osv.
• cjk-ideographic – for ol-lister: Numerering med ideografiske tegn
• hiragana – for ol-lister: Japansk numerering (med små bogstaver)
• katakana – for ol-lister: Japansk numerering (med store bogstaver)
• hiragana-iroha – for ol-lister: Japansk numerering (med små bogstaver)
• katakana-iroha – for ol-lister: Japansk numerering (med store bogstaver)
I det følgende eksempel bruges nogle af de nævnte varianter.
<!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>I browseren får man følgende billede:
Tæller
Indhold kan nummereres via ol-lister. Til mere komplekse anvendelser er denne nummereringsform imidlertid ikke særlig praktisk. CSS tilbyder i stedet en alternativ løsning med tællere.
Nedenfor viser jeg, hvordan du kan bruge tællere.
Først opretter jeg en ny tæller til body-elementet.
body {
counter-reset: kapitel;
}Takket være denne definition eksisterer tælleren kapitel i dokumentet. Denne tæller kan nu bruges.
h1 {
counter-increment: kapitel;
}
Ved den viste syntaks øges tælleren automatisk med værdien 1, hver gang et nyt h1-element vises. Problemet er imidlertid, at tællingen endnu ikke er synlig. Dette kan nemt ændres ved hjælp af pseudoelementer.
h1::before {
content: counter(kapitel) ". ";
}
Et komplet eksempel kunne se sådan ud:
<!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>Og her er resultatet i browseren:
I det viste eksempel angives det respektive nummer i starten af h1-elementet gennem ::before. For at nummeret ikke skal sidde direkte på overskriftens tekst, indsættes der et punkt og et mellemrum efter nummeret.
content: counter(kapitel) ". "
Det er også muligt at have indlejrede tællinger. Dette opnås ved at definere tælleren på det tidspunkt, hvor den skal starte forfra igen.
h1 {
counter-increment: kapitel;
counter-reset: underkapitel;
}Sådan nulstilles tælleren i dette eksempel altid, når et nyt h1-element vises. Det følgende eksempel viser en typisk anvendelse af indlejrede tællere.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
body {
counter-reset: kapitel;
}
h1 {
counter-reset: underkapitel;
}
h1:before {
counter-increment: kapitel;
content: counter(kapitel) ". ";
}
h2:before {
counter-increment: underkapitel;
content: counter(kapitel) "." counter(underkapitel) " ";
}
</style>
</head>
<body>
<h1>Kapitel</h1>
<h2>Underkapitel</h2>
<h2>Underkapitel</h2>
<h2>Underkapitel</h2>
<h1>Kapitel</h1>
<h2>Underkapitel</h2>
<h2>Underkapitel</h2>
<h2>Underkapitel</h2>
</body>
</html>I browseren ser det hele sådan ud:
Eksemplerne har vist, hvor effektive tællere kan være.
