Tässä opetusohjelmassa esitettyjen CSS-ominaisuuksien avulla voit muotoilla listoja. Tiedot koskevat HTML-elementtejä ul ja ol. Voit siis muokata järjestettyjä ja järjestämättömiä listoja haluamallasi tavalla.
Yleistä listasta
list-style on yhteenveto seuraavista kolmesta ominaisuudesta:
• list-style-type
• list-style-position
• list-style-image
list-stylen avulla voit vaikuttaa luetteloiden luettelomerkkien graafiseen esitystapaan ja sisennykseen. Mainitut tiedot merkitään pilkulla erotettuina. Järjestys ei ole tärkeä. Lisäksi jokaiselle ominaisuudelle ei tarvitse antaa arvoa.
Esimerkki:
<!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>Selaimessa se näyttää tältä:
Graafiset luettelomerkit
Voit määrittää oman grafiikan luettelomerkiksi. Tähän käytetään ominaisuutta list-style-image. Seuraavat arvot ovat mahdollisia:
• url – kuvan tiedostonimi ja mahdollisesti polku
• none – kuvaa ei näytetä.
Esimerkki:
ul {
list-style-image: url(bullet.gif);
}
Varo, että URL-kohdassa mainitun kuvan polku on oikein.
Jos väärä polku on määritetty, selaimien tulisi turvautua oletusluettelomerkkiin.
Luettelomerkkien sijainti
list-style-positionn avulla määritellään, miten numeroinnit tai luettelomerkkien sisennys tulisi käyttäytyä.
• inside – ensimmäinen rivi sisennetään niin, että luettelomerkki ja listamerkintä ovat vasemmalla reunassa.
• outside – luettelomerkki on listamerkinnän vasemmalla puolella.
Seuraavassa esimerkissä käytetään arvoja inside ja 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-luettelo:</p>
<ul class="a">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<p>Outside-luettelo:</p>
<ul class="b">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>Näin näet suoraan, mitä erilaisia vaikutuksia näillä kahdella arvolla todella on.
Luettelomerkkien ulkonäkö
Pallukka- eli luettelomerkeille voit määrittää ulkonäön. Voit myös vaikuttaa numeroitujen listojen näyttämiseen. Käytetään ominaisuutta list-style-type. Tähän ominaisuuteen sallitut arvot ovat seuraavat:
• decimal – ol-luetteloille: numerointi 1, 2, 3 jne.
• lower-roman – ol-luetteloille: numerointi i., ii., iii. jne.
• upper-roman – ol-luetteloille: numerointi I., II., III., IV jne.
• lower-alpha tai lower-latin – ol-luetteloille: numerointi I., II., III., IV. jne.
• upper-alpha tai upper-latin – ol-luetteloille: numerointi A., B., C., D. jne.
• disc – ul-luetteloille: täytetty ympyrä luettelomerkkinä
• circle – ul-luetteloille: tyhjä ympyrä luettelomerkkinä
• square – ul-luetteloille: suorakulmio luettelomerkkinä
• none – ei luettelomerkkiä eikä numerointia
• lower-greek – ol-luetteloille: numerointi kreikkalaisilla kirjaimilla
• hebrew – ol-luetteloille: numerointi heprean kirjaimilla
• decimal-leading-zero – ol-luetteloille: numerointi johtavan nollan kanssa 0: 01., 02., 03., 04. jne.
• cjk-ideographic – ol-luetteloille: numerointi ideografisilla merkeillä
• hiragana – ol-luetteloille: japanilainen numerointi (pienillä kirjaimilla)
• katakana – ol-luetteloille: japanilainen numerointi (isoilla kirjaimilla)
• hiragana-iroha – ol-luetteloille: japanilainen numerointi (pienillä kirjaimilla)
• katakana-iroha – ol-luetteloille: japanilainen numerointi (isoilla kirjaimilla)
Alla mainitsemistani vaihtoehdoista käytetään seuraavassa esimerkissä.
<!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>Selaimessa näkyy seuraava kuva:
Laskurit
Sisällöt voidaan numeroita ol-luetteloiden avulla. Monimutkaisemmissa sovelluksissa tämä numeroimistapa ei kuitenkaan ole kovin kätevä. CSS tarjoaa tähän ratkaisun laskureilla.
Näytän seuraavaksi, miten laskureita voidaan käyttää.
Aluksi luon uuden laskurin body-elementille.
body {
counter-reset: kapitel;
}Tämän määrittelyn ansiosta laskuri kapitel on olemassa dokumentissa. Tätä laskuria voidaan nyt käyttää.
h1 {
counter-increment: kapitel;
}
Esimerkillä näytetään, että laskuria lisätään aina automaattisesti arvolla 1, kun uusi h1-elementti ilmestyy. Ongelmana on kuitenkin, että numeroita ei vielä näy. Tämä voidaan helposti korjata käyttämällä pseudoelementtejä.
h1::before {
content: counter(kapitel) ". ";
}
Kokonaisen sovelluksen voi näyttää seuraavalta:
<!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>Kappale</h1>
<h1>Kappale</h1>
</body>
</html>Ja tässä lopputulos selaimessa:
Esimerkit ovat osoittaneet, kuinka tehokkaita laskurit voivat olla.
content: counter(kapitel) ". "
Sisäkkäisiä laskentoja voidaan myös tehdä. Tätä varten määritellään laskuri kohdassa, jossa se tulisi lopulta nollata uudelleen.
h1 {
counter-increment: kapitel;
counter-reset: unterkapitel;
}Tässä esimerkissä laskuri nollataan aina, kun uusi h1-elementti ilmestyy. Seuraava esimerkki näyttää tyypillisen sovelluksen sisäkkäisille laskureille.
nő käyttämällä Pseudoelementeillä.<!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>Kappale</h1> <h2>Alakappale</h2> <h2>Alakappale</h2> <h2>Alakappale</h2> <h1>Kappale</h1> <h2>Alakappale</h2> <h2>Alakappale</h2> <h2>Alakappale</h2> </body> </html>Selaimessa lopputulos näyttää tältä:
Esimerkit ovat osoittaneet, kuinka monipuolisia laskurit voivat olla.
