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

U prošloj lekciji zadatak je bio 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 je vrlo jednostavno:

Možete kliknuti ovdje da vidite to rješenje. Sada kad smo to riješili, nastavljamo dalje, još uvijek imamo stranicu koja nam se zove prva.html i css koji nam se zove stil.css

Da bi imali u svim primjerima isto za dalje, u HTML-u nemojte ništa dirati, a u CSS-u obrišite sve, znači neka vam CSS bude prazan dokument. Sada ćemo nastaviti sa daljnjim upoznavanjem CSS-a i njegovih svojstava.

Background - prošireno

Prije nego počnemo sa ovom vježbom skinite si prvo ovu .zip datoteku, raspakirajte ju, i spremite pozadina-1.jpg u mapu images.

U prošloj sam lekciji objasnio kako možete pomoću svojstva background promjeniti boju pozadine, znači upišete background:#FF0000; i boja pozadine elementa u koji upisujte ovo svojstvo će se promjeniti (u ovom slučaju u crvenu boju.)

Tag body je isto element na stranici poput p taga ili div taga. Jedina je razlika što se svi ostali tagovi koji sačinjavaju strukturu stranice moraju nalaziti unutar okvira body taga da bi stranica ispravno radila.

Ako želimo promjeniti pozadinu stranice, moramo upisati svojstvo za pozadinu u body tag. No ovaj puta ćemo to malo drukčije napraviti, nego što smo to zadnji put. U CSS upišite sljedeći kod.

Pogledajte što biste trebali dobiti. Malo ćemo proučiti što smo to točno napravili. Prvo smo rekli na koji element želimo primjeniti neko svojstvo, u našem slučaju, body. Zatim smo rekli da želimo definirati svojstvo pozadine odnosno background. I sad dolazimo do novih stvari, sa url smo rekli browseru da počne tražiti neku sliku, i u zagradi smo mu rekli gdje se ta slika nalazi. Znači slika se nalazi u mapi images i zove se pozadina-1.jpg. Ako ste pogledali sliku koju sam dao da skinete, možda ste primjetili da je slika jako uska (samo 2px) i da je visoka kakvih 500px. I sad je pitanje, kako to da je ta slika koja je siroka svega 2px uspjela prekriti cijelu stranicu. Tu dolazi naredba repeat-x. Repeat-x govori browseru da ponavlja sliku pozadina-1.jpg po X osi ekrana.

Uvijek pišite background kao u ovom primjeru. I svakako nakon zatvorene zagrade napravite razmak, pa onda repeat. Jer sam primjetio da Internet Explorer ponekad ima problema sa time. Znači url, repeat, pa pozicija slike.

Znači browser je uzeo našu sliku i “umnožio” je toliko puta koliko je potrebno da prekrije s njom cijeli ekran. Kada smo napisali top to je značilo da browser treba početi prikazivati sliku na vrhu body elementa, što je u ovom slučaju i vrh stranice, i to sa lijeve strane. Ali znači sliku je ponavljao samo po x-osi ekrana, kao što vidite donji dio ekrana je ostao bijele boje. Ako bi željeli da se pozadina ponavlja i po x i po y osi trebamo upisati samo repeat umjesto repeat-x ili repeat-y. U našem primjeru mi to nećemo napraviti, nego ćemo ostaviti sve kako je, ali ćemo napraviti da nam stranica izgleda malo bolje, znači da nema tog bijelog dijela, nego da cijela pozadina izgleda neprekinuto, i da izgleda kao jedna cijelina. Da bi to učinili moramo samo dodati još boju sa kojom završava naša slika, ta boja ima heksadecimalnu vrijednost #00B2D9. Tako da cemo u nas kod samo dodati tu boju, to bi trebalo ovako na kraju izgledat:

Trebali bi dobiti ovo. Znači samo smo dodali boju koja nam je tako reći popunila onaj bijeli dio stranice.

Za zadatak isprobajte kako bi izgledalo da umjesto repeat-x upišete repeat-y. Probajte skoristiti i neke druge slike, za pozadinu. Uglavnom poigrajte se malo sa ovim svojstvom da bi ga lakše naučili.

Fontovi i slova

Naravno za web stranicu moramo koristiti i određene fontove a i trebaju nam neka svojstva pomoću kojih ćemo definirati izgled istih. Pošto nam se tekstovi nalaze u p tagovima, onda ćemo sljedeća svojstva primjenjivati na njih, naravno.

U ovom slučaju ću vam prvo pokazati kako ćete svojstva za fontove napisati produženo pa ćemo onda napraviti skraćeno. Recimo da želimo napraviti sljedeće, želimo da slova u našim odlomcima, budu Arial, da budu veličine 14px, da imaju razmak između redaka (prored) od 1,5 redak. I da budu bijele boje. Duži oblik pisanja bi bio:

Rezultat pogledajte ovdje. Sa font-family smo rekli browseru da koristi font Arial ako ga korisnik ima instaliranog na računalu, ako nema neka koristi Helveticu, ako nema ni Helveticu neka koristi bilo koji font iz sans-serif obitelji fontova.

U font-family možete upisati bilo koji font. Ali problem je u tome da korisnik mora taj font imati instaliran na svojemu računalu. Zato se za font-family koriste fontovi za koje se zna da ih većina korisnika ima, pošto dolaze sa većinom operativnih sustava, a to su: Arial, Helvetica, Times New Roman, i ponekad Tahoma, Trebuchet MS, Courier, Geneva i Georgia.

