Mala škola web dizajna za totalne početnike - Lekcija 2 - osnove CSS-a

Zadnji puta smo stali na ovome. Znači napravili smo kostur naše stranice. Odnosno definirali smo strukturu stranice, kao što vidite, stranica baš i ne izgleda nešto posebno. Da bi ju malo uljepšali moramo se koristiti CSS-om. Ako nam je HTML kostur, onda bi CSS bio meso koje ćemo staviti na taj kostur, u dizajnerskom smislu, naravno.

CSS je skraćenica za Cascading Style Sheets. Za ovo baš i nema nekog pravog prijevoda na naš jezik, barem ne nekog smislenog, možda sam ja u krivu, ako netko zna neki dobar prijevod neka ga svakako upiše u kao komentar na ovaj članak. Tako da ćemo mi koristiti ovu skraćenicu.

CSS služi da bi sve one tagove koje smo naveli u prošloj lekciji doveli u red, da bi ih oblikovali da budu oku ugodniji i na kraju upotrebljiviji. Postoji nekoliko načina kako možemo raditi sa CSS-om, ja ču u ovim lekcijam prikazati samo jedan, i to onaj koji ja najčešće koristim i za koji mislim da je najbolji.

Pozivanje CSS-a

Mi ćemo u ovoj maloj školi raditi sa odvojenim CSS datotekama. To znači da ćemo imati jednu datoteku u kojoj ćemo definirati strukturu stranice (HTML) i jednu datoteku u kojoj ćemo definirati izgled stranice (CSS). Za početak moramo napraviti datoteku u koju ćemo upisivati CSS kod. Otvorite svoj omiljeni text editor, otvorite novi dokument u njemu i snimite ga kao stil.css. Znači, CSS datoteke imaju nastavak .css (zamisli!). Kada ste to napravili, otvorite .html datoteku iz prve lekcije (prva.html), u nju ćemo ubaciti sljedeći kod:

Ovaj kod ubacite odmah iznad < / head > taga. Znači mora biti unutar head taga, odnosno prije njegova završetka. Pomoću ovog koda smo rekli HTML dokumentu da za svoje oblikovanje koristi dokument koji smo nazvali stil.css.

CSS pravila

Kako HTML ima svoja pravila pri pisanju koda, isto tako ima i CSS. Upišite ovo u stil.css:

Pokrenite prva.html i trebali dobiti nešto ovako.

Što se desilo? Kao što vidite podloga stranice se promjenila u sivu boju. Zašto? Zato što smo rekli da tag body ima sivu pozadinu. CSS je zapravo vrlo jednostavan glede naziva svojstava.

Svojstvo je naziv koji ćemo od sada koristiti za nazivanje “komandi” u CSS-u. U gornjem slučaju, svojstvo se zove background

