Listan tyylejä voidaan muuttaa attribuuteilla; list-style-type, list-style-image ja list-style-position.
- Luettelomerkin sijainti
- List-style-position attribuutilla voidaan määrittää luettelomerkin sijainti.
- Luettelomerkin tyyli
- List-style-type attribuutilla voidaan määrittää luettelomerkin tyyli.
- Luettelomerkin kuva
- List-style-image attribuutilla voidaan määrittää luettelomerkiksi kuva.
Luettelomerkin sijainti (list-style-position)
List-style-position-attribuutilla voidaan määrittää luettelomerkin sijainti. Mahdollisia arvoja ovat inside ja outside. Arvo "inside" tekee luettelomerkin sisäpuolelle ja arvo "outside" tekee luettelomerkin ulkopuolelle.
list-style-position:inside; list-style-position:outside;
Esimerkkejä
- Tässä listassa luettelomerkki on sisäpuolella
- Tässä listassa luettelomerkki on ulkopuolella
Luettelomerkin tyyli (list-style-type)
List-style-type attribuutilla voidaan määrittää haluama luettelomerkki listalle. Mahdollisia arvoja ovat; none, disc, circle, square, decimal, lower-roman, upper-roman, lower-aplha ja upper-alpha
list-style-type:arvo;
Esimerkiksi
list-style-stype:disc;
Esimerkkejä
- Tässä tyyli on "none"
- Tässä tyyli on "disc"
- Tässä tyyli on "circle"
- Tässä tyyli on "square"
- Tässä tyyli on "decimal"
- Tässä tyyli on "lower-roman"
- Tässä tyyli on "upper-roman"
- Tässä tyyli on "lower-alpha"
- Tässä tyyli on "upper-alpha"
Luettelomerkin kuva (list-style-image)
List-style-image attribuutilla voidaan määrittää luettelomerkin tilalle kuva. Mahdollisia arvoja ovat; none ja url(). Arvo "none" ei laita mitään kuvaa ja arvo "url"" kertoo, että perässä olevien sulkuviivojen sisällä on polku kuvalle, joka näytetään.
list-style-image:none; list-style-image:url(polku);
Esimerkiksi
list-style-image:url(listakuva.gif);
Esimerkki
- Tässä listassa käytämme luettelomerkkinä kuvaa.
- Kuva on neliö, jonka sisällä on pallo.
