Med hjälp av de CSS-egenskaper som visas i den här handledningen kan du skapa listor. Uppgifterna gäller HTML-elementen ul och ol. Du kan därför anpassa ordnade och oordnade listor efter dina önskemål.
Allmänna uppgifter om listan
Med list-style sammanfattas följande tre egenskaper:
• list-style-type
• list-style-position
• list-style-image
Med list-style kan du påverka utseendet på de grafiska punkterna framför listor och deras indrag. De nämnda uppgifterna anges genom att separeras med ett komma. Ordningen spelar ingen roll. Dessutom behöver inte ett värde anges för varje egenskap.
Ett exemepel:
<!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>I webbläsaren ser det ut som följer:
Grafiska punkter
Du kan ange en egen grafik som punkter för listorna. Egenskapen list-style-image används för detta ändamål. Följande värden är möjliga:
• url – filnamnet och eventuell sökväg för bilden
• none – ingen bild visas.
Ett exempel:
ul {
list-style-image: url(bullet.gif);
}
Se till att sökvägen till bilden som anges med URL stämmer.
Om en felaktig sökväg anges ska webbläsarna använda en standardpunktlista istället.
Positionering av punkterna
Med list-style-position kan du bestämma hur numreringar eller punkter ska bete sig med avseende på indraget.
• inside – den första raden indras så att punkter och listobjekt avslutas vänsterjusterat.
• outside – punkten står till vänster om listobjektet.
I följande exempel används de två värdena inside och 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 lista med insida indrag:</p>
<ul class="a">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<p>En lista med utsida indrag:</p>
<ul class="b">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>På så sätt kan du direkt se vilka olika effekter de två värdena verkligen har.
Att bestämma utseendet av punkterna
För bullet- eller punkttecknen kan du specificera utseendet explicit. Likaså kan du påverka numrerade listors utseende. Egenskapen list-style-type används för detta ändamål. De tillåtna värdena för denna egenskap är följande:
• decimal – för ol-listor: numrering 1, 2, 3 osv.
• lower-roman – för ol-listor: numrering i., ii., iii. osv.
• upper-roman – för ol-listor: numrering I., II., III., IV. osv.
• lower-alpha eller lower-latin – för ol-listor: numrering I., II., III., IV. osv.
• upper-alpha eller upper-latin – för ol-listor: numrering A., B., C., D. osv.
• disc – för ul-listor: fylld cirkel som punkttecken
• circle – för ul-listor: tom cirkel som punkttecken
• square – för ul-listor: rektangel som punkttecken
• none – varken punkttecken eller numrering
• lower-greek – för ol-listor: numrering med grekiska bokstäver
• hebrew – för ol-listor: numrering med hebreiska bokstäver
• decimal-leading-zero – för ol-listor: numrering med ledande nolla 0: 01., 02., 03., 04. osv.
• cjk-ideographic – för ol-listor: numrering med ideografiska tecken
• hiragana – för ol-listor: japansk numrering (med små bokstäver)
• katakana – för ol-listor: japansk numrering (med stora bokstäver)
• hiragana-iroha – för ol-listor: japansk numrering (med små bokstäver)
• katakana-iroha – för ol-listor: japansk numrering (med stora bokstäver)
I följande exempel används några av de listade varianterna.
<!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 webbläsaren visas följande bild:
Räknare
Med ol-listor kan innehåll numreras. Vid mer komplexa tillämpningar är denna typ av numrering emellertid inte riktigt praktisk. CSS erbjuder här en alternativ möjlighet med räknare.
Nedan visar jag er hur ni kan använda räknare.
Först och främst skapar jag en ny räknare för body-elementet.
body {
counter-reset: kapitel;
}Tack vare denna definition finns räknaren kapitel i dokumentet. Denna räknare kan nu användas.
h1 {
counter-increment: kapitel;
}
Med den visas syntaxen ökas räknaren automatiskt med värdet 1 när ett nytt h1-element dyker upp. Problemet är dock att inget syns av räkningen ännu. Detta kan enkelt åtgärdas genom användning av pseudoelement.
h1::before {
content: counter(kapitel) ". ";
}
En fullständig tillämpning kan se ut som följer:
<!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>Och här är resultatet i webbläsaren:
I det visade exemplet genereras respektive nummer i början av h1-elementet med hjälp av ::before. För att siffran inte ska hänga direkt på rubriktexten läggs en punkt och ett mellanslag till efter siffran.
content: counter(kapitel) ". "
Nästlade räkningar är också möjliga. För detta definierar man räknaren på den plats där den till sist ska återställas.
h1 {
counter-increment: kapitel;
counter-reset: unterkapitel;
}Så i detta exempel återställs räknaren varje gång ett nytt h1-element dyker upp. Det följande exemplet visar en typisk tillämpning för nästlade räknare.
<!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>Delkapitel</h2>
<h2>Delkapitel</h2>
<h2>Delkapitel</h2>
<h1>Kapitel</h1>
<h2>Delkapitel</h2>
<h2>Delkapitel</h2>
<h2>Delkapitel</h2>
</body>
</html>I webbläsaren ser detta ut så här:
Exemplen har visat hur kraftfulla räknare är.