Svojstva u CSS-u može bez problema razumjeti svatko tko donekle razumije engleski jezik, pošto su svojstva nazivana prema engleskim riječima. Background na engleskom znači pozadina. Ono što stavljamo ispred vitičaste zagrade ({) je objekt u HTML-u na koji želimo primjeniti neko svojstvo. Na gornjem primjeru smo dakle na body tag primjenili svojstvo pozadine, kojem smo dali vrijednost #ccc, odnosno upisali smo heksadecimalnu vrijednost sive boje. Ja ću u ovim lekcijama koristiti isključivo heksadecimalne vrijednosti boja, no ajmo čisto primjera radi pogledati kako smo ovo još mogli napisati:

Ispod se nalaze heksadecimalne vrijednosti nekih osnovnih boja:

	#000000
	#333333
	#666666
	#999999
	#CCCCCC
	#FFFFFF
	#FF0000
	#00FF00
	#0000FF
	#FFFF00
	#00FFFF
	#FF00FF

Ako koristite Dreamweaver za pisanje svog koda, onda će vam odabir boja biti poprilično lagan, pošto Dreamweaver pri upisu koda izbacuje meni s bojama i nakon što odaberete boju on sam upisuje njenu heksadecimalnu vrijednost.

Ako nemate Dreamweaver ili ga iz nekog razloga ne želite koristiti, možete se poslužiti nekim grafičkim programom poput Photoshopa i iz njega izvući i kopirati traženu heksadecimalnu vrijednost. Većina takvih programa ima prikaz boja u različitim vrijednosnim sustavima. A ako nema, zbilja nebi trebali koristiti takav program.

No, za sada dosta o bojama. Raščlanit ćemo malo onaj gornji primjer našeg prvog CSS unosa, dakle, kada smo napisali body odredili smo da browser ono što poslje toga upišemo primjeni na body tag, nakon toga smo otvorili vitičastu zagradu { , unutar vitičastih zagrada upisujemo sva svojstva koja želimo dodijeliti nekom elementu, nakon toga smo upisali ime svojstva - u našem slučaju background, i iza njega stavili dvotočje : čime smo označili početak unosa vrijednosti svojstva, upisali smo samu vrijednost - #ccc i zatvorili to svojstvo sa ;, nakon toga smo zatvorili to sve sa vitičastom zagradom } i time označili kraj unosa svojstava u body tag.

Znači pri pisanju našeg CSS dokumenta moramo poštovati neka pravila. Najbitnije je otvaranje i zatvaranje vitičastih zagrada, a zatim zatvaranje svojstava sa točka zarez. Nije bitno dali ćete sva svojstva pisati u istom redu

ili ćete svako pisati u posebnom redu

to ovisi o vama i sa vremenom ćete naučiti što vam je lakše. Ja pišem CSS zavisno o tome koliko ću svojstava imati za određeni element, ako će ih biti malo onda sve u istom redu, a ako će ih biti više svako u posebnom redu. Razmaci isto nisu toliko bitni. Vidjet ćete kasnije da je CSS vrlo fleksibilan glede načina pisanja koda.

Da bi CSS radio kako treba svojstva moraju biti zatvorena vitičastim zagradama i na kraju svagog svojstva mora doći točka-zarez. Ako vam nešto ne radi uvijek prvo pogledajte dali vam je kod ispravno napisan a tek onda tražite greške na drugim mjestima. Greške u upisu koda su najčešće greške.

Nadalje, pri pisanju CSS koda ponekad je poželjno komentiranje, komentari su dijelovi CSS-a koje browser ne čita ali služe nama da bi se lakše snalazili u onome što smo napisali, ja sam već koristio komentare kada sam vam pokazao kako možete još napisati da nam pozadina bude sive boje. Komentar počinjemo sa /* a završavamo sa */ kao npr.:

Osnovna CSS svojstva

Border

Postoje neka osnovna CSS svojstva, koja ćemo obraditi u ovoj lekciji. Za početak ćemo promjeniti boju naše pozadine u bijelu. Sivu sam iskoristio samo kao primjer. Znači izmjenit vaš CSS dokument da izgleda ovako:

Sada bi trebali dobiti nešto ovako.

Znači stranica se vratila u prijašnje stanje, opet smo upisali da heksadecimalni kod boje ima skraćenu vrijednost.

Kada se heksadecimalni kodovi sastoje od 6 jednakih znamenki ili slova, dovoljno je da upišemo samo prva 3 slova ili znamenke.

Ok, sada ćemo se upoznati sa još jednim svojstvom, to svojstvo se naziva border ili ti po naški, obrub. Ovo svojstvo ćemo primjeniti na naše odlomke, odnosno na p tagove. U vaš CSS dodajte ovaj kod ispod onoga što smo dosad upisali:

I trebali bi dobiti ovako nešto.

Mi smo sa ovim kodom browseru rekli da želimo da nam svi p tagovi na stranici imaju obrub debljine 1px, punu liniju (solid) i da budu crvene boje (#ff0000). U većini tutoriala o CSS su vam svojstva pokazana u svom produženom obliku. Ja sam odlučio odmah prikazivati skraćeni oblik. Pošto mislim da to nije toliko teško za shvatiti. Produženi oblik bi ovako izgledao:

Znači dobili bi totalno istu stvar a napisali bi puno više koda. Bitno je za zapamtiti, da svako CSS svojstvo mora imati neke svoje vrijednosti. U gornjem primjeru vidimo da border ima tri osnovne vrijednosti, a to su, debljina obruba, vrsta obruba i boja obruba. Napomenuo bih da je vrsta crte definitvno najzanimljivija vrijednost ovog svojstva, probajte se s time malo igrati, znači, probajte u gornji kod upisati nešto od ovoga i pogledajte što će se desiti: dashed, dotted, double, groove, ridge. Svakako isporobajte dashed, to je iscrtkana linija, za ove ostale ne mogu garantirati pošto se u nekim browserima ili ne prikazuje dobro ili se uopće ne prikazuje, istočkana linija odnosno dotted će se dobro prikazivati u Firefoxu, ali u Internet Exploreru neće.

Ljepota CSS-a je u sljedećem, recimo da želimo da nam naši odlomci imaju obrube samo gore i dolje, da budu debljine 4px, iscrtkane i zelene boje, to bi napisali ovako:

I dobit ćemo ovo.

Primjetie opet kako je CSS zapravo jednostavan glede svojih komandi, zanči ako upišete samo border, to podrazumjeva da ćete imati obrub sa svih strana, no ako upišete border-top to znači da želite napraviti samo gornji obrub, top znači gore na engleskom, tako da uz border-top imate još border-bottom (doljni obrub), border-left (lijevi obrub) i border-right (desni obrub).

Zadatak:
Vaš zadatak će sada biti da napravite da odlomci, odnosno p tagovi imaju gornji i donji obrub u crvenoj boji, da budu debljine 2px i da budu pune linije. Lijevi i desni obrubi će biti crtkani, debljine 5px i plave boje. Riješenje ovog zadatka će biti u idućoj lekciji.

Width i height

Ovo su možda 2 najjednostavnija svojstva u CSS-u width na engleskom znači širina, a height znači visina koja se određuje najčešće u pikselima, ali ima i drugih načina o kojima ćemo kasnije. Recimo da želimo da nam širina svih odlomaka bude 300px a visina 500px jednostavno ćemo dodati ove dvije linije u naš CSS kod pod definicju p taga:

Znači da nam sve ukupna definicija treba izgledati ovako:

i to će izgledati ovako.

Upisivanjem ove dvije linije smo rekli da želimo da nam širina odlomka bude 300px a visina 500px. Vrlo jednostavno.

Ako širina nekog HTML elementa nije određena, taj elemnt automatski poprima širinu stranice ili širinu nekog drugog elementa u kojem se nalazi. Visina će ovisiti o sadržaju koji se nalazi u tom elementu.

Eto to bi bilo to, što se tiče ove lekcije, znam da za sada ima dosta teorije i da jedva čekate da počnete raditi prave stvari, ali prvo moramo svladati neke osnove. U sljedećoj lekciji nastavljamo sa CSS svojstvima, probajte do tada riješiti onaj zadatak. Ako šta nije jasno, upišite to u komentare, napokon sam napravio da sistem komentiranja radi kako treba , Ajax baby, Ajax! Pozdrav i uživajte.

Ovaj unos je postavljen 15.11.2007 u 21:32 i pohranjen je pod HTML i CSS, Mala škola web dizajna za totalne početnike, Tutoriali. Možete pratiti odgovore kroz RSS 2.0 feed. Možete preskočiti do kraja stranice i ostaviti komentar. Pinganje trenutno nije dozvoljeno.