Dobar tipografski dizajn važan je dio uspješne web stranice. CSS vam daje veliku kontrolu nad izgledom teksta na web stranicama web stranica koje gradite. To uključuje sposobnost promjene boje bilo kojeg fontova koji koristite.
Boje slova mogu se mijenjati pomoću vanjskog stila , internih stilskih stranica ili se može promijeniti pomoću inline stylinga unutar HTML dokumenta. Najbolji postupci diktiraju da biste trebali koristiti vanjski stilski obrazac za CSS stilove. Unutarnji stilski list, koji su stilovi napisani izravno u "glavu" vašeg dokumenta, obično se upotrebljavaju samo za male stranice s jednim stranicama. Inline stilovi bi se trebali izbjegavati jer su slični starim "font" tagovima s kojima smo se bavili prije mnogo godina. Ti inline stilovi čine ga vrlo teško upravljati stilom fontova budući da ih trebate mijenjati na svakom primjeru inline stila.
U ovom ćete članku saznati kako promijeniti boju fonta upotrebom vanjskog lista stila i stila koji se upotrebljava u oznaci odlomka. Možete primijeniti isti stilski entitet da biste promijenili boju fonta na bilo kojoj oznaci koja okružuje tekst, uključujući oznaku
.Dodavanje stilova za promjenu boje fonta
Za ovaj primjer trebate imati HTML dokument za označavanje stranice i zasebnu CSS datoteku koja je pridružena tom dokumentu. HTML dokument vjerojatno bi u njemu stvorio niz elemenata. Onaj na koji se bavimo u svrhu ovog članka je element stavka.
Evo kako promijeniti boju fonta teksta unutar oznaka odlomka pomoću vanjskog alata za stil.
Vrijednosti boja mogu se izraziti kao ključne riječi u boji, RGB brojevi boja ili heksadecimalni brojevi boja.
- Dodajte atribut stila za oznaku odjeljka:
- p {}
- Postavite boju u stilu. Postavite debelo crijevo nakon te imovine:
- p {color:}
- Zatim dodajte svoju vrijednost boje nakon entiteta. Obavezno završite tu vrijednost s polu-debelom crijevima:
- p {boja: crna;}
Stavke na vašoj stranici sada će biti crne.
Ovaj primjer koristi ključnu riječ u boji - "crni". To je jedan od načina za dodavanje boje u CSS, ali je vrlo ograničavajući. Korištenje ključnih riječi za "crno" i "bijelo" jednostavno je jer su te dvije boje vrlo specifične, ali što se događa ako koristite ključne riječi poput "crvene", "plave" ili "zelene"? Upravo ono što ćete dobiti od crvene, plave ili zelene boje? Ne možete točno odrediti koju boju želite s ključnim riječima. Zato se često upotrebljavaju heksadecimalne vrijednosti umjesto ključnih riječi u boji.
p {boja: # 000000; }
Ovaj CSS stil također bi postavio boju vaših odlomaka na crnu, jer je šifrirani kod # 000000 prevodi u crno. Možete čak koristiti stenogram s tom heksadecimalnom vrijednosti i napisati ga kao samo # 000, a vi biste dobili istu stvar.
Kao što smo već spomenuli, hex vrijednosti rade dobro kada vam je potrebna boja koja nije jednostavno crna ili bijela. Evo primjera:
p {boja: # 2f5687; }
Ova heksadecimalna vrijednost postavit će stavke u plavu boju, ali za razliku od ključne riječi "plava", ovaj heksadecimalni kod daje vam mogućnost postavljanja vrlo specifične nijanse plave boje - vjerojatno one koju dizajner odabere prilikom stvaranja sučelja za ove web stranice. U ovom slučaju, boja bi bila srednja dimenzija, plava poput plave boje.
Konačno, možete koristiti i vrijednosti RGBA boja za boje fontova. RGCA je sada podržan u svim modernim preglednicima, tako da možete koristiti ove vrijednosti bez brige da neće biti podržani u web pregledniku, ali možete postaviti i laganu zamjenu.
p {boja: rgba (47,86,135,1); }
Ova vrijednost RGBA je ista kao i prethodno navedena plava boja. Prve 3 vrijednosti postavljaju crvenu, zelenu i plavu vrijednost, a konačni broj je alfa postavka. Postavljen je na "1", što znači "100%", tako da ta boja ne bi imala transparentnost. Ako to postavite na decimalni broj, kao što je .85, to će prevesti na 85% neprozirnosti i boja će biti malo transparentna.
Ako želite zaštititi svoje vrijednosti boja, to biste učinili:
p {
boja: # 2f5687;
boja: rgba (47,86,135,1);
}
Ova sintaksa najprije postavlja heksadecimalni kod. Zatim ga prebrisati s RGBA brojem. To znači da će svaki stariji preglednik koji ne podržava RGBA dobiti prvu vrijednost i zanemariti drugu. Moderni preglednici koristili bi drugu po CSS kaskadi.