CSS uputstvoPrvi koraci u HTML i CSS jezicima Ova kratko uputstvo namenjeno je onima koji ele da koriste CSS a koji dosad nisu pisali CSS fajlove.Ono ne objanjava mnogo toga o CSS-u. Iz njega moete nauiti kako da napravite HTML i CSS fajl, i kako da omoguite da ova dva fajla rade zajedno. Posle toga moete da proitate mnogobrojnadruga uputstvai da svojim HTML i CSS fajlovima dodate nova svojstva. Ili moete poeti da koristiteeditor za HTML i CSSkoji vam moe pomoi da izradite sloeniji veb-sajt.

1. KORAK: PISANJE U HTML-U Za rad po ovom uputstvu, predlaem da koristite najjednostavnije alate. Primera radi, Notepad (za Windows), TextEdit (za Mac) ili KEdit (za KDE) e biti sasvim dovoljni. Kad jednom shvatite naela, moete da preete na naprednije alate, ili ak na komercijalne programe kao to su Style Master, Dreamweaver o GoLive. Ali dok pravite svoj prvi CSS fajl, dobro je da vas ne zbunjuje previe naprednih opcija.Ne koristite programe za obradu teksta, kao to su Microsoft Word i OpenOffice. Ovakvi programi uobiajeno prave fajlove koje veb-brauzer ne moe da ita. Za HTML i CSS, trebaju nam isti, jednostavni tekst fajlovi.Prvi korak je da otvorite svoj tekst editor (Notepad, TextEdit, KEdit, koji god volite), poevi od praznog prozora, i da otkucate sledee:

Moja prva strana sa stilom

Glavna strana

Razmiljanja

Moj grad

Linkovi

Moja prva strana sa stilom

Dobrodoli na moju prvu stranu sa stilom!

Na njoj nema slika, ali bar ima stil.Ima i linkove, premda ne vode nikuda

Ovde traba da bude jo toga, ali zasad ne znam ta.

Napravio 5. aprila 2004.
ja.

Ustvari, ne morate ni da kucate. Moete da iskopirate s ove veb-strane u svoj editor.

Prva linija u ovom HTML-u govori brauzeru kom tipu HTML-a strana pripada (DOCTYPE oznaava TIP DOKUMENTA). U naem sluaju - HTML verzija 4.01.Rei izmeu < i > zovu setagovii, kao to vidite, dokument je smeten izmeu i tagova. Izmeu i nalazi se prostor za raznovrsne informacije koje se ne prikazuju a ekranu. Zasad je tu samo naslov dokumenta, ali kasnije emo tamo dodati i CSS stil. je mesto na kome se nalazi stvarni tekst dokumenta. U naelu, sve to je tamo bie prikazano, sem teksta izmeu , koji nam slui za komentare unutar koda. Njega e brauzer da preskoi.Od ostalih tagova u ovom primeru,

predstavlja nesortiranu listu, recimo listu iji elementi nisu poreani po rednim brojevima. Tag

predstavlja element sa liste. je pasus. oznaava link.

Editor Notepad prikazuje izvorni HTML kod.Ako elite da znate ta znae rei unutar , dobro mesto za poetak jehttp://www.w3.org/MarkUp/Guide/L.Ali evo nekoliko rei o naoj uvodnoj HTML strani. ul predstavlja listu s jednim linkom po elementu. Sluie nam kao meni za navigaciju, upuujui na ostale strane naeg (hipotetikog) veb-sajta. Pretpostavka je da e nam i ostale strane imati slinu navigaciju. Elementi h1 i p formiraju sadraj jedinstven za datu stranu, dok e potpis na dnu strane (address) opet biti slian i na ostalim stranama. Obratite panju da nisam zatvorio elemente li i p. U HTML-u (ali ne i u XHTML-u), dozvoljeno je preskoiti i tagove, kao to sam ja ovde uinio, da bi vam tekst bio neto itljiviji. Ali, ako elite, moete ih dodati.

