Html Tutorial

Uvod
Programi
Osnove
Tabele
Napredno
	CSS
	JavaScript
	Iframes
	SSI
Besedilo
HTML Generator

CSS

<- Nazaj | Naprej ->

CSS vam v primeru, da imate stran z ogromno podstranmi izjemno olajša oblikovanje. Predstavljajte si, da si premislite in nočete več imeti ozadja rdečega, zamenjava vseh HTML TAG-ov, ki določajo rdečo ozadje, bi bilo v primeru da imate kakih 100+ dokumentov pravo trpljenje. Če imate CSS pa lahko samo v pripeti datoteki spremenite vrednost iz recimo rdeče v zeleno, kar se potem pozna po celotni strani. Tudi določanje recimo pisave na strani je enostavnejše kot uporaba TAG-a font

Vstavljanje CSS

CSS lahko vstavimo kot zunanjo datoteko ali pa kot del HTML kode. Kot zunanjo datoteko ustvarimo datoteko recimo: style.css in jo nato preko TAG-a link vstavimo v <head>

Drug način je da selektorje in vrednosti vstavimo neposredno v head med TAG <style></style>

Recimo tako:

<head> <style> TABLE {border-width:1px; border-color: #000000; border-style: dotted;} </style> </head>

Tretji način je pa kot del parametra style v poljubnem TAG-u

Recimo:

<font style="color: #000000; background: #ffffff;">Ta stavek je obarvan preko parametra style</font>

Selektorji

Vsak HTML element je lahko eden izmed CSS selektorjev, selektorji so elementi, ki so povezani z določenim stilom. Tako so selektorji recimo P, BODY, TABLE, TD itd.
Poznamo pa tudi CLASS in ID selektorje, ki nimajo veze z HTML tagi in so lahko poljubno poimenovani. Ti se v TAG-e vstavljajo prav na poseben način, podrobneje bom to opisal par vrstic niže.

Vrednosti HTML selektorjev se izvršijo na prav vseh elementih, ki so na določeni strani, vrednosti ID in CLASS selektorjev pa lahko določimo vsakemu elementu posebej.

CSS ima obliko: SELEKTOR { lastnost1: vrednost1; lastnost2: vrednost2; }.
Zaradi večje preglednosti pišemom lastnosti eno pod drugo ni pa nujno!
Obvezna je uporaba zavitih oklepajev {} in podpičja ;, ki ločuje lastnosti.

HTML selektor izgleda tako:

P { text-align: center; color: #000000; }

V tem primeru smo vsem odstavkom na strani <p></p> nastavili poravnavo na sredino in barvo teksta črno.

CLASS selektorji imajo poljubno ime in jih od HTML selektorjev ločimo tako, da jim dodamo piko pred imenom. To izgleda takole:

.pobarvano { background: #ffffff; color: #000000; }

V tage jih vstavljamo brez pike nekako tako:

<font class="pobarvano">To je pobarvan tekst</font>

Ozadje teksta se bo obarvalo belo, medtem ko bo barva pisave črna.

Grupiranje

Vsakemu selektorju lahko določimo različne vrednosti, ali pa jih kar združujemo v več skupin (jih grupiramo). Recimo:

P, EM, H1 { background: #ffffff; color: #000000; }

Tudi vrednosti lahko združimo in namesto: