SveZaWeb : Kreiranje Web-a : CSS Uputstvo [ Cascading Style Sheets ]

Free Web space and hosting from dzaba.com


SveZaWeb		Web Design + Development Tutorials and Articles		EMail \| Pretraga \| Rečnik

Kreiranje

Poslednja izmena: 03.05.2003. g.

		Početna strana : Kreiranje CSS

CSS

Kaskadne šeme stilova
CSS i Web čitači
Kako izgledaju šeme stilova
Korišćenje CSS-a
STYLE atribut
STYLE element
Eksterni CSS dokument
Div i span
Komentari

Stilovi su usvojni od strane W3C u decembru 1996 i predstavljaju novi način za kontrolu prikaza Web strana. Nastao je sa ciljem proširivanja HTML-a bez dodavanja novih elemenata i atributa. Microsoft je prvi kreirao šeme stilove nalik na stilove u tekst editoru Word, i omogućio razdvajanje sadržaja i prezentacije. Odmah potom W3C je usvojio CSS (Cascading Style Sheets) kao deo HTML standarda i omogućio jednostavno unapređivanje Web dokumenata.

Šeme stilova su rešile veliki problem prezentacije informacije. Koristeći šeme definišemo dizajn celokupne Web prezentacije umesto da konstruišemo dizajn svake stranu pojedinačno. Promena izgleda Web prezentacije je jednostvna pošto menjamo samo šeme stilova.

Kaskadne šeme stilova

CSS specifikacija se mora poštovati više nego HTML. Web čitači mogu da oproste ukoliko nepoštujete pravila vezana za hijerarhiju HTML-a dok u okviru CSS morate bolje rezumeti logičku hijerarhiju elemenata na strani. Npr. imamo sledeći raspored elemenata i neka smo definisali izgled za svaki od njih:

<body> <p> <i> pokušaj </i> pažljivo </p> da čitaš. </body>

Elemenat "italic" (<i> tag) nasleđuje sve definisane stilove od paragrafa (<p> tag) plus primenjuje svoje. Ukoliko poseduju iste definicije sa različitim vrednostima, usvaja se zadnja. Paragraf (<p> tag) nasleđuje sve od "body" (<body> tag) elementa. Znači i "italic" (<i> tag) element poseduje definiciju stila od body (<body> tag) elementa.

CSS i Web čitači

CSS nije podržan u potpunosti od strane Web čitača, delimično zbog kašnjenja specifikacije a delimično zbog propusta u kreiranju Web čitača. Najpopularnije verzije Web čitača npr. Netscape Navigator 4.x i Internet Explorer 5.0 poseduju lošu podršku za CSS dok novije verzije kao što su Netscape 6 i Internet Explorer 5.5 poseduju dobru podršku za CSS.

Ova loša strana otežava kreiranje stilova za sve Web čitače, pošto u jednom isti CSS izgleda dobro u drugom loše. Neke Web strane koriste JavaScript kako bi se servirao CSS za različite Web čitače, ali nije preporučljivo pošto negira sam razlog postojanja CSS-a.

Stariji čitači ne podržavaju CSS, može se reći da treba kreirati strane da se ne oslanjaju u potpunosti na stilove, ali opet dolazimo na sami početak. Ukoliko koristite starije Web čitače odmah preuzmite nove, znam da mnogi ne poseduju ovu naviku, ali sve se menja pa moramo i mi.

Kako izgledaju šeme stilova?

Šeme stilova su kreirane od pravila koja izgledaju kao npr:

H3 {
font-family: Arial;
font-style: italic;
color: #00FF00
}

Svako pravilo započinje sa selektorom u prethodnom primeru to je H3. Selektor je jedan od HTML elemenata (tagova). Posle selekotora sledi deklaracija osobina CSS koje manipulišu stilovima sa vrednostima. Deklaracija se navodi u okviru vitičlastih zagrada { } a razdvoja ju se sa ; tačka-zarez. Nazive klasa pišite malim slovima.

Npr. deklaracija "font-style: italic; se odnosi na osobinu "font-style" stil fonta koja poseduje vrednost "italic". Kompletna definicija prethodnog CSS pravila govori da se svaki <H3> HTML tag u okviru Web dokumenta poseduje Arial iskošene (italic) fontove sa zelenom bojom.

