CSS kuvaeli
- Edellinen sivu CSS kuvakokoelma
- Seuraava sivu CSS ominaisuusvalitsimet
Kuvahahmo
Kuvahahmo on kuva, joka sisältää kuvakokoelman.
Monia kuvia sisältävä sivu voi kestää kauan ladata ja voi tuottaa useita palvelinpyyntöjä.
Kuvahahmo vähentää palvelinpyyntöjen määrää ja säästää leveänykyä.
Kuvahahmo - Yksinkertainen esimerkki
Käytämme seuraavaa yhtä kuvaa ("navsprites.gif") sen sijaan, että kolmea erillistä kuvaa:
Voimme näyttää vain tarvittavan kuvapätkän käyttämällä CSS:ää.
Esimerkissä alla CSS määrittää, mikä osa "navsprites.gif"-kuvasta näytetään:
esimerkki
#home {
width: 46px;
height: 44px;
background: url(navsprites.gif) 0 0;
}
Esimerkki selityksellä:
<img id="home" src="trans.gif">- Määritellään vain pieni läpinäkyvä kuva, koska src-ominaisuus ei voi olla tyhjä. Todellinen näytettävä kuva on CSS:ssä määritelty taustakuva.width: 46px; height: 44px;- Määritellään käytettävät kuvapätkätbackground: url(navsprites.gif) 0 0;- Määritellään taustakuvan sijainti (vasen 0px, ylä 0px)
Kuvahahmo - Luodaan navigointilista
Haluamme käyttää hahmo- taustakuvaa ("navsprites.gif") luodaksemme navigointilistan.
Käytämme HTML-listaa, koska se voi olla linkki ja tukee myös taustakuvia:
esimerkki
#navlist {
position: relative;
}
#navlist li {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 0;
}
#navlist li, #navlist a {
height: 44px;
display: block;
}
#home {
left: 0px;
width: 46px;
background: url('img_navsprites.gif') 0 0;
}
#prev {
left: 63px;
width: 43px;
background: url('img_navsprites.gif') -47px 0;
}
#next {
left: 129px;
width: 43px;
background: url('img_navsprites.gif') -91px 0;
}
Esimerkki selityksellä:
- #navlist {position:relative;} - Asetetaan sijainti suhteelliseksi, jotta voidaan käyttää siinä absoluuttista sijoittelua
- #navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;} - ulkoreunus ja sisätila asetetaan 0, poistetaan list-style ja kaikki luettelojen kohteet ovat absoluuttisessa sijoituksessa
- #navlist li, #navlist a {height:44px;display:block;} - kaikki kuvien korkeus on 44px
nyt alamme asettaa jokaiselle erityiselle osalle sijainnin ja tyylit:
- #home {left:0px;width:46px;} - aina vasemmalle sijoitettu, kuvan leveys 46px
- #home {background:url(navsprites.gif) 0 0;} - määritellään taustakuva ja sen sijainti (left 0px, top 0px)
- #prev {left:63px;width:43px;} - sijoitetaan oikealle 63px (#home leveys 46px + projektien välillä oleva ylimääräinen tila), leveys 43px.
- #prev {background:url('navsprites.gif') -47px 0;} - määritellään taustakuva oikealle 47px (#home leveys 46px + 1px erottelija)
- #next {left:129px;width:43px;} - sijoitetaan oikealle 129px (#prev alku on 63px + #prev leveys on 43px + ylimääräinen tila), leveys 43px.
- #next {background:url('navsprites.gif') -91px 0;} - määritellään taustakuva oikealle 91px (#home leveys 46px + 1px erottelija+ #prev leveys 43px + 1px erottelija)
kuvasprite - hiiren osoittimen olevan yllä -efekti
nyt lisäämme hiiren osoittimen olevan yllä -efektin navigointilistaan.
vinkki::hover valitsin voidaan käyttää kaikissa elementissä, ei pelkästään linkkeissä.
uusi kuvasi ("navsprites_hover.gif") sisältää kolme navigointikuvaa ja kolme kuvaa hiiren osoittimen olevan yllä -efektejä varten:
koska tämä on kuva, ei kuuden erillisen tiedoston summa, joten kun käyttäjä pitää hiiren osoittimen yllä kuvan päällä:ei ole latausviivytystä.
lisäämällä vain kolme riviä koodia saamme hiiren osoittimen olevan yllä -efektin:
esimerkki
#home a:hover {
background: url('navsprites_hover.gif') 0 -45px;
}
#prev a:hover {
background: url('navsprites_hover.gif') -47px -45px;
}
#next a:hover {
background: url('navsprites_hover.gif') -91px -45px;
}
Esimerkki selityksellä:
#home a:hover {background: transparent url('img_navsprites_hover.gif') 0 -45px;} - Määrittelemme kaikille kolmelle hiiren osoittimen yllä olevalle kuvalle saman taustakuvan sijainnin, vain 45 kuvapistettä alas
- Edellinen sivu CSS kuvakokoelma
- Seuraava sivu CSS ominaisuusvalitsimet
