BAZA ZNANJA

Kurs: --- Adobe Dreamweaver CS5.5

Modul: Osnove CSS-a

Autor: Vuk Ninić

Naziv jedinice: Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS) je danas jedan od najbitnijih elemenata modernih web sajtova. Daljom evolucijom interneta polako se od osnovnih, preko tabelarnih prikaza u HTML-u prešlo na savremeni prikaz, koji je omogućio CSS.

CSS je style sheet jezik koji se koristi za opis prezentacione semantike dokumenta pisanog u opisnom jeziku (markup language). Jednostavnije rečeno, opisuje, tj. uređuje izgled i formatiranja bilo kog elementa na stranici. Uobičajeno je da stilizuje web strane pisane u HTML ili XHTML, ali se može primeniti i na bilo koji XML dokument, uključujući i SVG i XUL.

CSS je kreiran sa namerom da odvoji sadržaj dokumenta (pisanog u HTML-u) od samog izgleda dokumenta, koji uključuje elemente poput boja, fontova ili rasporeda. Ovo razdvajanje poboljšava pristupačnost, povećava fleksibilnost i kontrolu nad karakteristikama stranice, donosi mogućnost da više stranica dele isto formatiranje, umanjuje kompleksnost i ponavljanje i poboljšava raspoređivanje elemenata. Drugim rečima, ostavljamo da HTML "nosi" sadržaj, dok CSS taj sadržaj stilizuje. HTML nikad nije kreiran da bude vizuelni medijum, već jednostavan način za prezentovanje sadržaja. Na primer, HTML je u verziji 1 podržavao samo bold i italic od opcija za formatiranje teksta.

Problem sa internetom je bio taj što je kreiran za štrebere. Nije bilo mesta za boju pozadine i lepe slike – samo sadržaj. Slatki sadržaj. Teško je raspravljati se sa takvim idealima, ali sa druge strane, tačno je da svi mi volimo male radosti i poseban doživljaj dok surfujemo. Onda je došla tabela da reši naše dileme, najzad smo imali kontrolu nad rasporedom na stranici! To je bila prava stvar. Nalazili smo načina da prevarimo sistem. Ne možeš da napraviš punu liniju od jednog piksela? Samo ubaci GIF za razmak, pozadinsku boju i nekoliko ćelija tabele i gotov si! Ne možeš da kontrolišeš tipografiju? Iskoristi još jedan <font> tag!

Ovaj prethodni pasus lepo ilustruje web dizajn do pojave CSS-a i početaka njegove masovne upotrebe. Developeri i dizajneri su se dovijali na razne načine, kako bi prikazali nešto na željeni način. U celom tom peridu razvoja neta dizajneri su većinu vremena trošili na to da pomoću trikova dobiju ono što žele, jer nije postojao pravi alat (CSS).

Tako dolazimo do današnjice i pune primene CSS-a, gde praktično sve što zamislimo možemo lako kreirati. Ukoliko imamo nekoliko naslova (h1) koje želimo da formatiramo na određeni način, na primer da im promenimo boju iz standardne crne u neku drugu, html bi izgledao uobičajeno:

<h1>Naslov</h1>
....
<h1>Drugi naslov</h1>

dok bi u CSS-u postavili:

h1 {
 color:#F90;
}

Tako bi svi h1 naslovi imali boju #F90. Ukoliko promenimo boju preko CSS vrednosti samo na jednom mestu, svi vezani elementi (naslovi) bi odmah bili promenjeni. Primetićemo da html ne sadrži ništa od stilizacije, već samo sadržaj, dok CSS daje boju (u ovom primeru).

Naravno, današnji standardi i naširoko rasprostranjen CSS 2.1 nije kraj razvoja, naprotiv. CSS 3 je praktično već stigao i donosi nove načine formatiranja.

CSS sintaksa

Iako Dw pruža odlične mogućnosti rada sa CSS-om bez skoro ikakvog poznavanja samog jezika, važno je da poznajemo CSS kod, makar da bismo promenili neki detalj ili mogli da protumačimo CSS. CSS sintaksa se sastoji od opisa izgleda elemenata u dokumentu.

Jedan opis (engl. Rule) može da definiše izgled više elemenata, ali i više opisa može da definiše jedan element. Na taj način se opisi slažu jedan preko drugog da bi definisali konačni izgled određenog elementa, otuda naziv Cascading (na engleskom cascade znači crep) da bi se dočaralo slaganje jednog stila preko drugog u definisanju konačnog izgleda elementa. Nije bitno da li se ti opisi nalaze u eksternim fajlovima ili u istom html dokumentu.

