CSS/Keele struktuur

Lihtsad stiilid

Kõ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 ja h3 teksti sinisena ning
• h4 ja h5 teksti rohelisena.

Stiilid mitmele elemendile korraga

Kuna 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

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

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:

1. rida: element p on alla joonitud,
2. rida: element p on ülajoonitud, element em on ülajoonitud,
3. 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

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.

Raamat: CSS

<< Sidumine HTML-iga

Ühikud >>

Sisukord