Css ja www-sivu

Harjoittelemme seuraavaksi taulukoiden määrittelemistä ja kuvien käyttöä css-koodeja hyödyksi käyttäen.

Taulukot
Css,llä on helppoa määritellä taulukoille muotoja. Taulukot nimetään # avuksi käyttäen. Ensiksi taulukoille määritellään koko width ja height-ominaisuuksilla.

width/height - leveys ja korkeus esim 100%, 200px
margin-left - taulukon sijoitus vasemmalta sivulla esim 100px
border-width - reunaviivan paksuus esim 1px
border-style - reunaviivan tyyli esim solid, dotted
border-color - reunaviivan väri esim  black, #003399
border-spacing - solujen viivojen väli esim 10px
padding - irtautuminen reunasta esim 10px 10px 10px 10px
text-align - tekstin sijoitus esim left, center

Laatikot otetaan käyttöön <div id> -koodilla.
 

Kuvat ja linkkityylit
Kuvat tuodaan sivulle html-koodia käyttäen. Kuvien esille tuomista voidaan kuitenkin muokata laatimalla css-koodi img-valitsimelle. Oheisessa esimerkissä luomme kuville reunaviivan border-komennolla ja efektireunuksen radius ja padding-käskyllä. 

Linkkiefektin saa laatimalla a-valitsimelle omat määritelmät. Hoover-määritelmät koskevat aktiivista linkkiä kun hiiren osoitin on linkin päällä.

Tehtäväkuvat