Radi se o poslednjem unapredjenju HTML jezika uvedenom od W3 Konzorcijuma pod definicijom
Cascade Style Sheets 1 (CSS1), a kojeg je Microsoft odmah podrzao u svom Internet Exploreru, a kasnije i Netscape.
Upotreba pismenih znakova (sintaksa) kod Style Sheets unosi u dosadasnju uniformnost HTML tagova
sasvim novi izgled i znacenja, tako da HTML time konacno zadobija i osobine klasicnog programerskog
jezika, pa se ovde pocinjete upoznavati i sa nekim naprednim programerskim formama.
Pre svega, obrasci stilova (Style Sheets), kako im i sam naziv govori,
namenjeni su odredjivanju nekog stila za celi web, ali se isto tako mogu koristiti i za odredjivanje
osobina samo jednog elementa u HTML sadrzaju. Da bi vam ova totalna nejasnoca postala sasvim jasna
upoznat cu vas odmah s primerom problema koji je resen primenom Style Sheets na stranici koju upravo citate.
Dakle, kako mozete videti, ovaj frejm sa tekstom je levo i gore oivicen sa druga dva frejma crnih
povrsina, a kako su se ova slova ovde protezala s kraja na kraj ovog frejma, na levoj strani su se doticala
crnila i izgledala kao zalepljena uz susedni frejm. Isto tako i na desnoj strani su zadnja slova ljubila uz ivicu
scrollera, pa je sve izgledalo uzasno tesko za citanje iz reda u red, posto se u ovom frejmu za ivicno poravnanje
teksta koristi tag opcija <p align=justify>, radi estetike izgleda stubaca, te browser obavezno razvlaci
svaki red do linije poravnjanja prvih i zadnjih slova u redovima. Stvar je resena primenom stila koji izgleda ovako
Kako mozete videti, u tom novouvedenom tagu koji se u ovakvom slucaju
mora obavezno upisivati u sadrzaj izmedju <head></head> tag para, imamo sasvim novi
nacin pisanja, koji podseca na Java Scripts kod, a o kojem ovde mozete videti levo, u rubrici DHTML
(Dinamicki HTML). U primeru iznad se sa style tagom odredjuje P kao objekat (a to je svaki <p> tag) ciji
sadrzaj (a to je tada text) mora biti odmaknut od leve margine (ivice) 10 pixela, a isto tako i od
desne. I, evo vidite, to je bas tako, mada bi mozda bilo bolje da sam to odstojanje povecao za jos 5px.
Uglavnom, u gornjem primeru upotrebe stila, vidi se da prvo ide objekat (a koji je neki tag iz HTML-a) na
koji se taj style odnosi, a onda u velikim zagradama idu atributi i parametri, gde sada umesto znaka
jednakosti = stoji dvotacka : koja kod style ima isto znacenje kao znak jednakosti. Na kraju se sve
zatvara velikom zagradom i naznacuje kraj odjavnim style elementom. Tu je bitno zapaziti i da se na kraju
nekog atributa s parametrom dodaje i tacka-zarez ; ako nakon njih sledi jos neki atribut sa svojim parametrima.
Dakle, time je uveden jedan style za ovaj dokument, a on se ogleda u tome sto
je svaki pasus teksta <p> odmaknut od leve i desne ivice za onoliko pixela koliko je tim stilom odredjeno.
Ako ste ovo shvatili, a nadam se da jeste, onda ste upravo zagazili u tzv. objektno programiranje. Pa kad je
vec tako, hajde onda da postavimo i nekakav prvi programerski zadatak te vrste, da time jos vise ovladate.
Dakle, izprogramirajmo onda sa Style Sheets opcijama da obican tekst u dokumentu bude Arial, crne boje,
velicine 2, a za razliku od njega, da text-linkovi budu crveni sa velicinom jedan, ukosenog Times fonta, a zatim i
eventualni naslovi plavi, sa Verdana fontom, velicine 3. Znaci, objekti na koje ciljamo su nam
<p> <a> i <h> tagovi. Resenje zadatka bi onda bilo ovako:
I to bi bilo to. Jednim udarcem, u zaglavlju HTML dokumenta, odredjen je izgled
sadrzaja u tri objekta, pa u te tagove vise nije potrebno upisivati svaki put one silne atribute i
parametre. Ako ste analizirali ovo resenje iznad, onda ste morali zapaziti da je velicina fonta
upisana u tackama kao pt (points). Zbog takvih noviteta, najbolje je da se odmah upoznate sa svim
atributima za odredjivanje osobina nekog objekta pomocu Style Sheets. Dakle: SA OVIM DO SADA, UPOZNALI STE SE SA UPOTREBOM CSS1 UNUTAR HTML DOKUMENTA
Medjutim, Style Sheets obrazac moze biti i van HTML dokumenta kao zaseban
dokument-fajl. U tom slucaju sve radite isto, samo sto Style Sheets obrazac uradite u tekst editoru
(Notepad ili Wordpad) bez <style></style> tag elemenata,
pa to onda memorisete kao naziv.css dokument. Znaci, stvar je u dodavanju .css ekstenzije
nakon imena kojeg date tom tekst dokumentu. Nakon toga taj dokument tretirate poput neke slike koju cete
linkom uvuci u sadrzaj web-a na odredjenom mestu. No, to linkovanje se onda vrsi malo drugacije. Naime,
za tu namenu je u HTML uveden novi <link> tag element, koji nema
svog opozivnog para, pa se linkovanje obavlja na istom gore navedenom mestu, u zaglavlju HTML sadrzaja,
gde onda sve izgleda kao:
font-family:
odredjujete vrstu fonta kojim ce se tekst ispisati. Mozete navesti i vise vrsta, tako sto
cete ih razdvojiti zarezom, kao sto je i uobicajeno u html-u.
font-size: odredjuje velicinu slova, s tim
sto iza broja morate navesti i vrstu mere, kojih je sada vise na raspolaganju. Za tacke
je- pt, za piksele- px, za inche- in i
za centimetre- cm. Pogledajte gornji Style Sheets primer.
font-weight: odredjuje debljinu slova, a ima
samo dve vrednosti, bold i normal.
font-style: odredjuje tzv. stil pisanja i
ima samo jednu vrednost, italic (ukosena slova).
text-decoration: odredjuje tzv. dodatne
dekoracije teksta i ima tri vrednosti. To su underline za liniju ispod
teksta, line-trought za liniju po sredini teksta i none
za eliminaciju bilo kakvih dodatnih dekoracija.
line-height: odredjuje visinu linije teksta
cime se omogucava povecan razmak izmedju redova. Naravno, treba voditi racuna da ova
visina mora biti veca od zadate velicine slova, jer ona zapravo predstavlja visinu
prostora u koji se upisuje red slova. Vrednosti se i ovde takodje mogu izrazavati u
razlicitim merama, kao npr. line-height: 3cm
background: Vrlo efektna opcija kojom se
postavlja boja pozadine ili slika za pozadinu. Boju mozete odredjivati kao background:
black ili backoground: #ffffff. Slika se uvodi navodjenjem url-a
(adrese) poput- background: URL(image/slika.gif) gde vidite da se adresa
mora upisati unutar malih zagrada. Efikasnost ove opcije se ogleda u tome sto mozete
navesti i sliku i boju, pa ce u slucaju neucitavanja slike, iz bilo kojih razloga, browser
onda prikazati boju pozadine. U tom slucaju stil sintaksu morate ispisati kao background:
URL(image/slika.gif) #006699;
margin-left: odredjuje rastojanje prikazanog
sadrzaja od leve ivice stranice, ili nekog blok elementa unutar stranice, sa vec navedenim
vrednostima za povrsinske mere.
margin-right: Isto kao za predhodni primer
samo sada u odnosu na desnu ivicu.
text-indent: odredjuje za koliko ce se uvuci
pocetak nekog teksta u izabranom objektu, kao naznaka odpocinjanja novog reda. Samim time
najcesci objekat ove opcije je <p> tag
pa bi primer bio P { text-indent: 50px } cime bi svako odpocinjanje
pisanja sa dodavanjem <p> taga ispred, bilo svojim prvim redom uvuceno za
50 piksela.
text-align: odredjuje kako ce tekst biti
poravnat. Ima tri vrednosti, left, right i center.
color: odredjuje boju teksta. Vrednost je
ime izabrane boje ili njen hexadecimalni broj.
Nema potrebe za objasnjavanjem znacenja ostalog sadrzaj u gornjem
<link> elementu, nego ga jednostavno prihvatite kao stalni sablon, gde cete jedino u src= atributu
menjati po potrebi parametre adrese do izdvojenog Style Sheets fajla. Izdvajanje CSS1 u zaseban dokumenat se
vrsi zato da bi se isti Style Sheets obrazac mogao koristiti i za veci broj web stranica, u kojima
onda nije potrebno ispisivati te obrasce, nego samo ubaciti gornji link u zaglavlje HTML sadrzaja.
Na taj nacin se omogucila uniformnost dokumenata za neku firmu, pri cemi Style Sheets fajl tog posebnog obrasca
moze biti na bilo kojem serveru mreze, a pri izradi svakog novog dokumenta se u njegovo HTML zaglavlje
samo ubaci link na taj Style Sheets, cime se zadobija i predvidjena uniformnost tog dokumenta sa ostalima.
Osim toga, i velicina Style Sheets sadrzaja zna ponekad biti tolika da narusava preglednost ostatka
HTML-a, pa se izdvajanje u zaseban CSS1 dokumenat ponekad vrsi i radi toga. Treci nacin primene Style Sheets je ubacivanje stila
unutar nekog tag elementa, a bilo gde u sadrzaju dokumenta. I, da ne duzimo, najbolje je opet uzeti onaj
isti <p> tag, sa kojim se gore i pocelo sa primerima, pa bi
navedeno izgledalo:
Znaci, moze i ovako, parcijalno, a ne generalno
za citav HTML dokumenat. Nacin upisa mozete analizirati i sami u primeru iznad. Uglavnom, raspored
atributa i parametara je zadrzao CSS1 formu. Na ovaj nacin Style Sheets pocinje da vazi od mesta
gde je ubacen. Cetvrti nacin, koji ce svojom afikasnoscu sigurno oduseviti
svakoga ko ga bude upotrebio, omogucava apsolutno pozicioniranje objekta, po zelji, na bilo koji deo
povrsine prikazanog web-a. Isprobajte ga odmah u nekom svom dokumentu. Trebaju vam bilo koje dve slike
za primer koji sledi i sve ce vam biti jasno.
To je forma upotrebe stila unutar <div> tag elementa, i tu se malo igrajte
sa parametrima top= i left= atributa, i videt cete kako te vase slike "setaju" po ekranu na poziciju
koju im tako odredite, bez obzira ako ste tu vec upisali neki sadrzaj. Ovaj style svoj objekat postavlja preko toga. Tako mozete takodje u pixel pozicionirati text ili tabelu, a sto znaci, bilo koji
deo vaseg sadrzaja. Pri tome se ti, ovako zahvaceni objekti, mogu slagati i jedan preko drugoga, delimicno
ili potpuno, cime zapravo delove sadrzaja pretvarate u layers objekte. Prekrivanje ide po pravilu redosleda upisa,
to jeste, zadnji style ce uvek ici preko onih predhodno upisanih.
U gornjem primeru style sablona width= i height= se ne odnose na objekat koji
se zahvata, nego ce to biti mali prazni kvadratic kojeg vidite dok se objekat ucitava, a onda se sve
uveca u dimenzije koje stoje u zahvacenom sadrzaju. Sintaksa position:absolute govori sama po sebi da se njome
svi ostali parametri styla odredjuju kao apsolutni, nepromenljivi, pa tako onda nema "izgurivanja" objekata
iz prostora, nego se u slucaju istog prostora prikaza, objekti prekrivaju jedan preko drugoga.
Inace, tim delimicnim prekrivanjima se moze napraviti vrlo efektana grupacija
slika, sto se pre ovoga morali uraditi u nekom grafickom programu, kao jedna slika, a kakvo znacenje
imaju majstorske ideje kod primene HTML-a, najbolje se vidi u primeru ispod gde je Style Sheets preklapanje objekata uradjeno
sa tekstom razlicitih velicina i boja. Tu nema nikakve grafike, gif-a ili jpeg-a, nego je sve obicna
HTML pisanija CSS1, pa nema ni cekanja na ucitavanje nekih grafika. Pogledajte ispod. Prvi red je i link aktivan.
A sada se pripremite za posebne podvige vasih mozdanih vijuga,
jer krecemo u jos vise nivoe programiranja, a koji su poznati kao rad sa klasama. Naravno, savladat cete i ovo veoma lako,
posto imate srecu da vam ja ovo objasnjavam, a ne neki egoisticni razbacivac strucnom terminologijom, koji i
uziva bas u tome sto ga ne razumete, a on kao zna o cemu se tu radi. Dakle, prvo treba znati zasto sada jos i
nekakve klase, kad je i ovo do sada puna kapa kojekakvih mogucnosti. Medjutim, nije tako. Ako se vratite malo
mislima na pocetak svega ovoga, gde su primeri za odredjivanje nekog styla celom HTML sadrzaju, onda
cete lako sagledati jednu veliku manu svega toga, a to je da kad jednom odredite, recimo za <p> objekat,
style parametre, onda ta uniformnost moze postati pre svega dosadna izgledom, a uz tu monotoniju je ipak i
potrebno neke delove teksta podvuci, neke precrtati, neke naglasiti debljinom slova, neke ukositi, itd.
Pa, ako za to onda treba opet rucno intervenisati milion puta, koji ce nam krasni onda uopste i taj Style Sheets u zaglavlju
dokumenta. Jeli tako..?
I zato su onda svemu pridodate i klase. To jeste, omoguceno je da onaj <p>, ili bilo koji objekat, bude klasiran,
to jeste da mu se pridoda neko lepse ili ruznije ime, pa ga tako umnozimo pod raznim imenima i napravimo
od njega pomocu tih razlika klasno drustvo, a sto u potpunosti odgovara i vasim kapitalistickim idejama. Klasa, tacnije ime ili naziv, se
nekom objektu dodaje tako sto se napise objekat, udari tacka, pa onda to ime po volji. I sada, ako cemo
nasem omiljenom <p> objektu da dodelimo klasu, to jeste naziv, kao konj onda
ce to izgledati sve skupa kao p.konj. Jednostavno zar ne.? Pa hajde onda da odmah uradimo i jedan
Style Sheets sa klasama za taj nas omiljeni tag objekat. I, ne pitajte se zasto se to onda naziva klasama,
a ne imenima, jer su gospoda naucnici ono name bili vec potrosili na one stvari ranije, a koje ste videli
u prethodnim poglavljima. Dakle;
E, pa sve sam verovao, ali da cete ovako lako savladati rad sa klasama,
to zaista nisam. Cisto mi neprijatno da vam jos saopstim kako onda u HTML sadrzaju treba samo
navesti<p class="koza"> i dalji tekst automatski ide onako kako je ta klasa i definisana sa
Style Sheets u zaglavlju dokumenta. Tako i za ostale klase. Kao sto vidite, za upotrebu klase je uveden
class= atribut u <p> tag element. I to je sve. Medjutim, posto mi je sada strasno krivo sto ste tako lako
savladali rad sa klasama, sada ide jedan dodatak kojim cu vas sigurno dobro zaposliti razmisljanjem. Dakle,
postoji nacin i da napravite svoj vlastiti stil koji nije vezan ni za jedan HTML elemenat. Aha..Sad sam vas
zamislio. Verovatno se pitate, pa na sta cete ga onda primeniti ako se ne odnosi ni na <p>, ni na
<h> niti na bilo koji drugi tag objekat. Dobro, posto mi je sad vec lakse, jer sam vas zamislio, onda
cu vam reci da mu u tome i jeste glavna namena, jer onda takav style mozete primeniti u svakom tag elementu. Stvar je opet
jednostavna, samo umesto objekta, poput onoga P upisete znak # i stvar je gotova. Ne treba cak ni ona tacka,
pa sve izgleda kao #konj i kad trebate taj stil onda u tag element ne upisujete za pozivanje
class= atribut nego se sve napise kao <p id="konj"> i to je to. Eto, sad
znate i kako da iskoristite i id= atribut (identitet) unutar nekog tag elementa. Mislim da vam u vezi uspesnog rada sa
CSS1 vise od ovoga nije ni potrebno.
I na kraju, obavezno kliknite na
ovaj deo teksta da bi dobili jedan Style Sheets kreator sa kojim odmah mozete uraditi veci
broj kodova bez ikakve muke, pa u dobijenim primerima odmah prakticno uociti kako to sve zapravo izgleda.
Ako vam se taj Style Sheets kreator dopadne, mozete ga sebi downloadovati u rubrici Pokloni.
Radovanovic Dragan