CSS/Keele struktuur
Lihtsad stiilid
muudaKõige lihtsamal juhul määratakse stiilid järgneva konstruktsiooniga:
ELEMENT { PARAMEETER: VÄÄRTUS }
kus
- ELEMENT on suvaline HTML-i element,
- PARAMEETER on suvaline CSS-i parameeter ja
- VÄÄRTUS on üks võimalikest antud parameetri väärtustest.
Näiteks parameetri color
väärtuseks võib muuhulgas olla kas red
, blue
või green
. Seega võime anda elementidele h1
, h2
, h3
, h4
ja h5
näiteks järgmised color
väärtused:
h1 { color: red } h2 { color: blue } h3 { color: blue } h4 { color: green } h5 { color: green }
Selle tulemusena näidatakse:
h1
teksti punasena,h2
jah3
teksti sinisena ningh4
jah5
teksti rohelisena.
Stiilid mitmele elemendile korraga
muudaKuna nii h2
ja h3
kui ka h4
ja h5
on täpselt sama stiiliga, siis võime need deklaratsioonid kokku võtta, eraldades elemendid komaga:
h1 { color: red } h2, h3 { color: blue } h4, h5 { color: green }
See deklaratsioon on täiesti samaväärne eelnenuga.
Järgnevalt lisame uue parameetri text-decoration
. See võib omada väärtusi none
,
underline
, overline
, line-through
või blink
. Lisame mõningad text-decoration
parameetrid oma stiilidele:
h1 { color: red }
h1 { text-decoration: underline }
h2, h3 { color: blue }
h2, h3 { text-decoration: line-through }
h4, h5 { color: green }
h4 { text-decoration: overline }
h5 { text-decoration: none }
Selle stiililehe rakendamise tulemus on, et:
h1
on punane ja allajoonitud,
h2
ja h3
on sinised ning läbijoonitud,
h4
on roheline ja ülajoonitud ning
h5
on roheline ja ilma jooneta.
Ka siinkohal saame oma stiililehte lihtsustada, koondades ühe elemendi kohta käivad parameetrid looksulgude sisse ja eraldades semikooloniga:
h1 { color: red; text-decoration: underline }
h2, h3 { color: blue; text-decoration: line-through }
h4, h5 { color: green }
h4 { text-decoration: overline }
h5 { text-decoration: none }
võib ka nii:
h1 { color: red; text-decoration: underline }
h2, h3 { color: blue; text-decoration: line-through }
h4 { color: green; text-decoration: overline }
h5 { color: green; text-decoration: none }
Samuti võib loetavuse parandamise huvides lisada tühikuid ja reavahetusi, et liigendada teksti just nii nagu tarvis:
h1 {
color: red;
text-decoration: underline;
}
h2, h3 {
color: blue;
text-decoration: line-through;
}
h4 {
color: green;
text-decoration: overline;
}
h5 {
color: green;
text-decoration: none;
}
Tasub tähele panna, et viimases näites on semikoolonid paigutatud iga parameetri järele, mitte üksnes nende vahele. Viimase parameetri järel olev semikoolon on küll valikuline, kuid pigem võib selline praktika pigem kasulikuks osutuda, sest niiviisi ei teki probleeme sellest, et lisades deklaratsioonile uue parameetri unustatakse lisada semikoolon eelmise parameetri ja uue vahele.
Vaikimisi väärtused
muuda
Kõigil HTML-i elementidel on juba eelnevalt defineeritud vaikimisi stiilid. strong
element on alati rasvane, a
element alla joonitud, h1
suur ja rasvane. Näiteks parameeter font-style
on elemendil em
vaikimisi italic
. Kui me soovime, et element em
oleks kaldkirjas võime me talle kirjutada järgmise stiili:
em {
font-style: italic;
}
Üldjuhul me seda aga ei tee, sest em
on alati kaldkirjas. Pigem muudame me em
-i parameetrit font-style
siis, kui soovime, et ta kindlasti kaldkirjas poleks.
Kaskaadimine
muuda
Mis aga juhtub siis, kui me teeme sellise stiililehe:
p { text-decoration: underline }
p, em { text-decoration: overline }
h1, p { text-decoration: line-through }
Siinkohal avaldub CSS-i kaskaaduv iseloom. Brauser liigub läbi meie CSS-faili ülevalt alla ning kui ta kohtab samal elemendil sama omadust uuesti, siis ta lihtsalt jätab meelde viimase. Seda protsessi võib ette kujutada järgnevalt:
- rida: element
p
on alla joonitud,
- rida: element
p
on ülajoonitud, element em
on ülajoonitud,
- rida: element
p
on läbikriipsutatud, element em
on ülajoonitud, element h1
on läbikriipsutatud.
Kaskaadumine on CSS-i üks peamisi omadusi, mille abil võib saavutada suurepäraseid tulemusi. Kaskaadimise teema leiab käsitlemist ka mitmetes järgnevates peatükkides.
Kommentaarid
muuda
Kommentaarid kirjutatakse CSS-is märkide /*
ja */
vahele:
/* See on üks üsna pikk kommentaar,
mis võiks kirjeldada näiteks seda
et järgnev stiil muudab kõik
paragrahvid läbijoonituks,
kuid ei pane teksti kursiivi. */
p {
text-decoration: line-through;
/* color: red; */
}
Kommentaare kasutatakse selleks et lisada koodi kirjeldavat teksti või märkusi. Samuti on kommentaarid kasulikud selleks, et osa koodist "välja kommenteerida" ehk kehtetuks muuta, nagu on eelmises näites tehtud parameetriga color
.