CSS part 1

Oki doki,manje više upoznati ste o CSS-u i njegovoj “moći”.Laički rečeno css nam služi za upravljenje prikaza (x)html prezentacije (ja volim tkao reći).Ovo bi trebalo predstavljati početak serije tekstova o CSS-u i njegovoj primjeni,trikovima i josh ponešto…

Jednom davno dok sam išao u školu napisao sam mali vodič o inim stavarima vezanim uz web diz.Slobodno se poslužite ako će Vam biti od koristi :-).No ipak da se vratim na naslov i samu priču o CSS-u.Razumljivo da već imate nekakvu xHTML strukturu koju trebate fomatirati.Prvo što trebate da napravite jeste da počnete “komunicirati”s CSS-om.E sada imate tri načina da to napravite.

1. EXTERNAL što znači da includirate već postojeću css datoteku u vaš xHTML dokument
2. INTERNAL što znači da kompletan css code ubacite u tag i
3. INLINE da uz svaki “block” element ubacujete svoj stil…

Inline ide ovako nekako,znači definirate svaki element ponaosob:

<p style="color: #ff0000; text-transform: uppercase">Formatted text</p>

Internal bacate u head tag,recimo ovako:

...
<style type="text/css">
p {
  color: #f00;
  text-transform: uppercase;
  text-decroation: underline;
}
</style>

...

I šećer na kraju EXTERNAL možete ubaciti na dva načina prvi je da se koristite xHTML tagom link i to opet na tri načina

• Persistent
• Preferred
• Alternate

Persistent je uvijek prisutan i predstavlja aktivan CSS !? i nema atribut “title” .

<link rel="stylesheet" type="text/css" />
href="style.css" /&gt;

Preferred je prisutan na stranici osim ako je uz njega prisutan ALTERNATE css .

<link href="style.css" rel="stylesheet" type="text/css" />
title="default" /&gt;

Alternate CSS može biti samo odabran od strane korisnika kao alternativu u odnosu na preferiran zadani stil.

<link rel="alternative stylesheet" type="text/css" />
href="style.css" /&gt;

Ovi primjeri podrazumijevaju da se css i html nalaze u istoj mapi.

2. način “includiranja” css jeste korištenje css svojstva @import.

<style type="text/css">
@import URL(path/to/stylesheet.css);
</style>

Napomena @import nije dio xHTML-a nego css svojstvo.

Zadatak CSS-a jeste da se napravi razlika između sadržaja (markup) i prezentacije tog istog sadržaja.Inline metodu svakako pokušajte da izbjegnete jer si otežavate posao i stvarate zbrku u code-u.Internal metodu je dobro koristiti kod prezentacije pojedini stvari zato što u jednom dokumentu imate podatke kako taj dokument treba da izgleda.Joše jedna loša strana jeste da za svaki xHTML dokument mora da se “cachira” css.3. način (preporuka) koristiti što više :-).Omogućava Vam da u potpunosti razlčite što je sadržaj i kako će taj sadržaj biti prezentiran.CSS se samo 1 put “cachira” i može se koristiti kod više XHTML dokumenata te s tim ubrzavate čitavanje istog.,cool ;-)

Možete koristiti više “external” stilova ovisno o platformama (print page,PDA,MOBile…) No o tome sljedeći put…

Nadam se da Vam je ovo pomoglo serija članaka se uskoro nastavlja stay tuned :-)