Veebilehe tegemise õpetus

Mis on CSS?

CSS (Cascading Style Sheets) on veebidisaini keel.

Kasutades CSS'i on võimalik sättida ja kujundada HTMLiga loodud veebilehe sisu ja struktuuri.

Näiteks saab CSS'iga määrata ja muuta veebilehe elementide värve, fonte, joondumist ja paigutus.

CSS'i sidumine HTML päises


                

Näidiselt näeme kuidas HTML faili päises on viidatud CSS failile.
Selleks kasutame "link" silti, kus määrame viidatava faili tüübi (stylesheet) ja asukoha (style.css).

<link> Loob seose soovitud failiga. Antud silt nõuab omadusi:


  • rel - seotava faili tüüp
  • href - seotava faili asukoht

Värv, font ja taustavärv

HTML näidis

CSS näidis


                    

                    

Lähtudes üleval toodud näitele, näeme kuidas HTML lehega seotud CSS kood veebilehe stiili muudab.
Oleme määranud tervele HTML kehale omaduse "background-color" (lightblue),
pealkirjale omadus "color" (red),
paragrafide puhul on muudetud font'i suurus ja stiil.

background-color: Muudab HTML elementide taustavärvi.

color: Muudab HTML elementide värvi.

font-size: Muudab teksti suurust. Mõned suurusühikud CSS'is:

  • px - pikslite arv
  • "omadus" - näiteks: small, medium, large
  • rem - dokumendi peamine fondi suurus

font-family: Muudab teksti fonti stiili.

Selector'ite kasutamine

HTML näidis

CSS näidis


                    

                    

Näidiselt näeme kuidas kasutatakse selector'eid, et määrata omadusi vaid soovitud elementidele.
Kasutades ID ja klassi selector'it, tuleb selector nimetada ja vastavalt siduda HTML failis ja CSS failis.
ID selector on ainulaadne, ehk igal elemendil võib olla ID selector, kuid mitte sama nimeline.
Klassi selector on korduv, ehk sama nimega klassi saab kasutada mitmel elementidel.

* võimaldab määrata omadusi tervele HTML dokumendile.

"silt" (näiteks h1 ja div) Määrab omadused valitud siltidele,

id="" ja #"" , kus jutumärkide vahel selector'i nimi, määrab omadused valitud ID-ga sildile.

class="" ja ."" , kus jutumärkide vahel selector'i nimi, määrab omadused valitud klassiga siltidele.

Elementide mõjutamine

HTML näidis

CSS näidis 1


                    

                    

CSS näidis 2

CSS näidis 3


                        

                        

Näidisel näeme kasti, millele määrame suurused, muudame paigutust ja värvime piirjoone.

width: Muudab elemendi laiust.

height: Muudab elemendi pikkust.

margin: Loob tühja ruumi elemendi ümber. Erinevaid kasutusviise:

  • margin-"suund" - näiteks, margin-right: 20px
  • margin: top right bottom left - näiteks, margin: 10px 20px 10px 20px

border: Määrab elmenti ümbritseva piirjoone. Järgnevalt omaduse parameetrid:

  1. joone laius
  2. joone tüüp - näiteks, ühtlane või punktiir.
  3. joone värv

Lisa lugemist

Kindlasti soovitame veel lisa infot lugeda nendelt lehtedelt: