Ime lekcije

Oblikovanje strani s CSS-razredi

Uporabljene tehnologije

CSS, HTML

Kaj se boste naučili

Kako s pomočjo tehnologije CSS definirati različne razrede stilov (style classes) v vaši HTML strani

Kaj se boste še naučili

	Kako definirati CSS razred (css class)
	Kako definirati razred, ki mu pripada HTML element

Pred to lekcijo preberi

Osnove CSS

Zagotavljanje enotnega izgleda strani

V lekciji Osnove CSS ste se naučili kako definirati stil HTML-elementa v samem elementu s pomočjo parametra style= ter nekatere osnovne CSS-parametre. V lekciji Zagotavljanje enotnega izgleda strani ste videli kako lahko s pomočjo style sheet-ov zagotovite enoten izgled celotne strani. Dosedanje znanje zadošča da lahko naredimo naslednje:

	Za vsak HTML element na strani definiramo njegov natančen izgled (stil)
	Za vsako vrsto HTML elementa (npr. za vse naslove) definiramo njen stil.

S tem znanjem lahko naredimo tudi Web strani, kjer imajo npr. bolj pomembni naslovi drugačno barvo - definiramo stil naslovov, nato pa za vsak pomemben naslov spremenimo to definicijo v samem naslovu. Deluje? Vsekakor. Zamudno? Seveda.

V tej lekciji bomo spoznali še en element tehnologije CSS - definiranje razredov stilov, ki nam omogočajo naslednje:

	V <STYLE> razdelku v HTML dokumentu (ali v zunanjem style sheet-u) definiramo različne izglede HTML dokumentov, vsakega kot svoj razred.
	HTML elemente na strani nato enostavno uvrstimo v željeni razred in jim s tem spremenimo izgled.

Ta način dela nam spet zagotavlja enoten izgled vseh sorodnih elementov na naši Web strani ali na celotnem Webu - če bomo spremenili definicijo razreda, se bo spremenil tudi izgled vseh HTML elementov, ki pripadajo temu razredu.

Beseda razred ki se uporablja v tej (in naslednjih lekcijah), nima nič skupnega s šolo, ampak izhaja iz terminologije objektnega programiranja, ki uporablja pojem object class, le-ta pa se v slovenščino nekoliko nerodno prevede kot objektni razred.

Definicija CSS-razreda

CSS-razred definiramo zelo enostavno - v definiciji v razdelku <STYLE> namesto imena HTML elementa napišemo ime razreda, ki mu na začetku dodamo piko.

Primer: Definicija modrega in rdečega razreda

Definirajmo dva HTML-razreda: enega, ki bo imel rdeč tekst in drugega, ki bo imel moder tekst. Dodajmo še definicijo glavnega naslova (<H1>), ki naj ima bele črke na modrem ozadju. Zelo enostavno:

<STYLE>

.rdec { color: red; }

.moder { color: blue; }

H1 { background-color: blue; color: white; }

</STYLE>

Imena razredov lahko vsebujejo črke in številke ter pomišljaje, ne pa posebnih znakov, npr. presledkov.

Uporaba CSS-razredov

CSS-razred, ki smo ga definirali v razdelku <STYLE> ali v zunanjem style sheet-u uporabimo enostavno tako, da v HTML element dodamo parameter class=ime-razreda. HTML element takoj ko mu dodamo ta parameter dobi vse lastnosti, ki smo jih definirali CSS-razredu.

Primer: Uporabimo razreda, ki smo ju definirali v HTML tekstu - v naslovu, odstavku in poševnem tekstu.

<H1>Navaden naslov</H1>

<P class=rdec>Odstavek rdečega razreda - barva teksta je rdeča</P>

<H1 class=rdec>Naslov rdečega razreda</H1>

<P>Navaden odstavek z <I class=moder>modrim poševnim tekstom</I></P>

Navaden naslov

Odstavek rdečega razreda - barva teksta je rdeča

Naslov rdečega razreda

Navaden odstavek z modrim poševnim tekstom

Iz zgornjega primera ste lahko razbrali tudi kako se stil CSS-razreda kombinira z lastnostmi HTML elementov:

	Če je lastnost stila definirana v samem HTML elementu, obvelja ta lastnost.
	Če HTML element pripada razredu in je lastnost stila definirana v razredu, obvelja ta lastnost.
	Če je lastnost definirana v definiciji stila HTML elementa, obvelja ta lastnost.
	V ostalih primerih HTML element podeduje lastnost nadrejenega HTML elementa. Primer: poudarjen tekst podeduje lastnosti odstavka, v katerem je, le-ta pa podeduje lastnosti telesa (<BODY>) HTML strani.

Malce bolj komplicirani CSS-razredi

Včasih dobimo ob oblikovanju HTML strani prav zanimive zahteve, na primer:

	Pomemben tekst naj bo modre barve ... enostavno, definiramo CSS-razred pomembno.
	Poudarjen pomemben tekst naj ima rumeno ozadje ... kaj pa zdaj?

Razvijalci tehnologije CSS so pomislili tudi na takšne primere - CSS-razred lahko definiramo samo za določeno vrsto HTML elementov, na primer samo za poudarjen tekst. Tudi ta definicija je zelo enostavna - v razdelku <STYLE> definiramo element.razred.

Primer: V razdelku <STYLE> najprej definiramo pomemben tekst, nato pa še pomembne poudarjen tekst:

<STYLE>

.pomemben { color: blue; }

B.pomemben { color: blue; background-color: yellow; }

<STYLE>

Ta dva razreda lahko nato uporabimo v tekstu:

<P>Navaden tekst s <B class=pomemben>pomembnim poudarkom</B></P>

<P class=pomemben>Pomemben tekst, <B>poudarek</B> ni tako zelo pomemben.</P>

Navaden tekst s pomembnim poudarkom

Pomemben tekst, poudarek ni tako zelo pomemben.