Listat eli luettelot. Järjestämätön lista (unordered list)

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 Järjestämätön lista (unordered list) Luetelmamerkillä koottu lista, jonka jäsenet ovat toisiinsa nähden saman arvoisia Juomat: <ul> <li>maito</li> <li>mehu</li> <li>kahvi</li> </ul> 1

2 ul-elementin type-attribuutti type-attribuutti on Transitional (ei Strict), korvataan CSS:ssä list-style-type:llä type-attribuutti type="circle" vastaava css-sääntö: list-style-type: circle lista-merkki type="disc" list-style-type: disc type="square" list-style-type: square Järjestetty lista (ordered list) 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ä <ol> <li>avaa editori</li> <li>kirjoita koodi</li> <li>tallenna</li> </ol> 1. avaa editori 2. kirjoita koodi 3. tallenna 2

3 ol-elementin attribuutit start kertoo mistä numerointi alkaa Esim. start="5" 5. tarkista koodi 6. korjaa virheet Transitional, CSS:ssä ei ole vastaavaa Järjestetyn listan type-attribuutti type kertoo miten numeroidaan esim. type="a" a. avaa editori b. kirjoita koodi c. tallenna Transitional, CSS:ssä korvataan list-styletype:llä typeattribuutti type="a" type="a" type="i" type="i" type="1" vastaava css-sääntö: list-style-type:upper-alpha list-style-type:lower-alpha list-style-type:upper-roman list-style-type:lower-roman list-style-type:decimal numerointi listassa A, B, C, a, b, c, I, II, III, i, ii, iii, 1, 2, 3,... 3

4 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 Esimerkki <ol type="1" start="3"> <li>lista alkaa</li> <li type="a">kirjain</li> <li>lista jatkuu</li> <li value="10">kymppi</li> <li>lista loppuu</li> </ol> 4

5 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 <dl> <dt>koira <dd>musti</dd> </dt> <dt>kissa <dd>mirri</dd> </dt> </dl> 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 5

6 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 olelementin vanhempi-elementiltä 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 6

7 CSS list-style-position list-style-position:lla määritellään listamerkin sijoitus tekstiin nähden list-style-position:outside list-style-position:inside 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. 7