Dobar tipografski dizajn je važan dio uspješne web stranice. CSS vam daje sjajnu kontrolu nad izgledom teksta na web stranicama web stranica koje gradite. Ovo uključuje mogućnost promjene boje bilo kojeg fonta koji koristite.
Boje fonta mogu se promijeniti pomoću spoljašnjeg lista stila , internog stila ili se može promijeniti pomoću inline stila unutar HTML dokumenta. Najbolje prakse diktiraju da biste trebali koristiti spoljašnji stilski stil za svoje CSS stilove. Unutrašnji stilski stil, koji su stilski napisani direktno u "glavi" vašeg dokumenta, uglavnom se koristi samo za male stranice sa jedne strane. Treba izbegavati inline stilove jer su slični starim oznakama "fonta" sa kojima smo se bavili pre mnogo godina. Ovi inline stilovi veoma teško upravljaju stilom fonta, jer bi ih trebali promijeniti u svakoj instanci inline stila.
U ovom članku ćete naučiti kako promijeniti boju fonta pomoću spoljašnjeg lista stilova i stila koji se koristi u oznaci pasusa. Možete primijeniti istu osobinu stila kako biste promijenili boju fonta na bilo kojoj oznaci koja okružuje tekst, uključujući i oznaku
.Dodavanjem stilova za promjenu boje slova
Za ovaj primjer, potrebno je da imate HTML dokument za označavanje vaše stranice i zasebnu CSS datoteku koja je priložena za taj dokument. HTML dokument bi verovatno napravio niz elemenata u njemu. Ono za koji smo zabrinuti u svrhu ovog članka je element paragrafa.
Evo kako promijeniti boju fonta teksta unutar oznaka pasusa koristeći spoljašnji stilski stil.
Vrednosti boje mogu se izraziti kao ključne riječi u boji, brojevi RGB boja ili heksadecimalni brojevi boja.
- Dodajte atribu stila za oznaku pasusa:
- p {}
- Postavite svojstvo boje u stil. Stavite debelo crevo posle tog svojstva:
- p {boja:}
- Zatim dodajte svoju vrijednost boje nakon svojstva. Pobrinite se da ovu vrijednost prekinete sa polomičetom:
- p {boja: crna;}
Stavovi na vašoj stranici sada će biti crni.
Ovaj primjer koristi ključnu riječ boja - "crna". To je jedan način dodavanja boje u CSS-u, ali je vrlo ograničavajući. Korišćenje ključnih riječi za "crno" i "belo" je jednostavno jer su ove dve boje vrlo specifične, ali šta se događa ako koristite ključne riječi poput "crvene", "plave" ili "zelene"? Tačno kakva će vam nijansa crvene, plave ili zelene? Ne možete precizirati tačno koju boju boja želite s ključnim riječima. Zato se heksadecimalne vrijednosti često koriste umjesto ključnih riječi u boji.
p {boja: # 000000; }
Ovaj stil CSS bi takođe postavio boju vaših pasusa u crnu, jer je heksadecioni broj # 000000 preveden u crno. Možete čak i koristiti stenografiju s tom vrijednošću hexa i napisati je kao # 000 i dobićete istu stvar.
Kao što smo već pomenuli, hex vrijednosti dobro funkcioniraju kada vam je potrebna boja koja nije jednostavno crna ili bijela. Evo primera:
p {boja: # 2f5687; }
Ova heksadecimalna vrednost bi postavila paragrafima plavoj boji, ali za razliku od ključne reči "plava", ovaj heks kôd vam daje mogućnost da postavite vrlo specifičnu nijansu plave boje - verovatno ona koju dizajner izabere kada su kreirali interfejs za ovu web stranicu. U ovom slučaju boje bi bile plave boje srednjeg opsega.
Konačno, možete koristiti RGBA vrijednosti boje za boje fonta. RGCA je sada podržana u svim modernim pretraživačima, tako da možete koristiti ove vrijednosti uz malo brige da neće biti podržani u web pretraživaču, ali također možete postaviti jednostavan povratak.
p {boja: rgba (47,86,135,1); }
Ova vrijednost RGBA je ista kao i plava boja složene u prethodnom tekstu. Prve tri vrednosti postavljaju vrednosti crvene, zelene i plave, a konačni broj je alfa podešavanje. Postavljena je na "1", što znači "100%", tako da ova boja ne bi bila transparentna. Ako to podesite na decimalni broj, kao što je .85, to bi prevodilo na 85% prozirnosti i boja bi bila blago transparentna.
Ako želite da otklonite svoje vrednosti u boji, to biste učinili:
p {
boja: # 2f5687;
boja: rgba (47,86,135,1);
}
Ova sintaksa prvo postavlja hex kod. Zatim prepisuje tu vrednost sa RGBA brojem. To znači da bilo koji stariji pretraživač koji ne podržava RGBA dobija prvu vrijednost i ignoriše drugi. Savremeni preglednici bi koristili drugu po CSS kaskadi.