Listan ominaisuudet

list-style-type
list-style-image
list-style-position
list-style

Listan ominaisuuksia voidaan muuttaa hieman CSS:n avulla. Seuraavassa käsitellään ominaisuudet list-style-type, list-style-image, list-style-position ja list-style.

list-style-type

list-style-type-ominaisuuden avulla lista-alkiolle voidaan määritellä lista-alkion tunnistin.

list-style-type: disc | circle | square | decimal | lower-roman | upper-roman | lower-aplha | upper-alpha | none;

list-style-type-ominaisuus on periytyvä, mutta sitä voidaan käyttää ainoastaan listaelementtien kanssa.

Seuraavassa esimerkissä lista on numeroitu käyttäen kokonaislukuja.

ol {
  list-style-type: decimal; /* Järjestetty lista (1,2,3, ...) */
}

Seuraavassa esimerkissä lista on numeroitu pienillä roomalaisilla kirjaimilla.

ol {
  list-style-type: lower-roman; /* Järjestetty lista (i,ii,iii,...) */
}

Seuraavasa esimerkissä lista on järjestämätön lista, jossa lista-alkiot merkitään neliöllä.

ul {
  list-style-type: square; /* Järjestämätön lista (■,■,■,... ) */
}

list-style-image

list-style-image-ominaisuudella lista-alkioiden erottimeksi voidaan laittaa jokin kuva.

list-style-image: <url> | none;

list-style-image-ominaisuus on periytyvä, mutta sitä voidaan käyttää ainoastaan listaelementtien kanssa.

ul {
  list-style-image: url(http://palvelin/hakemisto/pallukka.gif);
}

list-style-position

list-style-position-ominaisuudella voidaan määritellä kuinka lista-alkio näytetään suhteessa listan sisältöön.

list-style-position: inside | outside;

list-style-position-ominaisuus on periytyvä, mutta sitä voidaan käyttää ainoastaan listaelementtien kanssa.

list-style

list-style-ominaisuuden avulla voidaan määritellä keskitetysti edellä esitettyjä listaan vaikuttavia ominaisuuksia list-style-type, list-style-position ja list-style-image.

list-style: <list-style-type> || < list-style-position> || <list-style-image>;

Seuraavassa esimerkissä määritellään lista-alkion erottimeksi pieni roomalainen numero ja lista-alkion erotin määritellään laitettavaksi listan sisään.

ol {
  list-style: lower-roman inside;
}

Seuraavaan esimerkkiin on koottu listan erilaisia ominaisuuksia.

ol.lower-roman {
  list-style-type: lower-roman;
  list-style-position: inside;
}

ul.square {
  list-style-type: square;
  list-style-position: outside;
}

ul.kuva {
  list-style-image: url(testi2.gif);
}

Seuraavassa on sen HTML-tiedoston lähdekoodi, jota muutetaan edellä määritellyllä tyylilomakkeella.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
<html>
<head>
<link rel="StyleSheet" href="listat.css" type="text/css" />
<title>CSS-esimerkeissä tarvittava tiedosto</title>
</head>
<body>
<h1>Listaominaisuuksia</h1>
<ol class="lower-roman">
<li>Uloin lista - ensimmäinen alkio</li>
<li>Uloin lista - toinen alkio <br />
esimerkkitekstiä esimerkkitekstiä esimerkkitekstiä esimerkkitekstiä
esimerkkitekstiä esimerkkitekstiä esimerkkitekstiä esimerkkitekstiä
esimerkkitekstiä esimerkkitekstiä esimerkkitekstiä esimerkkitekstiä
esimerkkitekstiä esimerkkitekstiä esimerkkitekstiä esimerkkitekstiä
</li>
<li>Uloin lista - kolmas alkio
<ul class="square">
<li>Sisempi lista - ensimmäinen alkio</li>
<li>Sisempi lista - toinen alkio
<ul class="kuva">
<li>Sisin lista - ensimmäinen alkio</li>
<li>Sisin lista - toinen alkio</li>
<li>Sisin lista - kolmas alkio</li>
</ul>
</li>
<li>Sisempi lista - kolmas alkio <br />
esimerkkitekstiä esimerkkitekstiä esimerkkitekstiä esimerkkitekstiä
esimerkkitekstiä esimerkkitekstiä esimerkkitekstiä esimerkkitekstiä
esimerkkitekstiä esimerkkitekstiä esimerkkitekstiä esimerkkitekstiä
esimerkkitekstiä
</li>
</ul>
</li>
</ol>
</body>
</html>

Kuva 15: Esimerkki erilaisista listan ominaisuuksista.

Käyttäjien kommentit

Muut elementin ominaisuudet