Pretpostavimo da e ovo biti jedna od nekoliko slinih strana na veb-sajtu. Kao to je i uobiajeno za dananje veb strane, i ova e imati meni koji upuuje na druge strane na hipotetikom sajtu, neki sebi svojstven sadraj, i potpis.Sad odaberite Save As iz File menija, doite do direktorijuma odnosno foldera gde elite da snimite fajl (moete i na Desktop) i snimite fajl pod imenom mypage.html. Nemojte jo da zatvarate editor, trebae vam ponovo.(Ako koristite TextEdit za Mac, moraete prvo da kaete TextEdit-u da je tekst zaista samo tekst, tako to ete otii u Format meni i izabrati Make plain text. Zatim, kad snimite fajl i TextEdit predloi da dodate ekstenziju .txt ovom tekst fajlu, izaberite Don't append. Ponekad Mac pokuava da bude previe pametan).

Zatim, otvorite fajl u brauzeru. Moete to uiniti ovako: naite fajl pomou programa koji inae koristite (Windows Explorer, Finder or Konqueror) i kliknite na fajl mypage.html. Trebalo bi da se otvori u brauzeru koji inae koristite. (Ako se to ne desi, otvorite brauzer i prevucite fajl u njega.)Kao to vidite, strana izgleda prilino dosadno

2. KORAK: DODAVANJE BOJA

Verovatno vidite crni tekst na beloj pozadini, ali to zavisi od podeavanja na brauzeru. Dakle, stvar koju je lako uiniti da bi strana dobila vie stila jeste dodati boje. (Ostavite brauzer otvoren, koristiemo ga ponovo).Poeemo sa stilom koji je zabeleen unutar samog HTML fajla ("embedovan"). Kasnije emo staviti HTML i CSS u odvojene fajlove. Razdvajanje je dobro jer olakava upotrebu istog stila u vie HTML fajlova: samo jednom piete fajl za stil. Ali u ovom koraku zadraemo sve u jednom fajlu.Treba da dodamo element u HTML fajl. Stil e biti sadran u tom elementu. Dakle, vratite se u prozor editora i dodajte sledeih pet redova u "head" odeljak HTML fajla:

Moja prva strana sa stilom body { color: purple; background-color: #d8da3d }

[itd.]

Redovi koje treba dodati su crvene boje. Prvi red kae da je u pitanju stil i da je napisan u CSS-u (text/css). Drugi red kae da se stil dodaje body elementu. Trei red utvruje da je tekst ljubiaste boje a sledei red utvruje pozadinu kao zelenkasto-utu.Definicije stila u CSS-u sastoje se odpravila. Svako pravilo ima tri dela:1. Selektor(u primeru: body), koji govori brauzeru na koji se deo dokumenta pravilo odnosi;2. Svojstvo(u primeru: 'color' i 'background-color' su svojstva), objanjava koji se aspekt izgleda utvruje;3. Vrednost('purple' i '#d8da3d'), dodeljuje vrednost svojstvu stila.Primer pokazuje da pravila mogu da se kombinuju. Utvrdili smo dva svojstva, pa smo mogli da napravimo i dva pravila:

body { color: purple }body { background-color: #d8da3d }

ali poto se oba pravila odnose na 'body', napisali smo samo jednom body i stavili oba svojstva i vrednosti zajedno. Za vie obavetenja o selektorima, vidi2. poglavljeuLie & Bos.Boja pozadine 'body' elementa e biti boja pozadine celog dokumenta. Ostalim elementima (p, li, address) nismo dali nikakvu odreenu pozadinu, pa je oni u naelu nee ni imati (odnosno: bie providni). Svojstvo 'color' utvruje boju elementa 'body', a svi ostali elementi unutar njega nasledie njegovu boju, sem ako nije utvreno drugaije. (Posle emo dodati jo neke boje).Sada sauvajte fajl (koristite Save u File meniju) i vratite se u prozor brauzera. Ako pritisnete dugme Reload, strana bi trebalo da se preobrazi iz dosadne u obojenu (premda i dalje prilino dosadnu) stranu. Sem spiska linkova u gornjem delu, tekst bi sada trebalo da bude ljubiast na zelenkasto-utoj pozadini.

Ovako izgleda strana u brauzeru 'Firefox' kad joj dodamo boje

Boje u CSS-u mogu da se utvrde na nekoliko naina. Ovaj primer pokazuje dva: imenom (purple - ljubiasto) ili heksadecimalnom vrednou (#d8da3d). Postoji oko 140 utvrenih imena za boje a heksadecimalne vrednosti omoguuju da se definie preko 16 miliona boja. TekstAdding a touch of styledaje vie obavetenja o ovim kodovima.

3. KORAK: DODAVANJE FONTOVA Jo jedna stvar koju je lako uraditi jeste napraviti razliku u fontovima za razliite elemente na strani. Onda neka tekst bude u Georgia fontu, sem za 'h1' naslov, koji e biti Helvetica.Na Mrei nikad ne moete biti sigurni koje fontove vai posetioci imaju na svojim raunarima, zato emo dodati i par alternativa: ako 'Georgia' nije raspoloiva, 'Times New Roman' ili 'Times' su prihvatljivi, a ako ni to ne uspe, brauzer moe da koristi bilo koji font sacrticama (serifima).Ako 'Helvetica' nije tu, 'Geneva', 'Arial' i 'SunSans-Regular' su sasvim slini po obliku, a ako ih nema, brauzer moe da koristi bilo koji font koji nema crtice (serife).Dodajte sledee redove u editoru:

Moja prva strana sa stilom body { font-family: Georgia, "Times New Roman", Times, serif; color: purple; background-color: #d8da3d } h1 { font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif }

[itd.]

Ako snimite fajl ponovo i pritisnete Reload u brauzeru, trebalo bi da se pojave razliiti fontovi za naslov i ostatak teksta..

Sada su naslov i glavni tekst u razliitim fontovima.

4. KORAK: DODAVANJE TABLE ZA NAVIGACIJU Lista u gornjem delu HTML treba da postane tabla za navigaciju. Mnogi sajtovi imaju neku vrstu menija na vrhu ili sa strane, pa bi i ova strana trebalo da ima tako neto. Postaviemo ga s leve strane, tako je zanimljivije nego da je na vrhuMeni je ve u gornjem delu HTML strane. To je

• lista na vrhu. Linkovi u njoj ne rade jer ne vode nikud, poto na veb-sajt zasad ima samo jednu stranu, ali to sada nije vano. Na pravom veb-sajtu, naravno, ne bi trebalo da bude prekinutih linkova.Dakle, treba da pomerimo listu levo a ostatak sadraja malo udesno, da oslobodimo prostor. CSS svojstva koja koristimo za to su: 'padding-left' (da bi pomerili glavni tekst) i 'position', 'left' i 'top' (da bi pomerili meni).Ima i drugih naina da se to uradi. Ako potraite column ili layout na stranihttp://www.w3.org/Style/CSS/learning, nai ete nekoliko primera spremnih za upotrebu. Ali ovaj je dovoljan za nae potrebe.U prozoru editora, dodajte sledee redove u HTML kod:

  Moja prva strana sa stilom body { padding-left: 11em; font-family: Georgia, "Times New Roman", Times, serif; color: purple; background-color: #d8da3d } ul.navbar { position: absolute; top: 2em; left: 1em; width: 9em } h1 { font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif }

  [itd.]

  Kad snimite fajl ponovo i 'osveite' ga u svom brauzeru, trebalo bi da se lista linkova pojavi levo od teksta. Ovo ve izgleda zanimljivije, zar ne?

  Glavni tekst pomerio se desno, a linkovi su levo od njega, umesto da budu iznad.Svojstvo 'position: absolute' kae da je 'ul' element postavljen nezavisno od ma kog teksta koji ide pre ili posle njega unutar dokumenta, a 'left' i 'top' oznaavaju njegov poloaj. U ovom sluaju, 2em u odnosu na gornju i 1em u odnosu na levu ivicu prozora.'2em' znai dva puta vee od veliine datog fonta. Recimo, ako je font u meniju veliine 12 taaka, onda '2em' iznosi 24 take. 'em' je vrlo korisna jedinica u CSS-u, jer moe automatski da se prilagodi fontu koji posetilac koristi. Veina brauzera ima meni kojim se fontovi mogu poveati ili smanjiti: moete da ga isprobate pa ete videti da se meni poveava zajedno sa fontom, to ne bi bio sluaj da smo koristili piksele.

  5. KORAK: DODAVANJE STILA LINKOVIMA Meni za navigaciju i dalje izgleda kao lista, a ne kao meni. Dodajmo mu malo stila. Izbaciemo takice i pomeriti elemente levo, gde su takice bile. Takoe, dodaemo svakom elementu belu pozadinu i crni kvadrat. (Zato? Nema posebnog razloga, moe nam se.)Nismo jo rekli ni koje e boje imati tekst linkova, pa hajde da ih dodamo: plava za linkove koje posetilac jo nije video i ljubiasta za linkove koje je ve posetio:

  Moja prva strana sa stilom body { padding-left: 11em; font-family: Georgia, "Times New Roman", Times, serif; color: purple; background-color: #d8da3d } ul.navbar { list-style-type: none; padding: 0; margin: 0; position: absolute; top: 2em; left: 1em; width: 9em } h1 { font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif } ul.navbar li { background: white; margin: 0.5em 0; padding: 0.3em; border-right: 1em solid black } ul.navbar a { text-decoration: none } a:link { color: blue } a:visited { color: purple }

  [itd.]

  Tradicionalno, brauzeri prikazuju linkove podvuene i obojene. Obino su boje sline onima koje smo ovde odredili: plava za linkove prema stranama koje jo niste posetili (ili ste ih odavno posetili) i ljubiasta za linkove koje ste ve posetili.U HTML-u, linkovi se stvaraju elementima , dakle da bi im odredili boju, treba da postavimo pravilo stila za a. Da bi se razdvojili poseeni i neposeeni linkovi, CSS stavlja na raspolaganje dve pseudo-klase (:link and :visited). Zovu se pseudo-klase da bi se razlikovale od svojstava klasa koje se pojavljuju direktno u HTML-u, recimo class="navbar" u naem primeru.

  6. KORAK: DODAVANJE VODORAVNE LINIJE Poslednje to emo dodati stilu je vodoravna linija kojom emo razdvojiti tekst od potpisa na dnu. Koristiemo 'border-top' da dodamo takastu liniju iznad elementa :

  Moja prva strana sa stilom body { padding-left: 11em; font-family: Georgia, "Times New Roman", Times, serif; color: purple; background-color: #d8da3d } ul.navbar { list-style-type: none; padding: 0; margin: 0; position: absolute; top: 2em; left: 1em; width: 9em } h1 { font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif } ul.navbar li { background: white; margin: 0.5em 0; padding: 0.3em; border-right: 1em solid black } ul.navbar a { text-decoration: none } a:link { color: blue } a:visited { color: purple } address { margin-top: 1em; padding-top: 1em; border-top: thin dotted }

  [itd]

  Sada je na stil gotov. Hajde sad da vidimo kako da ga odvojimo u zaseban fajl, kako bi ostale strane mogle da koriste isti stil.

  7. KORAK: STAVLJANJE STILA U ODVOJENI FAJL Sad imamo HTML fajl unutar koga je upisana i informacija o stilu. Ali ako na sajt poraste, verovatno emo hteti da nam i druge strane imaju isti stil. Postoji bolji metod nego da kopiramo stil u svaku stranu ponaosob: ako stavimo stil u odvojeni fajl, sve strane mogu da upuuju na njega.Da bi napravili fajl za stil, treba nam novi prazan tekstualni fajl. Moete da izaberete New u File meniju svog editora, da bi otvorili prazan prozor. (Ako koristite TextEdit, ne zaboravite da ga postavite kao obian tekst, koristei Format meni.)Onda isecite (cut) sve to je unutar elementa u HTML fajlu i zalepite (paste) u novi prozor. Nemojte kopirati same tagove i . Oni pripadaju HTML-u a ne CSS-u. U novom prozoru editora trebalo bi da imate kompletan stil:

  body { padding-left: 11em; font-family: Georgia, "Times New Roman", Times, serif; color: purple; background-color: #d8da3d }ul.navbar { list-style-type: none; padding: 0; margin: 0; position: absolute; top: 2em; left: 1em; width: 9em }h1 { font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif }ul.navbar li { background: white;

  margin: 0.5em 0; padding: 0.3em; border-right: 1em solid black }ul.navbar a { text-decoration: none }a:link { color: blue }a:visited { color: purple }address { margin-top: 1em; padding-top: 1em; border-top: thin dotted }

  Izaberite Save As iz File menija, vodite rauna da ste u istom direktorijumu / folderu u kome je i mypage.html fajl, i snimite stil kao mystyle.css.Sad se vratite u prozor sa HTML kodom. Izbriite sve od do taga, ukljuujui i same tagove, i zamenite ih elementom, ovako:

  Moja prva strana sa stilom

  [itd]

  Ovo govori brauzeru da se stil nalazi u fajlu mystyle.css, a poto se direktorijum ne spominje, brauzer e traiti ovaj fajl u direktorijumu u kome je naao i HTML fajl.Ako snimite HTML fajl i osveite ga u brauzeru, ne bi trebalo da vidite nikakvu promenu: stil na strani je i dalje isti, samo to sada dolazi iz odvojenog, eksternog fajla.

  Krajnji rezultatSledei korak je da se oba fajla, mypage.html i mystyle.css, postave na va veb-sajt. (Pa dobro, moda hoete da ih najpre malo doradite) Kako se postavljaju, to ve zavisi od vaeg Internet provajdera.Napomena prevodioca: pravilan prikaz srpskih slova najjednostavnije ete postii ako pre snimanja fajla ve u 1. koraku(pisanje u HTML-u)iza naslova (posle zavrnog taga ) dodate sledei tag:

  Njegova namena je da uputi brauzer na kodni raspored koji se koristi na strani. U naem sluaju to je utf-8, a ako vi uobiajeno koristite neki drugi kodni raspored za srpska slova, upiite odgovarajuu oznaku umesto utf-8 pod stavkom charset.