Päivitetty: 18.01.2003.

List

<< Ominaisuudet

display esimerkki

CSS ja HTML: Tulos:
.disp1 { display: none }

<img src="../image/pilvi1.jpg" width="70" height="40" class="disp1">

display: none saa aikaan sen ettei kuva näy.

   

.disp2 { display: inline; color: green}

<p>Tässä on kappale <h4 class="disp2">jossa on inline tekstiä </h4>kappale jatkuu...</p>

display: inline muuttaa <h4> -elementin, joka on siis block -elementti, inline -elementiksi.

Tässä on kappale

jossa on inline tekstiä

kappale jatkuu...
   
.disp3 { display: block }

<p>P-tagi <em class="disp3">Lohko tekstiä </em>p jatkuu...</p>

display: block muuttaa <em> -elementin, joka on siis inline -elementti, block -elementiksi.

P-tagi Lohko tekstiä p jatkuu...
   
.disp4 {display: list-item; list-style-type: square }

<b class="disp4">Tässä</b>
<b class="disp4">on</b>
<b class="disp4">muka</b>
<b class="disp4">lista</b>

display: list-item muuttaa <b> -elementin, joka on siis inline -elementti, list-item -elementiksi.

Tässä on muka lista

   

Viimeinen sääntö ei toimi IE 4/5 -selaimissa ja Netscape 4.x menee siitä täysin jumiin (sääntö tuodaankin @import-notaatiolla, joten NN 4 ei sitä 'näe') mutta uudet selaimet ymmärtävät sen. Vaikka sääntö on hieman arveluttava, käytän sitä selventävänä esimerkkinä.

Idea menee näin; <b> -elementtiin kiinnitetään luokka .disp4, jonka ominaisuus display: list-item muuttaa b-elementin lista-luokaksi, jolle sitten määritetään ominaisuus list-style-type: square.

Huomaa, että jokainen sana ympyröidään b-elementillä. Tästä seuraa se, että jokaisen sanan jälkeen tehdään automaattisesti rivinvaihto (koska elementti tyyppi on list-item eli se on Block -elementti). Kätevää vai mitä?

 

Tehdään toinen samanlainen testi. Esimerkissä käytetään määritelmälistaa <dl>, jolla on kaksi tasoa <dt> ja <dd>. Kyseiset elementit eivät normaalisti käytä kuvia tai pallukoita. Tämäkään sääntö ei toimi IE:ssä mutta Operassa kylläkin.
dt { display: list-item;
list-style: url(kuvat/1.gif)
}

dd { display: list-item;
list-style: url(kuvat/nuoli.gif)
}
Pääkohta (dt)
alakohta(dd)
Pääkohta (dt)
alakohta(dd)
alakohta 2.2

 

<<Alkuun

white-space esimerkki

CSS , HTML ja tulos:
.pre { white-space: pre } /* Ei toimi IE:ssä! */
<b.pre>Tässä on tekstiä jossa käytettään (2xenter) rivinvaihtoa, (6xspace) välilyöntejä (enter) taas rivinvaihto sekä (2xtab) sarkainta.</b>
CSS , HTML ja tulos:
.nw { white-space: nowrap } /* Ei toimi NN 4.x:ssä */
<b.nw>Tämän solun leveys on 240px mutta se venyy</b> 240px

<<Alkuun

list-style-type esimerkki

CSS ja tulos:
UL { list-style-type : }

disc

  • yksi
  • kaksi
  • kolme

circle

  • yksi
  • kaksi
  • kolme

 

square

  • yksi
  • kaksi
  • kolme

 

OL { list-style-type : }

upper-roman

  1. yksi
  2. kaksi
  3. kolme

lower-roman

  1. yksi
  2. kaksi
  3. kolme

decimal

  1. yksi
  2. kaksi
  3. kolme

upper-alpha

  1. yksi
  2. kaksi
  3. kolme

lower-alpha

  1. yksi
  2. kaksi
  3. kolme

none

  1. yksi
  2. kaksi
  3. kolme

Jälkeläisvalitsin on erityisen kätevä listojen yhteydessä.

OL { list-style-type : upper-roman }
OL OL { list-style-type : lower-roman }

OL OL OL { list-style-type : lower-alpha }

  1. OL
  2. OL
    1. ol ol
    2. ol ol
      1. ol ol ol
      2. ol ol ol
  3. OL

<<Alkuun

list-style-image esimerkki

CSS , HTML ja tulos:
ul { list-style-image: url(star.gif) }
  • yksi
  • kaksi
  • kolme

Myös tässä voidaan hyödyntää jälkeläisvalitsinta:

ol { list-style-image: url(1.gif) }
ol ol { list-style-image: url(2.gif) }
ol ol ol { list-style-image: url(3.gif) }

  1. OL
  2. OL
    1. ol ol
    2. ol ol
      1. ol ol ol
      2. ol ol ol
  3. OL

<<Alkuun

list-style-position esimerkki

CSS ja tulos:
{list-style-position: inside}
{list-style-position: outside}
list-style-position +
list-style-image
  • inside
  • inside
  • outside
  • outside
  • inside
  • inside
  • outside
  • outside

<<Alkuun

list-style esimerkki

CSS ja tulos:
list-style: outside url(star.gif)
  • outside
  • outside
list-style: inside url(1.gif)
  • inside
  • inside
ol { list-style: outside upper-roman }
ol ol { list-style: inside lower-roman
}
ol ol ol{ list-style: outside none }
  1. OL
    1. OL OL
      1. OL OL OL

<<Alkuun

© Petteri Perälä 2001-2003.
E-mail: [ petepe@mbnet.fi ].