Päivitetty: 10.03.2003.

Listat

CSS tarjoaa listojen yhteydessä 8 eri merkkiä, joita voidaan käytetään listamerkkinä. Vaihtoehtoisesti voit käyttää haluamaasi kuvaa. Voit myös vaikuttaa, miten elementtien sisällä olevia sarkaimia ja välilyöntejä tulkitaan. Lisäksi voit määritellä elementit kuulumaan inline, block tai list-item tyyppisiksi.


Listat

display

Määrittelee elementin tyypin.

Yhteensopivuus: CSS1 ja CSS2 (IE4, NN4, Opera 3.6)
Sallitut arvot: none | inline | block | list-item
Oletusarvo: block
Käyttö: kaikki elementit
Periytyvä: Ei
Prosenttiarvo: Ei

Huomaa, että HTML-kielen elementit kuuluvat aina johonkin tiettyyn tyyppiin. Mutta XML -kielessä arvot pitää määritellä aina itse.

none
Arvolla none elementtiä ei näytetä ollenkaan. Tätä voidaan hyödyntää esimerkiksi luomalla huomautus vanhoille selaimille tyyliin: <p style="display: none">Nämä sivut käyttävät CSS määrittelyä mutta selaimesi ei tue niitä!</p> Uudet selaimet eivät kyseistä riviä näytä, mutta esim. NN 3.x näyttää sen.
inline
Inline- eli teksti-elementti sijaitsee aina jonkin lohkon sisällä, eli se ei saa esiintyä yksistään (ei ainakaan jos noudatetaan oikeaoppisia HTML 4.0 / xHTML 1.0 määrittelyjä). Inline -elementti ei tee rivinvaihtoa. Tyypillisiä inline elementtejä ovat esim. <strong> ja <em>.
block
Block- eli lohko-elementti tekee aina rivinvaihdon ennen ja jälkeen elementin, joskus myös tyhjää tilaa tehdään sivusuunnassa, kuten <blockquote> elementti tekee. Muita block -elementtejä ovat mm. <p>, <div> ja <h1>...<H6>.
list-item
List-item eli lista-elementti on tavallaan block -elementti, koska sen ei tarvitse sijaita toisen elementin sisällä. Lisäksi jokaisen listakohdan jälkeen tehdään rivinvaihto. Tavallisimmat List-item elementit ovat <ol> ja <ul>.

display esimerkki

Katso esimerkkejä.

!Elementin määrittäminen list-item:ksi ei toimi IE:ssä mutta Opera:ssa kyllä. Lisäksi se sotkee NN 4.x selaimet pahasti.

<< Alkuun


white-space

Muotoiltu teksti.

Yhteensopivuus: CSS1 ja CSS2 (IE4, NN4, Opera 3.6) IE 5.0 / 5.5 ei
Sallitut arvot: normal | pre | nowrap
Oletusarvo: normal
Käyttö: block-level -elementit
Periytyvä: Kyllä
Prosenttiarvo: Ei
pre
Ominaisuus pre näyttää kaikki välilyönnit, sarkainsiirrot sekä rivinvaihdot. Voidaankin sanoa, että white-space: pre vastaa täysin HTML:n <pre>...</pre> elementtiä.
nowrap
Ominaisuus nowrap pakottaa (taulukon) tekstin näkymään yhdellä rivillä.

white-space esimerkki

PRE { white-space: pre }

Lisää esimerkkejä.

!Ominaisuus 'pre' ei toimi IE -selaimissa. Vastaavasti 'nowrap' ei toimi NN -selaimissa

<< Alkuun


list-style-type

Määrittelee listan luettelomerkit.

Yhteensopivuus: CSS1 ja CSS2 (IE4, NN4.7, Opera 3.6)
Sallitut arvot: none | disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha
Oletusarvo: disc
Käyttö: Elementit joiden 'DISPLAY' -ominaisuuden arvo on 'LIST-ITEM'
Periytyvä: Kyllä
Prosenttiarvo: Ei

list-style-type esimerkki

  • UL {list-style-type:circle }

Lisää esimerkkejä.

<< Alkuun


list-style-image

Listan luettelomerkkinä oleva kuva.

Yhteensopivuus: CSS1 ja CSS2 (IE4, Opera 3.6)
Sallitut arvot: <url> | none
Oletusarvo: none
Käyttö: Elementit joiden 'DISPLAY '-ominaisuuden arvo on 'LIST-ITEM'
Periytyvä: kyllä
Prosenttiarvo: ei
<url>
URL voi olla suhteellinen ../kuvat/kuva.gif
absoluuttinen http://www.osite.fi/hakemisto/kuva.gif

list-style-image esimerkki

list-style-image: url(star.gif)

  1. Ensimmäinen
  2. Toinen

Lisää esimerkkejä.

!Huomaa, että jos kuvat ovat korkeampia kuin teksti, tulee rivien väliin tyhjää tilaa. Kuten viereisestä esimerkistä voi havaita.

list-style-position

Määrittelee luettelomerkin paikan.

Yhteensopivuus: CSS1 ja CSS2 (IE5, Opera 3.6)
Sallitutarvot: inside | outside
Oletusarvo: outside
Käyttö: Elementit joiden 'DISPLAY' -ominaisuuden arvo on 'LIST-ITEM'
Periytyvä: Kyllä
Prosenttiarvo: Ei

list-style-position esimerkki

  • insiede
  • outside

Lisää esimerkkejä.

<< Alkuun


list-style

Listi-style on pikakirjoite, joka yhdistää seuraat ominaisuudet: list-syle-type, list-style-image sekä list-style-position.

Yhteensopivuus: CSS1 ja CSS2 (IE4, NN4?, Opera 3.6)
Sallitut arvot: [disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none] || [inside | outside] || [<url> | none]
Oletusarvo: Ei käytössä pikakirjoitteessa
Käyttö: Elementit joiden 'DISPLAY' -ominaisuuden arvo on 'LIST-ITEM'
Periytyvä: Kyllä
Prosenttiarvo: Ei

list-style esimerkki

list-style: inside circle

  • Ensimmäinen
  • Toinen

Lisää esimerkkejä.

<< Alkuun


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

Valid CSS! Valid HTML 4.01!