Da bismo ovo plastičnije dočarali, zamislićemo ovakav primer. Pomoću jednog CSS opisa h1 naslove bojimo u crveno, a onda dodajemo drugi opis koji se odnosi na tačno određeni naslov h1 i njemu dodeljuje određenu veličinu. Tako smo složili dva opisa na tom naslovu. Dobija boju od jednog, a veličinu od drugog. Videćemo detalje kako to činimo u nastavku ove jedinice.

Svaki opis se sastoji od tri elementa:

1. definicije ciljnih elemenata (engl. Selector)
2. svojstva (engl. Property)
3. vrednosti (engl. Value)

Svojstvo i vrednost zajedno nazivamo deklaracijom (engl. Declaration).

Nakon što definišemo ciljne elemente, tj. elemente na koje će se trenutni opis odnositi, nizom parova svojstvo-vrednost definišemo izgled svakog ciljnog elementa. Sintaksa koja se pri tom definiše je sledećeg oblika:

ciljni elementi {
    svojstvo: vrednost;
    svojstvo: vrednost;
}

Sve ovo čini jedan CSS opis (CSS rule).

CSS podržava i komentare, koji izgledaju kao u programskom jeziku C, dakle navode se između znakova /* i */.

Ciljni elementi

Ciljni elementi se definišu na tri načina:

1. navodeći HTML tag ciljnih elemenata
2. navodeći klasu elemenata
3. navodeći direktnu identifikacionu vrednost (ID) elementa

HTML tag

Kada definišemo preko HTML taga, to znači da će opis uticati na sve elemente u dokumentu koji imaju ovaj tag. Definicija ciljnih elemenata se tada vrši preko direktnog upisa odgovarajućeg HTML taga:

Klase

Klasa HTML elementa je reč koju stavimo kao vrednost argumenta CLASS pri definiciji tog elementa. Definicija ciljnih elemenata (svih koji imaju određenu istu klasu) se vrši tako što upišemo znak tačke (.), a zatim naziv klase:

.imeKlase {
    svojstvo: vrednost;
}

Ovaj opis će, dakle, imati uticaja na sve elemente u dokumentu koji su definisani na sledeći način:

<p class="imeKlase">...</p>
<div class="imeKlase">...</p>

Identifikaciona vrednost

Identifikaciona vrednost elementa je vrednost argumenta ID pri definiciji tog elementa. U jednom dokumentu identifikacione vrednosti moraju biti jedinstvene, tj. može postojati samo jedan element sa određenom identifikacionom vrednošću, što znači da ovakvi opisi mogu uticati samo na po jedan element u dokumentu. Definišu se pomoću znaka #, a zatim se piše identifikaciona vrednost:

#identifikacionaVrednost {
    svojstvo: vrednost;
}

Ovaj će, dakle, opis uticati na sve elemente koji u svojoj HTML definiciji imaju id="identifikacionaVrednost", odnosno na primeru:

<p id="identifikacionaVrednost">...</p>

Identifikacione vrednosti su unikatne za jedan jedinstven tag na stranici, dok se klase mogu ponavljati.  ID se može ponoviti bez problema na drugoj html strani.

Pored pomenute tri kategorije ciljih elemenata (selektora), postoje i takozvani pseudoselektori. Pseudo-classes i Pseudo-elements - ovi selektori stilizuju elemente prema njihovoj poziciji ili ulozi na stranici, kao na primer link preko koga prelazi miš. Sastoji se od HTML selektora, dve tačke (:) i imena pseudoklase ili pseudoelementa. Na primer: a:hover.

Pisanje CSS koda 

Postavljanje CSS-a

CSS možemo postaviti na tri načina:

1. Eksterni CSS - unosom CSS opisa u poseban fajl koji je povezan sa stranicom
Na ovaj način možemo jedan CSS fajl povezati sa više html strana, radi lakšeg korišćenja istih CSS opisa. Pored toga, može biti i više od jednog CSS fajla vezanog za isti html (ne zaboravite, CSS fajl može sadržati više opisa)

2. Interni CSS - unosom CSS opisa u okviru head dela strane.
ovom slučaju, CSS opisi će biti dostupni samo na toj jednoj strani. Ne kreiramo poseban fajl, već se CSS nalazi u okviru HEAD dela, odvojen od ostatka HTML strane posebnim <style> tagom.
 

