HTML/CSS za početnike #7 - Oblikovanje teksta

     U prethodnoj lekciji formatirali smo izgled stranice prema skici koju smo napravili u lekciji broj 3. Jedan od osnovnih sadržaja svakog web sajta jeste tekst, svaki posetioc sajta u najvećem broju slučajeva dolazi da bi nešto pročitao, pa zato treba veliku pažnju posvetiti stajlingu teksta, bilo da se radi o naslovima, navigacionim linkovima ili samom tekstualnom sadržaju. Mi ćemo u ovoj lekciji primeniti neke osnovne CSS atribute za oblikovanje teksta na tekst koji već imamo (naslov sajta, slogan, navigacija futer).

     Za početak treba definisati osnovni font koji će sajt koristiti. U tu svrhu koristi se atribut font-family. Ja volim da definišem font u "body" instrukciji i na taj način postavim font za celokupan sadržaj (svi ostali elementi koji se nalaze u telu nasleđuju ovaj atribut) umesto da definišem font u svakom elementu posebno.

Dakle pronađite "body" instrukciju u CSS dokumentu i ubacite sledeći atribut:

font-family: Arial, Verdana, Helvetica;

     Sam atribut nije komplikovan, jedino je bitno da se napomene da font koji se postavi mora da bude instaliran i na računaru posetioca sajta. Zbog toga se najčešće koriste standardni fontovi kao što su Arial, Times New Roman, Verdana itd... Takođe mogu se navesti nekoliko fonta kao što sam ja to uradio. Kao primarni font sajt će koristiti Arial, ukoliko korisnik kojim slučajem nema instaliran font Arial, sajt će koristiti font Verdana, zatim ako ni Verdana nije dostupna, koristiće se font Helvetica. Ukoliko se desi da korisnik nema nijedan od podešenih fontova, pretraživač će prikazati tekst u fontu koji je podešen kao podrazumevani. Ukoliko želite da koristite neke nestandardne fontove, postoji rešenje i za to, ali o tome ćemo neki drugi put, za sada neka ostane ovako.
     Za početak da sredimo naslov sajta u headeru. Unesite sledeću instrukciju u CSS dokument:

#header h2 {
margin: 0; padding: 0 20px;
font-size: 32px;
font-weight: bold;
line-height: 40px;
color: #222222;
}
     Margin i padding su vam poznati, i kod teksta funkcionišu isto kao i kod div elemenata. Font-size, pogađate, predstavlja atribut za veličinu fonta i u ovom slučaju je vrednost izražena u pikselima (postoje i druge jedinice za veličinu fontova, i o tome ćemo drugom prilikom). Font-weight predstavlja atribut za "debljinu" fonta i u našem slučaju vrednost je "bold" što znači da je tekst zadebljan. "Heading" elementi i inače imaju zadebljani tekst tako da ovaj atribut ovde nije neophodan i ništa neće promeniti ali sam ga stavio zbog učenja. Line-height je atribut koji definiše visinu reda teksta i može biti izražen u pikselima i drugim jedinicama o kojima će biti reči kasnije. Poslednji atribut, color, je jednostavno boja teksta i funkcioniše isto kao i background-color.
     Sada da definišemo stil slogana sledećom instrukcijom:

#header h5 {
margin: 0; padding: 0 20px;
font-size: 16px;
font-weight: normal;
font-style: italic;
line-height: 20px;
color: #222222;
}
     Ovde je većina atributa poznato, jedini novi atribut je font-style koji definiše stil fonta i vrednost "italic" znači da je tekst iskošen. Obratite pažnju i na vrednost font-weight atributa, sada je vrednost "normal" što znači da tekst u sloganu neće biti zadebljan.
     Postoji još jedna alternativna metoda podešavanja fontova. To je skraćeni način pisanja u vidu  jednog font atributa. Na primer, umesto da pišemo font-family, font-size, font-weight itd... možemo jednostavno napisati:

font: italic bold 20px Arial;
     Više o ovome možete pročitati ovde.
     Sada možemo da sredimo navigacioni meni. Unesite sledeću instrukciju u CSS dokument:

a.nav {
display: inline-block;
margin: 0; padding: 10px;
font-size: 20px;
font-weight: bold;
line-height: 20px;
color: #cc4444;
text-decoration: none;
}
     Novi atribut je display. Rekli smo u nekoj od prethodnih lekcija da u HTML-u postoje "inline" elementi (kakvi su span, a... elementi) i block elementi (div, h1...). Display atribut definiše da li se neki element ponaša kao "block" (display: block;) ili "inline" (display: inline;). Međutim, CSS3 nudi još jednu opciju i to je inline-block. Unutrašnjost elementa se ponaša kao "block" a sam element u odnosu na druge elemente se ponaša kao tekst (inline). Ovo nam omgućava da dodajemo padding i border elementu kao da je "block", a elementi se i dalje ređaju jedan pored drugog i imaju automatski definisanu širinu kao "inline" elementi. Drugi nepoznati atribut je text-decoration. Vrednost "none" govori da nemamo nikakvu dekoraciju teksta, linkovi kao podrazumevanuvrednost imaju "underline" zbog čega je tekst linkova podvučen.
     Još jedna vrlo bitna stvar kod linkova jeste njihovo ponašanje kada se preko njih pređe kursorom miša. Za to je zadužena pseudo-klasa ":hover". Da bi vam bilo jasnije o čemu se radi unesite sledeću instrukciju u CSS dokument:

a.nav:hover {
display: inline-block;
margin: 0; padding: 10px;
font-size: 20px;
font-weight: bold;
line-height: 20px;
color: #dddddd;
background-color: #222222;
text-decoration: none;
}
     Ova instrukcija je naizgled ista kao prethodna osim što se odnosi na a.nav:hover elemente, to znači da ova instrukcija definiše izgled navigacionih linkova kada na njih dodje kursor miša. Atributi su isti osim što sam promenio boju teksta i dodao boju pozadine.
     Sačuvajte dokument i otvorite ga u pretraživaču da vidite kako sada izgleda vaš rad. Footer element ostavljam vama da eksperimentišete.
     Toliko u ovoj lekciji, u narednoj lekciji vraćamo se malo HTML-u i dodavanju novih elemenata.