Nakon font-family smo imali font-size što je naravno veličina fonta u pikselima. Tu se nema što puno objašnjavati, jedino bih naglasio da pikseli nisu jedini način određivanja veličine slova, koriste se još neke druge mjerne jedinice, koje ćemo kasnije objasniti.

Sa line-height određujemo prored, odnosno razmak između redaka, taj razmak možemo odrediti ovako kao što sam ja napisao 1.5, to znači da će razmak biti jedan i po redak. A mogli smo ga odrediti i u pikselima. Iako preporučam određivanje u redcima zato što je 1.5 redak nakakav standardni prored.

Na kraju nam je ostalo svojstvo color. Color je naravno boja slova koju isto kao i kod backgrounda i bordera možete definirati heksadecimalnim kodom, rgb kodom ili engleskom riječi za boju koju želite. Pretpostavljam da svojstvo color ima takav naziv, a ne font-color, iz razloga što je prva verzija CSS-a bila većinom orijentirana prema tekstu. Čak i u Dreamweaveru, kada želite u HTML pridružiti CSS datoteku idete na Text pa CSS Styles. Čak i u verziji CS3 uređivanje CSS-a se još uvijek nalazi kao pod izbornik u glavnom izborniku Text.

Pokazao sam vam kako izgleda kada svojstva fonta upisujete produženo, to skraćeno izgleda ovako:

Znači sve smo to uspjeli staviti u jedan red, iako smo ipak color morali posebno odvojiti. E sad, pogledajte da na početku imamo vrijednost normal. Ova vrijednost nam označava da debljina, odnosno težina fonta bude normalna, da smo htjeli podebljana slova tu bi upisali bold umjesto normal. A u onom dužem pisanju bi to definirali kao font-weight svojstvo.

Pošto fontovi imaju mali milijun svojstava, ja ću pokušati navesti one koji bi vam mogli biti korisni u donjoj tablici, moram reći da fontovi imaju i više od ovih svojstava koje ću ja dolje nabrojati, ali nažalost dosta od njih rade samo u nekim browserima, a neki ne rade ni u jednom browseru. Ali ih naravno nećemo sve isprobati. To će biti vaš zadatak da samostalno napravite.

Svojstvo	Opis	Vrijednosti
font-family	Određuje koji će se font ili obitelj fontova koristiti.	Fontovi su: Arial, Helvetica, Tahoma, Genova, Georgia, Times New Roman, Trebuchet MS. Obitelji fontova su: sans-serif, serf, monospace
font-size	Određuje veličinu fonta u pikselima, u postotcima ili em.	broj px, broj %, broj em
font-style	Određuju stil fonta	italic, oblique, normal. Italic i oblique daju isti rezultat, odnosno ukošena slova
font-variant	Određuje varijantu fonta	normal, small-caps (kada napište small-caps to znači da će vam sva slova biti velika, ali će biti smanjena, dok će npr. slova na početku rečenice biti veća od ostatka, iako će i ona biti velika.)
font-weight	Određuje težinu fonta, odnosno dali su i koliko su slova podebljana	bold, bolder, lighter, normal, brojevi od 100 do 900. Iako iz mog iskustva mogu reći da se ovdje jedino isplati koristiti bold i normal. Pošto oni jedini daju nekakav učinak, sve ostalo se ne primjeti.
letter-spacing	Razmak izmedju slova. Vrlo korisno svojstvo ako se želite igrati sa fontovima.	Upište razmak između slova u pikselima, npr. letter-spacing: 5px;
line-height	Prored u pikselima ili brojevima redaka	Upišete ili broj piksela i broj redaka razmaka. npr. line-height: 1.5;
text-decoration	Ukrašavanje fonta	blink (blinkanje), underline (podvučeno), line-through (linija kroz sredinu), overline (linija iznad teksta)
text-align	Ovo je jedan od najvažnijih svojstava, znači poravnanje teksta	left (lijevo), center (po sredini), right(desno), justify(poravnato sa obje strane), ove vrijednosti se odnose naravno na objekt u kojem se tekst nalazi. Ako je tekst u p elementu, onda će se poravnanje vršiti u odnosu na taj element.
text-transform	Transformira tekst	capitalize (promjenit će tekst tako da će svaka rečenica imati veliko početno slovo), uppercase (pretvorit će sav tekst u velika slova), lowercase (pretvorit će sav tekst u mala slova)

Zaključak

U ovoj smo lekciji obradili još 2 CSS svojstva. Što je mislim sasvim dovoljno za nekakvo upoznavanje sa CSS-om. Ovo ne znači da CSS više nećemo raditi, čak naprotiv, tek smo počeli. Ali od idućeg puta ovi tutoriali će biti većinom u video formatu, zato što bih morao pisati ogromne tekstove da bi vam dalje objašnjavao šta i kako, a to mi se neda. Pošto stvari postaju sve kompliciranije. Znači idući puta nastavljamo sa CSS-om ali u video formatu, a vi se dotad igrajte sa ovime što smo do sada obradili. Najbolje ćete CSS naučiti ako stalno budete isprobavali njegova svojstva i njegove mogućnosti. Naravno, sva pitanja, komentare, pohvale i kritike pošaljite putem komentara.

Ovaj unos je postavljen 26.11.2007 u 16:47 i pohranjen je pod HTML i CSS, Mala škola web dizajna za totalne početnike. Možete pratiti odgovore kroz RSS 2.0 feed. Možete ostaviti odgovor, ili napraviti trackback sa svog sajta.