Subscribe

CSS – stilizovanje tekst

Među prvim koracima kada pravimo sajt jeste definisanje izgleda teksta tj. postavljanje fonta naslova, paragrafa i ostale elemente na stranici.

Prilikom izbora fontova vodimo se osnovnim principom čitljivosti, tj. da je tekst jasan i vidno ističe elemente koje želimo da naglasimo.

Pored čitljivosti bitna je i dostupnost fonta (familije fontova) posetiocima sajta. Pod dostupnošću podrazumevamo da posetilac sajta ima instaliran font koji koristimo na svom računaru.
Zbog toga ćemo specificirati familiju fontova npr:

U ovom primeru, web browser će prvo tražiti Arial font i ako postoji koristiće njega u suprotnom, nastaviće pretragu za ostalim navedenim fontovima i koristiti prvi koji pronađe.

Nakon što smo odredili font koji želimo da koristimo, sledeći korak je boja.

Postavljanje boje teksta

Postavljanje boje u CSS-u je jednostavno:

Web dizajneri često koriste hexadecimalnu notaciju za postavljanje boja (npr. #9F5A23).
U gore navedenom primeru hexadecimalni broj se sastoji iz tri broja tj. sadrži vrednosti crvene, zelene i plave (u našem primeru 9F 5A 23).

Pored hexadecimalne notacija, moguće je koristiti i RGB (red, green, blue) notaciju. Vrednosti u RBG notaciji su ili procenti ili vrednosti 0-255 za svaku boju posebno.

RGB notacijom možemo napraviti sledeću boju:  color: rgb(100%, 100%, 100%); ili color: rgb(255,255,255);

 Veličina fonta

Definisanjem različite veličine fonta naglašavamo bitne delove stranice.
Veličina fonta se definiše koristeći svojstvo font-size iza koje se definiše veličina i jedinica mere npr:  font-size: 1em;

CSS omogućava definisanje nekoliko različitih jedinica mera:

  • pixeli
  • ključne ruči (keywords)
  • em
  • rem
  • procenti

Pixeli

Definisanje veličine fonta koristeći pixele postižemo da veličina fonta ne zavisi od podešavanje browser-a.
Noviji browseri prevazilaze ranije ograničenja koja su postojala u korišćenju ove jedinice mere. Ograničenja se ogledaju pre svega kod korisnika sa ograničenim vidom koji su koristili Internet Explorer 6.0, jer nije bilo moguće povećati tekst ukoliko je on definisan koristeći ovu jedinicu mere. Kod novijih browsera za uvećanje stranice postiže se zoom alatima tj. ne povećanjem se samog font, već cela stranica.

Preostale tri jedinice mere funkcionišu tako što dodaju ili oduzimaju veličinu tekst i zavisna su od podešavanja browsera.

Ukoliko ne definišemo veličinu fonta, svaki browser ima svoju podrazumevanu, osnovnu veličinu teksta.

Keywords (ključne reči)

CSS omogućava 7 ključnih reči kojima se definišu veličine fonta i to: xx-small, x-small, small, medium, large, x-large, xx-large.
Osnovno podešavanje browsera jednako je opciji medium.
Sve ostale ključne reči, dodaju ili oduzimaju veličinu na postojeću.

Ako pretpostavimo da je 16px osnovna veličina teksta definisana u browser-u.
Postavljanjem ključnih reči dobijamo sledeće vrednosti:

xx-small = 9px
x-small = 10px
    small = 13px
     large = 18px
 x-large = 24px
xx-large = 32px

Procenti

Kao i gore navedene ključne reči, procenti definišu veličinu teksta u zavisnosti od podešavanja u browser-u.
Ako uzmemo u obzir da je osnovna veličina fonta 16px i da ona odgovara 100%, onda postavljanjem veličine teksta na 200% bi značilo da povećavamo veličinu teksta duplo.
Iako ovde izgleda jednostavno definisati veličinu fonta u procentima koja će se ponašati u zavisnosti od podešavanja browser-a u praksi su stvari malo komplikovanije pre svega zbog činjenice da je veličina fonta svojstvo koje se nasleđuje tako da se ne može menjati u zavisnosti od prethodno postavljene veličine na nekom od prethodnih elemenata na stranici.

Em

Sva pravila koja važe za procente važe i za em s’tom rаzlikom što se veličina računa od 1em tako da ako, kao u prethodnom primeru želimo da povećamo duplo veličinu fonta koristićemo sledeću definiciju:   font-size: 2em;

Rem

Korišćenje ove jedinice uveden je u CSS3 i predstavlja skraćenicu od “root em” i za razliku od em koji veličinu postavlja u zavisnosti od parenta, rem definisana veličina je relativna u odnosu na root element.
Ako krenemo od toga da je podrazumevana vrednost za veličinu fonta 16px, postavićemo podrazumevanu vrednost za body element na 10px koristeći procenat, tj. postavićemo veličinu fonta na 62.5%.

Ovo će nam olakšati postavljanje veličine fonta u rem (ili em) jedinici jer možemo koristiti analogiju sa px.

Ako imamo sledeći HTML:

i za njega definisan CSS

Veličine fontova će biti 14px, 10px, 12px, 10px i 9px respektivno.

Ovo je dobar način kontrole veličine fonta jer nemoramo da vodimo računa o veličini fonta parenta (što je slučaj sa em) , međutim … ipak nam predstoji podrška u browserima.

Da bismo podržali browsere koji nemaju podršku za rem možemo koristiti sledeći način definisanja veličine fonta:

Formatiranje reči i slova

Ispisivanje tekst kurzivom (italic) postiže se definisanjem stila:

font-style: italic;  dok se za definisanje debljine teksta koristi svojstvo font-weight:  font-weight: bold;

Kapitalizacija fonta (postavljanje svih slova na velika slova)

Ova transformacija se potiže korišćenjem sledeće definicije:  text-transform: uppercase; Takođe je moguće koristiti lowercase ili capitalize vrednosti.

Ukoliko hoćemo da onemogućimo promenu veličine slova možemo vrednost svojstva postaviti na none.

Dekoracija teksta

Dekoracija teksta postiže se definisanjem sledećeg svojstva:  text-decoration: underline;  ili  text-decoration. underline overline;  za postavljanje više efekata odjednom.

Podešavanje razmaka između slova i reči

Podešavanje razmaka postiže se korišćenjem svojstva letter-spacing kojim se definiše razmak između slova npr:  letter-spacing: 30px  ili ako želimo da smanjimo razmak   letter-spacing: -2px;

Kako između slova, tako možemo definisati razmak i između reči koristeći svojstvo word-spacing kao npr:  word-spacing: 2px;

Korisni linkovi

Leave a Reply