Mogu se koristi klase (class) kao selektori koji se ne odnose na HTML elemente, tj. prethodni primer može da bude:

.greenitalic {
font-family: Arial;
font-style: italic;
color: green
}

Naziv klase greenitalic neznači ništa određeno, nazivi klasa sami definišete i nesmeju da poseduju razmake (whitespace) i donje crtice _ ( underscores). Nazivi treba birati prema funkciji a ne prema izgledu.

Npr. ako kod prethodno definisane klase greenitalic promeni izgled (stil) sa iskošenih slova na naglašena (bold) naziv gubi smisao. Trebao bi npr. da se naziva HTMLCODE ukoliko se odnosi na izgled sadržaja koji nosi kod HTML-a.

Da bi se klasa primenila na neki od HTMl tagova, potrebno je da se koristi CLASS atribut u HTML-u npr.

<H3 CLASS="greenitalic">Ovo je zeleno pa još iskošeno<H3>

Primetite da se u okviru naziva klase koristi tačka ispred dok u okviru HTML elementa koji se refencira na dati stil nema tačke.

Selektor može da ima više klasa, i pri tome se koristi tačka za razdvajanje kako bi se omogućilo da isti element poseduje različite stilove. Npr. programski kod u okviru sadržaja Web dokumenta poseduje različite boje u zavisnosti od jezika:

