KL00CT67
Web-ohjelmoinnin perusteet
Tehtävä 5
Tavoite
Tämän tehtävän tavoitteena on harjoitella CSS-määritysten syntaksia ja yksinkertaisiä tyylimäärittelyjä.
CSS-elementtejä
Tee yksinkertainen CSS-tyylitiedosto tyylit_t5.css Tehtävän 3
HTML-tiedostoa elementteja.html varten. Sijoita tyylit_t5.css-tiedosto
esimerkiksi hakemistoon tyylit.
Koska tyylimäärittely on omassa tiedostossaan, siihen on viitattava
elementteja.html HTML-sivun sisältävästä tiedosta siten, että selain
käyttää tyylejä näyttäessään HTML-sivun. Tyylejä käyttäjä versio
elementteja.html-sivusta voi näyttää esimerkiksi kuvan 1 mukaiselta.
Voit kuitenkin tehdä haluamasi tyylimääritykset.
Ohjeita
Tyylimäärittelyssä on oltava vähintään jonkin elementin taustan ja tekstin väriin sekä jonkin tai joidenkin elementtien tekstin fontteihin vaikuttavia määrityksiä.
Kuvan 1 mukaisessa ratkaisussa on käytetty seuraavia tyylimääreitä:
<body>-elementin taustaväri on vaalensininen (lightblue).<h1>-elementin sisältö on keskitetty (center) ja väriltään valkoinen (white).<p>-elementin sisällön fonttina käytetään verdanaa (verdana) ja fontin kokona 20 pikseliä (20px).
Materiaalin, yhteistyön ja tekoälyn käyttö
Hyödynnä tässä tehtävässä W3C:n CSS-tutoriaalin kohtia johdanto, syntaksi, valitsimet, taustat, värit, korkeus & leveys, teksti, fontit, listat, ja taulukot.
Voit tarvittaessa pyytää apua toiselta opiskelijalta tai opettajalta. Älä käytä tässä tehtävässä tekoälyä.
Kuvat
Kuva 1. Esimerkki sivun elementteja.html sisällöstä CSS:n kanssa.