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:
- joone laius
- joone tüüp - näiteks, ühtlane või punktiir.
- joone värv
Lisa lugemist
Kindlasti soovitame veel lisa infot lugeda nendelt lehtedelt: