Listat
Listojen muotoiluja voitiin tehdä jonkin verran suoraan HTML-elementin attribuuteilla, mutta CSS-sääntöjä käyttämällä tyylitykset saadaan toimimaan sivustolla yleisesti eikä vain listakohtaisesti.
Listan tyylit
Listojen “listamerkkejä” voidaan vaihtaa toisen tyyppisiksi list-style
-ominaisuudella
ja sen aliominaisuuksilla list-style-type
, list-style-position
ja list-style-image
.
Sääntö on muotoa:
list-style: list-style-type list-style-position list-style-image
list-style-type
-ominaisuuden vaihtoehdot ovat:
none
– ei listamerkkiädisc
– oletusarvo, täytetty ympyräcircle
– täyttämätön ympyrädecimal
– numeroitu lista (1,2,3,…)upper-roman
– numeroitu lista (I, II, III, IV, …)upper-latin
– aakkostettu (A, B, C, D, …)
list-style-position
-ominaisuuden mahdolliset arvot ovat outside
(oletus) ja inside
.
Tämä määrittelee sen, tuleeko listamerkki <li>
-elementin sisä- vai ulkopuolelle.
Listamerkiksi voi laittaa myös oman kuvatiedoston list-style-image
ominaisuudella
muodossa url('omatilpukka.png')
.
Listatyylin voi määrätä joko koko listalle, eli <ul>
- tai <ol>
-elementille, taikka
yksittäiselle lista-alkiolle, eli <li>
-elementille.
<ul style="list-style: upper-roman;">
<li>yksi</li>
<li style="list-style-position: inside;">kaksi</li>
<li>kolme</li>
</ul>
- yksi
- kaksi
- kolme