Odeljci koji ovako izgledaju nisu obavezni. Oni sadrže neka dodatna objašnjenja o HTML i CSS kodu u datim primerima. Znak opasnosti na početku ovakvih odeljaka označava da je u pitanju napredniji materijal od onog u ostatku teksta.
Originalni tekst ovog uputstva izradio je Bert Bos, pod nazivom: 'CSS tutorial: Starting with HTML + CSS'. Sva prava zadržava autor.
Original je na adresi http://www.w3.org/Style/Examples/011/firstcss.
Prevod na srpski: Luka Stanisavljević, kontakt: luka [na] cincplug [tačka] com. Greške u prevodu su moguće.
'Screenshot' primeri u originalnom uputstvu su u programima 'KEdit' i 'Konqueror'. U ovom prevodu korišćeni su 'Notepad' i 'Firefox'.
ћирилица - latinica
Ova kratko uputstvo namenjeno je onima koji žele da koriste CSS a koji dosad nisu pisali CSS fajlove.
Ono ne objašnjava mnogo toga o CSS-u. Iz njega možete naučiti kako da napravite HTML i CSS fajl, i kako da omogućite da ova dva fajla rade zajedno. Posle toga možete da pročitate mnogobrojna druga uputstva i da svojim HTML i CSS fajlovima dodate nova svojstva. Ili možete početi da koristite editor za HTML i CSS koji vam može pomoći da izradite složeniji veb-sajt.
Kad pročitate uputstvo, napravićete stranu koja izgleda ovako:
HTML strana koju će te dobiti, sa bojama i rasporedom, u celosti napravnjena pomoću CSS-a.
Imajte na umu da ne tvrdim da je ovo lepo ☺
Odeljci koji ovako izgledaju nisu obavezni. Oni sadrže neka dodatna objašnjenja o HTML i CSS kodu u datim primerima. Znak opasnosti na početku ovakvih odeljaka označava da je u pitanju napredniji materijal od onog u ostatku teksta.
Za rad po ovom uputstvu, predlažem da koristite najjednostavnije alate. Primera radi, Notepad (za Windows), TextEdit (za Mac) ili KEdit (za KDE) će biti sasvim dovoljni. Kad jednom shvatite načela, možete da pređete 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 previše naprednih opcija.
Ne koristite programe za obradu teksta, kao što su Microsoft Word i OpenOffice. Ovakvi programi uobičajeno prave fajlove koje veb-brauzer ne može 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), počevši od praznog prozora, i da otkucate sledeće:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>Moja prva strana sa stilom</title> </head> <body> <!-- Navigacija --> <ul class="navbar"> <li><a href="index.html">Glavna strana</a> <li><a href="musings.html">Razmišljanja</a> <li><a href="town.html">Moj grad</a> <li><a href="links.html">Linkovi</a> </ul> <!-- Glavni sadržaj --> <h1>Moja prva strana sa stilom</h1> <p>Dobrodošli na moju prvu stranu sa stilom! <p>Na njoj nema slika, ali bar ima stil. Ima i linkove, premda ne vode nikuda… <p>Ovde traba da bude još toga, ali zasad ne znam šta. <!-- Potpis i datum, red je! --> <address>Napravio 5. aprila 2004.<br> ja.</address> </body> </html>
Ustvari, ne morate ni da kucate. Možete da iskopirate s ove veb-strane u svoj editor.
Prva linija u ovom HTML-u govori brauzeru kom tipu HTML-a strana pripada (DOCTYPE označava TIP DOKUMENTA). U našem slučaju - HTML verzija 4.01.
Reči između < i > zovu se tagovi i, kao što vidite, dokument je smešten između <html> i </html> tagova. Između <head> i </head> 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.
<body> je mesto na kome se nalazi stvarni tekst dokumenta. U načelu, sve što je tamo biće prikazano, sem teksta između <!-- i -->, koji nam služi za komentare unutar koda. Njega će brauzer da preskoči.
Od ostalih tagova u ovom primeru, <ul> predstavlja “nesortiranu listu”, recimo listu čiji elementi nisu poređani po rednim brojevima. Tag <li> predstavlja “element sa liste”. <p> je “pasus”. <a> označava link.
Editor Notepad prikazuje izvorni HTML kod.
Ako želite da znate šta znače reči unutar <…>, dobro mesto za početak je Getting started with HTML. Ali evo nekoliko reči o našoj uvodnoj HTML strani.
Obratite pažnju da nisam zatvorio elemente “li” i “p”. U HTML-u (ali ne i u XHTML-u), dozvoljeno je preskočiti </li> i </p> tagove, kao što sam ja ovde učinio, da bi vam tekst bio nešto čitljiviji. Ali, ako želite, možete ih dodati.
Pretpostavimo da će ovo biti jedna od nekoliko sličnih strana na veb-sajtu. Kao što je i uobičajeno za današnje veb strane, i ova će imati meni koji upućuje na druge strane na hipotetičkom sajtu, neki sebi svojstven sadržaj, i potpis.
Sad odaberite “Save As……” iz File menija, dođite do direktorijuma odnosno foldera gde želite da snimite fajl (možete i na Desktop) i snimite fajl pod imenom “mypage.html”. Nemojte još da zatvarate editor, trebaće vam ponovo.
(Ako koristite TextEdit za Mac, moraćete prvo da kažete TextEdit-u da je tekst zaista samo tekst, tako što ćete otići u Format meni i izabrati “Make plain text”. Zatim, kad snimite fajl i TextEdit predloži da dodate ekstenziju “.txt” ovom tekst fajlu, izaberite “Don't append.” Ponekad Mac pokušava da bude previše pametan).
Zatim, otvorite fajl u brauzeru. Možete to učiniti ovako: nađite fajl pomoću programa koji inače koristite (Windows Explorer, Finder or Konqueror) i kliknite na fajl “mypage.html”. Trebalo bi da se otvori u brauzeru koji inače koristite. (Ako se to ne desi, otvorite brauzer i prevucite fajl u njega.)
Kao što vidite, strana izgleda prilično dosadno…
Verovatno vidite crni tekst na beloj pozadini, ali to zavisi od podešavanja na brauzeru. Dakle, stvar koju je lako učiniti da bi strana dobila više stila jeste dodati boje. (Ostavite brauzer otvoren, koristićemo ga ponovo).
Počećemo sa stilom koji je zabeležen unutar samog HTML fajla ("embedovan"). Kasnije ćemo staviti HTML i CSS u odvojene fajlove. Razdvajanje je dobro jer olakšava upotrebu istog stila u više HTML fajlova: samo jednom pišete fajl za stil. Ali u ovom koraku zadržaćemo sve u jednom fajlu.
Treba da dodamo element <style> u HTML fajl. Stil će biti sadržan u tom elementu. Dakle, vratite se u prozor editora i dodajte sledećih pet redova u "head" odeljak HTML fajla:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Moja prva strana sa stilom</title>
<style type="text/css">
body {
color: purple;
background-color: #d8da3d }
</style>
</head>
<body>
[itd.]
Redovi koje treba dodati su crvene boje. Prvi red kaže da je u pitanju stil i da je napisan u CSS-u (“text/css”). Drugi red kaže da se stil dodaje “body” elementu. Treći red utvrđuje da je tekst ljubičaste boje a sledeći red utvrđuje pozadinu kao zelenkasto-žutu.
Definicije stila u CSS-u sastoje se od pravila. Svako pravilo ima tri dela:
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 pošto se oba pravila odnose na 'body', napisali smo samo jednom “body” i stavili oba svojstva i vrednosti zajedno. Za više obaveštenja o selektorima, vidi 2. poglavlje u Lie & Bos.
Boja pozadine 'body' elementa će biti boja pozadine celog dokumenta. Ostalim elementima (p, li, address…) nismo dali nikakvu određenu pozadinu, pa je oni u načelu neće ni imati (odnosno: biće providni). Svojstvo 'color' utvrđuje boju elementa 'body', a svi ostali elementi unutar njega naslediće njegovu boju, sem ako nije utvrđeno drugačije. (Posle ćemo dodati još neke boje).
Sada sačuvajte 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 prilično dosadnu) stranu. Sem spiska linkova u gornjem delu, tekst bi sada trebalo da bude ljubičast na zelenkasto-žutoj pozadini.
Ovako izgleda strana u brauzeru 'Firefox' kad joj dodamo boje.
Boje u CSS-u mogu da se utvrde na nekoliko načina. Ovaj primer pokazuje dva: imenom (“purple” - ljubičasto) ili heksadecimalnom vrednošću (“#d8da3d”). Postoji oko 140 utvrđenih imena za boje a heksadecimalne vrednosti omogućuju da se definiše preko 16 miliona boja. Tekst Adding a touch of style daje više obaveštenja o ovim kodovima.
Još jedna stvar koju je lako uraditi jeste napraviti razliku u fontovima za različite elemente na strani. Onda neka tekst bude u “Georgia” fontu, sem za 'h1' naslov, koji će biti “Helvetica.”
Na Mreži nikad ne možete biti sigurni koje fontove vaši posetioci imaju na svojim računarima, zato ćemo dodati i par alternativa: ako 'Georgia' nije raspoloživa, 'Times New Roman' ili 'Times' su prihvatljivi, a ako ni to ne uspe, brauzer može da koristi bilo koji font sa crticama (serifima). Ako 'Helvetica' nije tu, 'Geneva', 'Arial' i 'SunSans-Regular' su sasvim slični po obliku, a ako ih nema, brauzer može da koristi bilo koji font koji nema crtice (serife).
Dodajte sledeće redove u editoru:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Moja prva strana sa stilom</title>
<style type="text/css">
body {
font-family: Georgia, "Times New Roman",
Times, serif;
color: purple;
background-color: #d8da3d }
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
</style>
</head>
<body>
[itd.]
Ako snimite fajl ponovo i pritisnete “Reload” u brauzeru, trebalo bi da se pojave različiti fontovi za naslov i ostatak teksta.
Sada su naslov i glavni tekst u različitim fontovima.
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 nešto. Postavićemo ga s leve strane, tako je zanimljivije nego da je na vrhu…
Meni je već u gornjem delu HTML strane. To je <ul> lista na vrhu. Linkovi u njoj ne rade jer ne vode nikud, pošto naš “veb-sajt” zasad ima samo jednu stranu, ali to sada nije važno. Na pravom veb-sajtu, naravno, ne bi trebalo da bude prekinutih linkova.
Dakle, treba da pomerimo listu levo a ostatak sadržaja 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 načina da se to uradi. Ako potražite “column” ili “layout” na strani Learning CSS, naći ćete nekoliko primera spremnih za upotrebu. Ali ovaj je dovoljan za naše potrebe.
U prozoru editora, dodajte sledeće redove u HTML kod:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Moja prva strana sa stilom</title>
<style type="text/css">
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 }
</style>
</head>
<body>
[itd.]
Kad snimite fajl ponovo i 'osvežite' 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' kaže da je 'ul' element postavljen nezavisno od ma kog teksta koji ide pre ili posle njega unutar dokumenta, a 'left' i 'top' označavaju njegov položaj. U ovom slučaju, 2em u odnosu na gornju i 1em u odnosu na levu ivicu prozora.
'2em' znači dva puta veće od veličine datog fonta. Recimo, ako je font u meniju veličine 12 tačaka, onda '2em' iznosi 24 tačke. 'em' je vrlo korisna jedinica u CSS-u, jer može automatski da se prilagodi fontu koji posetilac koristi. Većina brauzera ima meni kojim se fontovi mogu povećati ili smanjiti: možete da ga isprobate pa ćete videti da se meni povećava zajedno sa fontom, što ne bi bio slučaj da smo koristili piksele.
Meni za navigaciju i dalje izgleda kao lista, a ne kao meni. Dodajmo mu malo stila. Izbacićemo tačkice i pomeriti elemente levo, gde su tačkice bile. Takođe, dodaćemo svakom elementu belu pozadinu i crni kvadrat. (Zašto? Nema posebnog razloga, može 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 ljubičasta za linkove koje je već posetio:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Moja prva strana sa stilom</title>
<style type="text/css">
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 }
</style>
</head>
<body>
[itd.]
Tradicionalno, brauzeri prikazuju linkove podvučene i obojene. Obično su boje slične onima koje smo ovde odredili: plava za linkove prema stranama koje još niste posetili (ili ste ih odavno posetili) i ljubičasta za linkove koje ste već posetili.
U HTML-u, linkovi se stvaraju elementima <a>, dakle da bi im odredili boju, treba da postavimo pravilo stila za “a”. Da bi se razdvojili posećeni i neposećeni 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 našem primeru.
Poslednje što ćemo dodati stilu je vodoravna linija kojom ćemo razdvojiti tekst od potpisa na dnu. Koristićemo 'border-top' da dodamo tačkastu liniju iznad elementa <address>:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Moja prva strana sa stilom</title>
<style type="text/css">
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 }
</style>
</head>
<body>
[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.
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 upućuju na njega.
Da bi napravili fajl za stil, treba nam novi prazan tekstualni fajl. Možete da izaberete “New” u File meniju svog editora, da bi otvorili prazan prozor. (Ako koristite TextEdit, ne zaboravite da ga postavite kao običan tekst, koristeći Format meni.)
Onda isecite (cut) sve što je unutar <style> elementa u HTML fajlu i zalepite (paste) u novi prozor. Nemojte kopirati same tagove <style> i </style>. 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 računa 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. Izbrišite sve od <style> do </style> taga, uključujući i same tagove, i zamenite ih <link> elementom, ovako:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>Moja prva strana sa stilom</title> <link rel="stylesheet" href="mystyle.css"> </head> <body> [itd]
Ovo govori brauzeru da se stil nalazi u fajlu “mystyle.css”, a pošto se direktorijum ne spominje, brauzer će tražiti ovaj fajl u direktorijumu u kome je našao i HTML fajl.
Ako snimite HTML fajl i osvežite 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 rezultat
Sledeći korak je da se oba fajla, mypage.html i mystyle.css, postave na vaš veb-sajt. (Pa dobro, možda hoćete da ih najpre malo doradite…) Kako se postavljaju, to već zavisi od vašeg Internet provajdera.
Napomena prevodioca: pravilan prikaz srpskih slova najjednostavnije ćete postići ako pre snimanja fajla već u 1. koraku (pisanje u HTML-u) iza naslova (posle završnog taga </title>) dodate sledeći tag:
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
Njegova namena je da uputi brauzer na kodni raspored koji se koristi na strani. U našem slučaju to je utf-8, a ako vi uobičajeno koristite neki drugi kodni raspored za srpska slova, upišite odgovarajuću oznaku umesto utf-8 pod stavkom charset.
Za dalji uvod u CSS, vidi 2. poglavlje u Lie & Bos, ili Dave Raggett's intro to CSS..
Druga obaveštenja, uključujući i još neka uputstva, možete naći na strani learning CSS.