3. Inline CSS - unosom inline CSS opisa
Inline opis unosimo slično atributu u HTML-u i u ovom slučaju se on odnosi samo na taj konkretni tag, na toj konkretnoj strani. Ne preporučuje se korišćenje ovakvih CSS opisa, a u strict varijantama HTML i XHTML fajlova je i zabranjen. Ovakav vid kreiranja stranica narušava koncepciju odvojenosti sadržaja od stilizacije.

(Napomena: nemojte mešati pojmove inline CSS stilova sa Inline i Block elementima - tagovima)

Slaganje CSS stilova (Cascade theory)

Videli smo da se CSS može postaviti na tri načina (poseban fajl, head sekcija html dokumenta ili inline na samom tagu) tako da može doći do poklapanja istih CSS vrednosti. Takođe, u okviru samih CSS fajlova ili CSS dela u okviru stranice, može doći do poklapanja.  U takvim slučajevima postoje određena pravila koja se automatski primenjuju i određuju koji će CSS opis biti primenjen.

U slučaju da se CSS opisi poklapaju, browser će poštovati pravilo bliskosti (eng. proximity rule) koje određuje da će biti primenjen CSS opis koji je najbliži ciljnom elementu. U tom kontekstu je sledeća struktura i redosled:

1. Default vrednosti browsera
2. Eksterni CSS fajl
3. Interni CSS (u head sekciji dokumenta)
4. Inline CSS stil (u okviru samog taga)

To praktično znači da ukoliko postoje sve četiri varijante stilizacije, browser će iskoristiti četvrtu.

Pogledajmo na primeru. Ukoliko smo u CSS fajlu postavili:

p {
	color:#F00; /*crvena boja*/
}

u head delu strane:

p {
	color: #3F0; /*zelena boja*/
}

a na samom tagu inline plavu boju:

<p style="color:#00F;">Ovo je neki tekst.</p>

Logično je da istovremeno tekst ne može biti crn (default), crven, zelen i plav, već će browser postaviti plavu boju, jer je njen CSS opis najbliži elementu.

Bitno je napomenuti i da ukoliko se nalaze dva ili više CSS opisa koja se odnose na isti ciljni elemenat, a sama svojstva se ne sukobljavaju, biće primenjena sva svojstva.

Pogledaćemo dva primera.

Ukoliko imamo CSS opis:

p {
	color:#F00;
}

ali i drugi opis:

p {
	font-family:Arial;
}

Iako se odnose na isti element, paragraf će biti formatiran u crvenoj boji, ali i u fontu Arial jer se dopunjuju.

Pravila nasleđivanja (Inheritance theory)

Sa druge strane, ukoliko imamo:

p {
	color:#F00;
}

ali i

p {
	font-family:Arial;
	color:#3F0;
}

Uzimaju se sva svojstva koja se ne sukobljavaju plus jedno od sukobljenih. Paragraf će svakako biti formatiran u fontu Arial, ali formatiranje boje (crvena ili zelena) će zavisiti od pravila sukobljavanja koje smo pomenuli ranije.

Pravila potonjih elemenata (Descendant theory)

Ciljni elementi preko kojih dodeljujemo svojstva mogu kompleksniji i specifičniji u zavisnosti od elemenata iznad njih. Na primer:

h1 {
 color:#F90;
}

je stilizovao sve h1 elemente. Dok bi sledeći kod:

div h1 {
 color:#F90;
}

stilizovao samo h1 elemente koji se nalaze u okviru div elementa. Ukoliko npr. postavimo h1 direktno u body, ne bi bio pogođen, niti stilizovan ovim opisom jer nije u okviru nijednog diva.

Pravilo specifičnosti (Specificity theory)

Dalje, možemo još preciznije definisati odnos elementa kojeg ciljamo stilizacijom. Na pređašnjem primeru:

div h1 {
 color:#F90;
}

ukoliko napišemo:

div.mojaKlasa h1 {
 color:#F90;
}

stilizovaćemo sve h1 naslove koji se nalaze u div elementu sa klasom mojaKlasa.

Ukratko, ako postavimo razmak, ciljamo na elemenat ispod; ako nema razmaka, ciljamo na element u istom nivou (elemenat koji ispunjava oba uslova).

Još jedan primer, malo komplikovaniji, je kombinacija više prethodnih elemenata:

body #header div.mojaKlasa h1 span {
	color:#F90;
}

Da li možete sami protumačiti?

U ovom slučaju, stilizujemo sve span elemente koji se nalaze unutar h1 naslova, koji su smešteni u div elementu, ali samo u onom divu sa klasom mojaKlasa. Opet ti div-ovi moraju biti u elementu sa id oznakom header, koji se nalazi u osnovnom body elementu.

