Tämä muotoilu toimii osittain IE 6:lla ja IE 7:llä ja kokonaan FF 2:lla, Opera 9:llä sekä Safari 3:lla.
| * Ei toimi Internet Explorer 6:ssa ja 7:ssä. | ||
|
Määrittää luettelomerkin ympyräksi. | |
|---|---|---|
|
Määrittää luettelomerkin palloksi. | |
|
Määrittää luettelomerkin neliöksi. | |
|
Määrittää luettelomerkin pieneksi juoksevaksi kirjaimeksi. | |
|
Määrittää luettelomerkin suureksi juoksevaksi kirjaimeksi. | |
|
* | Määrittää luettelomerkin pieneksi juoksevaksi kreikkalaiseksi kirjaimeksi. |
|
Määrittää luettelomerkin juoksevaksi numeroksi. | |
|
* | Määrittää luettelomerkin juoksevaksi kaksiosaiseksi numeroksi. |
|
Määrittää luettelomerkin pieneksi juoksevaksi roomalaiseksi numeroksi. | |
|
Määrittää luettelomerkin suureksi juoksevaksi roomalaiseksi numeroksi. | |
|
* | Määrittää luettelomerkin juoksevaksi georgialaiseksi numeroksi. |
|
* | Määrittää luettelomerkin juoksevaksi armenialaiseksi numeroksi. |
| none | Poistaa luettelomerkin. | |
Esimerkiksi:
list-style-type:decimal;
Tämä muotoilu toimii IE 6:lla, IE 7:llä, FF 2:lla, Opera 9:llä sekä Safari 3:lla.
| url(kuvan osoite) | Määrittää luettelomerkiksi kuvan. |
|---|---|
| none | Ei luettelomerkkiä. |
| inherit | Muotoilu periytyy ylemmiltä elementeiltä. |
Esimerkiksi:
list-style-image:url(kani.jpg);
Tämä muotoilu toimii IE 6:lla, IE 7:llä, FF 2:lla, Opera 9:llä sekä Safari 3:lla.
| inside | Määrittää luettelomerkin paikan listan sisäpuolelle. |
|---|---|
| outside | Määrittää luettelomerkin paikan listan ulkopuolelle. |
| inherit | Muotoilu periytyy ylemmiltä elementeiltä. |
Esimerkiksi:
list-style-position:inside;
Tämä muotoilu toimii IE 6:lla, IE 7:llä, FF 2:lla, Opera 9:llä sekä Safari 3:lla.
Pikakirjoitteen avulla voidaan ilmoittaa list-style-type, list-style-image ja list-style-position yhdellä merkinnällä. Arvo voi olla myös inherit, jolloin muotoilut periytyvät ylemmiltä elementeiltä.
Teoriassa:
list-style:listan_tyyli luettelomerkkikuvan_muotoilut luettelomerkin_sijainti;
Käytännössä esimerkiksi:
list-style:circle none inside;
Pikakirjoitteessa ei tarvitse ilmoittaa kaikkia kolmea muotoilua:
list-style:inside;
Tämä muotoilu ei toimi IE 6:lla tai IE 7:llä mutta kylläkin FF 2:lla, Opera 9:llä sekä Safari 3:lla.
Juokseva numerointi on luettelomuotoilu, jonka avulla voidaan määrittää esimerkiksi otsikoille automaattisesti kasvava numerointi (ensimmäinen otsikko on numeroltaan 1.0, sen ensimmäinen alaotsikko 1.1, toinen alaotsikko 1.2, toinen pääotsikko 2.0, sen ensimmäinen alaotsikko 2.1 ja niin edelleen). Juoksevan numeroinnin muotoilut ovat kuitenkin melko sekavia ja toisinaan hankalia käyttää. Aiheeseen liittyvät esimerkit kannattaa katsastaa, ne selkeyttävät kokonaisuutta huomattavasti.
Counter-resetin avulla luodaan uusi juokseva numerointi tai nollataan edellinen.
| laskurin nimi | Määrittää uudelle laskurille nimen tai nollaa aiemmin käytetyn tämännimisen laskurin. |
|---|---|
| none | Ei nollaa mitään laskuria. |
| inherit | Muotoilu periytyy ylemmiltä elementeiltä. |
Esimerkissä aloitetaan uusi "laskuri1" -niminen juokseva numerointi:
counter-reset:laskuri1;
Uuden laskurin aloitus kytketään johonkin sellaiseen elementtiin, jonka aloitustagin jälkeen kaikki numeroitavat elementit ovat. Tässä tapauksessa body-tagi soveltunee tarkoitukseen, sillä kaikki h1-elementit ovat varmasti sen aloitustagin jälkeen.
body { counter-reset:laskuri1; }
Content-muotoilulla saadaan laskuri näkyviin sivulle. Contentia käytetään aina yhdessä :after- tai :before-valitsimen kanssa. Näin juokseva numerointi sijoittuu aina ennen tai jälkeen halutun elementin.
Contentin arvo counter(laskurin nimi) tulostaa numeroinnin. Myös muita contentin arvoja saa käyttää juokseva numeroinnin yhteydessä. Esimerkiksi lainausmerkkien väliin kirjoitettu teksti tulostuu sellaisenaan ennen tai jälkeen numeroinnin.
Esimerkiksi:
content:counter(laskuri1);
Oletetaan, että haluamme sanan "kappale" näkyviin ennen numerointia. Laitamme sanan lainausmerkkien väliin:
content:"Kappale " counter(laskuri1);
Koska content-muotoilua käytetään aina joko :after- tai :before-valitsimen kanssa, määritämme numeroinnin :before-valitsimen avulla tulostumaan ennen h1-otsikkoa:
h1:before { content:"Kappale " counter(laskuri1); }
Counter-increment kasvattaa juoksevan numeroinnin numeroa yhdellä. Mikäli counter-incrementiä ei käytetä, numerointi kyllä tulostuu, mutta ei juokse.
| laskurin nimi | Kasvattaa tämännimisen laskurin numerointia yhdellä. |
|---|---|
| none | Ei kasvata minkään laskurin numerointia. |
| inherit | Muotoilu periytyy ylemmiltä elementeiltä. |
Aiempiin muotoiluihin yhdistettynä kokonaisuudessaan h1-elemeneille rullaava juoksevan numeroinnin CSS-muotoilu näyttäisi tältä:
body {
counter-reset:laskuri1;
}
h1:before {
content:"Kappale " counter(laskuri1);
counter-increment:laskuri1;
}
Näiden muotoilujen perusteella sivun ensimmäisen h1-elementin edellä lukee "Kappale 1", toisen h1-elementin "Kappale 2" ja niin edelleen.
Laskureita voi käyttää samalla sivulla useampaa yhtä aikaa, ja esimerkiksi samaan content-muotoiluun voi sisällyttää eri nimisiä laskureita:
content:"Luku " counter(laskuri1) counter(laskuri2) counter(laskuri3);
Eri laskurit voi erottaa toisistaan tekstillä. Alla eri laskurit on erotettu toisistaan pisteillä:
content:"Luku " counter(laskuri1) "." counter(laskuri2) "." counter(laskuri3);