Kako promijeniti boje fonta web stranice pomoću CSS-a

CSS vam daje kontrolu nad izgledom teksta na web stranicama koje gradite i kojima upravljate. U ovom vodiču pokazat ćemo vam kako promijeniti boju fonta u CSS-u pomoću ključnih riječi u boji, heksadecimalnih kodova boja ili RGB brojeva boja.

Kako koristiti CSS stilove za promjenu boje fonta

Vrijednosti boja mogu se izraziti kao ključne riječi u boji, heksadecimalni brojevi boja ili RGB brojevi boja. Za ovu ćete lekciju trebati imati HTML dokument da biste vidjeli promjene CSS-a i a zasebna CSS datoteka koja je priložena uz taj dokument. Osobito ćemo razmotriti element odlomka.

Koristite ključne riječi u boji za promjenu boja fonta

Da biste promijenili boju teksta za svaki odlomak u HTML datoteci, idite na vanjsku tablicu stilova i upišite p {}. Postaviti boja svojstvo u stilu iza kojeg slijedi dvotačka, poput p {boja:}. Zatim dodajte vrijednost boje nakon svojstva, završavajući je zarezom. U ovom primjeru tekst odlomka mijenja se u crnu boju:

p {
Crna boja;
}

Koristite heksadecimalne vrijednosti za promjenu boja fonta

Korištenje ključnih riječi u boji za promjenu teksta u crvenu, zelenu, plavu ili neku drugu osnovnu boju neće vam pružiti preciznost koju možda tražite prilikom stvaranja različitih nijansi tih boja. Tome služe heksadecimalne vrijednosti.

Ovaj CSS stil može se koristiti za bojanje odlomaka u crno jer se hex kod # 000000 prevodi u crnu. Možete čak koristiti stenografiju s tom heksadecimalnom vrijednošću i zapisati je kao # 000 s istim rezultatima.

p {
boja: # 000000;
}

Hex vrijednosti vrijede dobro kad vam treba boja koja nije jednostavno crna ili bijela. Na primjer, ovaj heksadecimalni kod daje vam mogućnost postavljanja vrlo specifične nijanse plave boje - plave boje srednje veličine, poput škriljevca:

p {
boja: # 2f5687;
}

Hex radi postavljanjem RGB (crvene, zelene, plave) vrijednosti boje odvojeno s osnovnim šesnaest vrijednosti. Zato sadrže slova A kroz F pored znamenki 0 kroz 9.

Svaka boja, crvena, zelena i plava, dobiva svoju dvoznamenkastu vrijednost. 00 je najniža moguća vrijednost, dok FF je najviša. Boje su navedene u RGB redoslijedu u hex-u, tako da prve dvije znamenke predstavljaju crvenu vrijednost i tako dalje.

Koristite vrijednosti RGBA boje za promjenu boja fonta

Konačno, možete koristiti vrijednosti RGBA boja za uređivanje boja fonta. RGCA je podržan u svim modernim preglednicima, tako da ove vrijednosti možete koristiti sa sigurnošću da će to raditi za većinu gledatelja, ali možete postaviti i zamjenski način.

Ova RGBA vrijednost je ista kao gore navedena plava boja škriljevca:

p {
boja: rgba (47,86,135,1);
}

Prve tri vrijednosti postavljaju vrijednosti crvene, zelene i plave boje, a konačni broj je alfa postavka za prozirnost. Alfa postavka postavljena je na 1 da znači 100 posto, tako da ova boja nema prozirnost. Ako tu vrijednost postavite na decimalni broj, poput .85, ona prelazi na 85 posto neprozirnosti i boja bi bila malo prozirna.

Ako želite neprobojno zaštititi vrijednosti boja, kopirajte ovaj CSS kôd:

p {
boja: # 2f5687;
boja: rgba (47,86,135,1);
}

Ova sintaksa prvo postavlja hex kod, a zatim prepisuje tu vrijednost s RGBA brojem. To znači da će svaki stariji preglednik koji ne podržava RGBA dobiti prvu vrijednost, a zanemariti drugu.

Važno je imati na umu da svojstvo boje djeluje na bilo koji element HTML teksta u CSS-u. Možete, na primjer, promijeniti sve boje veza. Ovaj će primjer vaše veze učiniti svijetlo zelenim:

a {
boja: # 16c616;
}

Ovo također radi s više elemenata odjednom. Možete istovremeno postaviti svaku razinu naslova. Na primjer, ovo će postaviti sve elemente naslova na ponoćno plavu boju:

h1, h2, h3, h4, h5, h6 {
boja: # 020833;
}

Dolazak do hex ili RGBA vrijednosti za vaše boje nije uvijek lako. Većina web dizajnera će koristiti program za uređivanje slika, poput Photoshopa ili GIMP-a, za generiranje točnih kodova. Na internetu možete pronaći i prikladne alate za odabir boja, poput ovaj iz w3schools.

Drugi načini oblikovanja HTML stranice

Boje fonta mogu se mijenjati pomoću vanjskog lista stilova, unutarnjeg lista stilova ili umetnutog stila unutar HTML dokumenta. Međutim, najbolje prakse nalažu da za svoje CSS stilove upotrebljavate vanjsku tablicu stilova.

Interni tabele stilova, to su stilovi napisani izravno u "glavi" vašeg dokumenta, obično se koriste samo za male web stranice s jednom stranicom. Umetnute stilove treba izbjegavati jer su slični starim oznakama "font" s kojima smo radili prije mnogo godina. Ti umetnuti stilovi vrlo otežavaju upravljanje stilom fonta, jer ih morate mijenjati u svakoj instanci stila.