code.html { color: #191970 }
code.css { color: #4b0082 }

U prethodnom primeru kreirali smo dve klase za korišćenje sa HTML elementom CODE. Pomoću CLASS atribut korišćen u HTML-u navodimo koja se klasa se kada primenjuje nad CODE elementom.

Postoji i još jedan način navođenja stilova tj. individualno pridruživanje, koji ne preporučujem a referncira se preko ID atributa HTML elemenata, npr:

#htmlcode {
font-family: Arial;
font-style: italic;
color: green
}

Prethodno pravilo se odnosi na sve elemente koji poseduje ID: htmlcode

<p ID="htmlcode">Ovo je zeleno pa još iskošeno, a gde je kod<p>

Kontekst selektori su jedan ili više selektora razdovjenih razmakom, koji omogućavaju primenu kaskadnog pravila:

P STRONG { background: yellow }

Ovo pravilo govori da svaki naglašeni tekst (STRONG) u okviru paragrafa (P) treba da poseduje žutu boju kao boju pozadine. U koliko se STRONG element nalazi npr. u okviru naslova H3, dato pravilo se ne primenjuje.

Korišćenje CSS-a

Prvo pitanje koje se postvlja pri upotrebi CSS-a na Web stranama: Gde da postavimo stilove u okviru strane?. Postoje tri osnovna rešenja koja omogućavaju veliku fleksibilnost:

Mogu da se pišu u okviru samih HTML elemenata korišćenjem STYLE atributa.
Mogu da se navode blokovi CSS pravila u okviru STYLE elementa i da se referenciraju na same HTML elemente ili pomoću CLASS atributa kod HTML elemenata.
Mogu da se pišu u odvojenim dokumentima stilova, sa ekstenzijom .css i da se referenciraju u okviru strana sa LINK elementom.

STYLE atribut

Najjednostavniji je prvi način, ali nije preporučljiv pošto opet dolazimo do onog starog FONT taga, prilikom promene šeme morate menjati opet sve strane.

U okviru skoro svakog HTML elementa možete postaviti atribut STYLE i navoditi CSS pravila u okviru vrednosti atributa:

Možete postaviti više takvih pravila razdvajajući sa tačka-zarez ; bez obzira na redosled.

Korišćenjem STYLE atributa kod HTML elemenata lišavate se prednosti razdvajanja sadržaja od prezentacije.

STYLE Element

Stilovi se mogu jednostavno ubaciti u Web dokument korišćenjem STYLE elementa koji se nalazi u okviru HEAD elementa u HTML-u:

Po HTML4 specifikaciji ukjučen je i atribut MEDIA u okviru STYLE taga za određivanje medija na koji se stil primenjuje. Atribut MEDIA ima sledeće vrednosti:

sreen
Izlazni medij je ekran
print
Izlazni medij je štampač
projection
Izlazni mediji je projektor
speech
Izlazni medij je uređaj za sintezu govora
all
Koristi sve izlazne medije

Atribut MEDIA omogućava definisanje različitih stilova za različite medije, pogodni su priliko definisanja strana koje su samo npr. za štampanje itd.

Pomoću atributa TYPE navodi se MIME tip za šeme stilova. Možete stilove definisati i u okviru SCRIPT elementa ako navedete MIME type.

Prethodni primer je identičan sa <body style="font-size: 16pt"> ali se odmah uočava razlika u održavanju, pošto su sve stilove možete definisati na vrhu strane.

I ovaj način se ne preporučuje pošto se dati blokovi samo odnose na Web dokument koji ga sadrži. Preporuka je korišćenje eksternih CSS dokumenta.

Eksterni CSS dokumenti

Treći pristup podrazumeva korišćenje CSS u jednom ili više zasebnih dokumenata stilova koji primenjuju svoja pravila na strane koja ih referencira tj. uključuje. Jedan Web dokument može da poseduje više refernci na različite dokumente.

Dokument stilova je identičan sa blokovima stilova i sadrži jedan ili više definisanih blokova npr. stylesheet.css može da izgleda:

body { font-size: 16pt }

.htmlcode {
font-family: Arial;
font-style: italic;
color: green
}

Prednosti ovog načina uključivanja stilova u Web dokument je velika, zamislite samo da sve strane referenciraju datu eksternu šemu stilova i da promenom veličine fonta u toj šemi menjate izgled kompletne Web prezentaciji za manje od minut.

Div i span

Kako bi se omogućila veća fleksibilnost izrade dizajna Web strana u okviru HTML specifikacije dodata su dva nova taga DIV i SPAN, za rad sa stilovima.

<div class="htmlcode">
<html>
<head>
   <style>
      <span class="csscode">.mojprvistil{font-style: italic;}</span>
   </style>
<head>
</head>
<body>
    Ovde ide sadrzaj
</body>
</html>
</div>

Razlika između DIV i SPAN elementa ako se može primetiti u okviru prethodnog primer se nalazi u tome da se DIV koristi kod primene stilova na HTML blokove više redova sa prekidima a element SPAN koristi za "inline" HTML tj. u slučaju kada je potrebno primeniti stil na jedan red(linije) ili manji deo reda.

CSS komentari

Komentari u CSS-u su po konvenciji koja se koristi u programaskom jeziku C, znači blok komentra izgleda:

/*
Ovo su CSS
komenari u vise
linija (redova)
*/

I naravno sa (//) je komentar u okviru jedne linije.

// CSS Komentar u okviru jedne linije

U nastavku ovog uputstva prikazaćemo grupisanje, nasleđivanje, pseudo elemente ...

Slične teme

HTML

Povratak na početak strane

Slične teme

HTML

Prijavite se na naš informator

Ako želite da se prijavite na SveZaWeb informatora, pošaljite praznu poruku na svezaweb-subscribe@
yahoogroups.com

Ako želite da se odjavite, pošaljite praznu poruku na adresu: svezaweb-unsubscribe@
yahoogroups.com

[ Informator ]

»» Preporuči prijatelju

»» Upišite komentar

»» Knjiga otisaka

Pomoć!

Trudimo se da SveZaWeb bude koristan i ispravan, međutim uvek postoje greške, molimo Vas da nam pomognete kako bi ih ispravili.

Ova prezentacija je još uvek statička, nisam u stanju tehnički da izvedem kompletno svoju zamisao. Veoma mi je žao što zbog toga trpi naša interakcija.

Zamolio bih Vas da ako želite pošaljete vaša iskustva u razvoju, dizajnu i populaciji Web-a.

Ukoliko imate primedbe, sugestije ili želite da učestvujete u izgradnji ovog sajta, javite se : webmaster@
svezaweb.dzaba.com

Najbolji pregled u 800*600 sa najpopulanijim browser-ima

Razvoj

Dizajn

Kreiranje

Panorama

Usluge