Uglavnom nema potrebe za ovoliko detaljnom postavkom selektora, već se može dosta jednostavnije unikatno naciljati traženi elemenat.

Sva ova pravila se mogu dalje komplikovati, ali su praktično veoma jednostavna, jer se prati samo nekoliko preciznih pravila. Ipak, mnogi web dizajneri nailaze na problem ako ne savladaju te osnove. Preporučujem da, ukoliko već niste, detaljno prođete kroz kurs Uvod u HTML i CSS, jer je to okosnica web dizajna i rada u Dw. Sve će delovati mnogo jednostavnije ako poznajete osnove.

CSS preference

Na slici ispod možemo videti code prikaz jednog CSS fajla u Dreamweaveru (sami CSS fajlovi nemaju svoj vizuelni, design prikaz, jer oni stilizuju html fajlove).

CSS fajl

Prikaz možemo korigovati i podešavati po svojim željama. Ukoliko otvorimo dijalog preferences (Edit > Preferences...) i potom grupu Code Coloring, otvoriće nam se dijalog u kome možemo korigovati osnovne boje koje se tiču koda ili vezano za određene dokumente. Shodno tome, možemo izabrati iz Document type liste opciju CSS i klikom na dugme Edit Coloring Scheme. Otvoriće se novi dijalog u kom svaki deo CSS sintakse može biti prilagođen našim željama. Za početak preporučujem da ostavite podešavanja kakva jesu. 

Podešavanja code coloringa

Dreamweaver, kao što ćemo videti, može sav CSS kod pisati za nas, dok mi sva podešavanja vršimo iz određenih panela. Radi preglednosti i ličnih afiniteta, možemo podesiti na koji način će Dw formatirati CSS kod. Iz pomenutog preferences dijaloga izabraćemo grupu parametara Code Format. Za sada, kao i kod prethodne stavke, preporučujem da ostavite default vrednosti, a kada budete ovladali osnovama, možete izmeniti podešavanja.

 Podešavanja code formata

Još jedna bitna grupa podešavanja vezana za CSS je CSS styles grupa iz preferences panela. Ali, da bi ta podešavanja bila jasnija, pojasnićemo prvo jednu od značajnih mogućnosti CSS-a.

Kada bismo, na primer, želeli da kreiramo gornju marginu od 10 piksela na naslovu h1, možemo postaviti:

h1 {
 margin-top:10px;
}

ukoliko želimo da margina bude sa svih strana, a ne samo na vrhu, možemo postaviti:

h1 {
 margin-top:10px;
 margin-bottom:10px;
 margin-left:10px;
 margin-right:10px;
}

tako smo dobili četiri linija koda. Ukoliko tako ostavimo, sve će funkcionisati najnormalnije, ali možemo skratiti i pisati jednostavnije, a i preglednije. Zamenićemo prethodni primer sledećim kodom:

h1 {
 margin:10px;
}

Ovako se u jednom redu odnosimo na sve četiri margine i tako smo uštedeli tri reda i napisali pregledniji kod. Pri tom, nije zanemariva činjenica sama razlika u veličini CSS fajlova i dužine njihove obrade u veoma kompleksnim sajtovima. CSS se skraćuje po tačno određenim pravilima, koja ćemo upoznati. To skraćivanje nazivamo kraćom formom CSS-a ili, u originalu, CSS shorthand.

Shodno pomenutom, ukoliko sami kucamo CSS moramo obratiti pažnju na te detalje, ali ako želimo da odredimo kako da se Dw ponaša, izabraćemo u preferences panelu grupu CSS styles.

Podešavanja css skraćivanja

Prva grupa opcija (Use shorthand for) određuje u kojim će slučajevima Dw skraćivati CSS. U osnovnim default podešavanjima su sva polja prazna i Dw neće skraćivati kod. Druga opcija (Use shorthand) se odnosi na editovanje postojećih fajlova, dok u trećoj možemo podesiti način na koji želimo da editujemo CSS. Ukoliko ostavimo default (Edit using CSS dijalog), naša interakcija sa CSS vrednostima će uglavnom biti putem panela. Sa druge strane, ukoliko želimo da CSS menjamo kroz kod prikaz, možemo postaviti Edit using code view ili edit using propetries panel.

Sve opcije vezane za CSS prefrence odnose se na naš pogled i interakciju sa CSS-om i samim tim, podešavanja zavise od naših potreba i želja.