Listat eli luettelot listaelementit ovat lohkoelementtejä:  lista ja listan alkiot alkavat uudelta riviltä  listan jälkeen tuleva elementti alkaa uudelta.

Esitys aiheesta: "Listat eli luettelot listaelementit ovat lohkoelementtejä:  lista ja listan alkiot alkavat uudelta riviltä  listan jälkeen tuleva elementti alkaa uudelta."— Esityksen transkriptio:

1 Listat eli luettelot listaelementit ovat lohkoelementtejä:  lista ja listan alkiot alkavat uudelta riviltä  listan jälkeen tuleva elementti alkaa uudelta riviltä listan alkuun ja loppuun selain jättää tyhjää tilaa lista-alkioiden välissä tyhjää tilaa ei ole listan vasemmassa reunassa on tyhjää tilaa tyhjää tilaa listan ja alkioiden ympärillä voidaan lisätä ja poistaa css-tyylimäärittelyillä muokkaamalla margin- ja padding-arvoja

2 Järjestämätön lista (unordered list) Luetelmamerkillä koottu lista, jonka jäsenet ovat toisiinsa nähden saman arvoisia Juomat: maito mehu kahvi

3 ul-elementin type-attribuutti type-attribuuttivastaava css-sääntö:lista-merkki type="circle"list-style-type: circle type="disc"list-style-type: disc type="square"list-style-type: square type-attribuutti on Transitional (ei Strict), korvataan CSS:ssä list-style-type:llä

4 Järjestetty lista (ordered list) avaa editori kirjoita koodi tallenna 1. avaa editori 2. kirjoita koodi 3. tallenna Käytetään kun halutaan korostaa lista-alkioiden järjestystä (esim. ohjeet) lista-elementtinä toimii ol-elementti ja sen sisällä lista-alkiot merkitään li-elementillä

5 ol-elementin attribuutit type  kertoo miten numeroidaan  esim. type="a" a. avaa editori b. kirjoita koodi c. tallenna  Transitional, CSS:ssä korvataan list-style- type:llä start  kertoo mistä numerointi alkaa  Esim. start="5" 5. tarkista koodi 6. korjaa virheet  Transitional, CSS:ssä ei ole vastaavaa

6 Järjestetyn listan type-attribuutti type- attribuutti vastaava css-sääntö:numerointi listassa type="A"list-style-type:upper-alphaA, B, C,… type="a"list-style-type:lower-alphaa, b, c,… type="I"list-style-type:upper-romanI, II, III,… type="i"list-style-type:lower-romani, ii, iii,… type="1"list-style-type:decimal1, 2, 3,...

7 li-elementin attribuutit type  Kyseisen lista-alkion edessä oleva merkki voidaan muuttaa halutun tyyppiseksi numeroksi tai listamerkiksi  Vaihtoehdot samat kuin ol- ja ul-elementeissä  Transitional, vastine CSS:ssä list-style-type value  Kyseisen lista-alkion numero jos kyseessä on järjestetty lista  Transitional, CSS:ssä ei ole vastaavaa

8 Esimerkki lista alkaa kirjain lista jatkuu kymppi lista loppuu

9 Määritelmälista (definiton list) dl-elementillä kootaan joukko määritelmiä listaksi dt-elementillä lisätään listaan määriteltäviä termejä dd-elementillä lisätään listaan termien määritelmät Koira Musti Kissa Mirri

10 CSS ja listat display:list-item  oletuksena ul- ja ol-elementille  halutessa voidaan laittaa myös muille elementeille esim. dt, dd tai vaikkapa p- elementille, jolloin niitä voidaan käsitellä listan tavoin display:inline  käytettäessä listaelementit tulevat samalle riville peräkkäin

11 CSS list-style-type list-style-type  kertoo listan merkin (periytyy lapsielementeille) ja sopii kaikille elementeille, joille on määritelty display:list-item  li-elementille CSS:llä annettu tekstin väri vaikuttaa myös listamerkkiin, mutta ei taustaväriin vaan tastaväri tulee ul- tai ol- elementin vanhempi-elementiltä

12 CSS list-style-image list-style-image  määritellään listamerkin paikalle haluttu kuva  esim. ul {list-style-image:url(logo.gif)}  testaa eri selaimissa selaimet sijoittavat kuvan eri korkeuksille ja eri paikkaan tekstiin nähden lisää tyhjää tilaa ainakin kuvan oikealle puolelle jotta kuva mahtuu kunnolla  Läpinäkyvä gif-kuva sulautuu parhaiten taustaan

13 CSS list-style-position list-style-position:lla määritellään listamerkin sijoitus tekstiin nähden list-style-position:outside list-style-position:inside

14 CSS list-style list-style  Lyhennemerkintä, jolla voidaan elementille antaa yhdellä kertaa seuraavat ominaisuudet: list-style-type list-style-image list-style-position  Käytännössä kannattaa antaa kaikki tarvittavat ominaisuudet, jotta toimisi oikein eri selaimilla.