Designul tipografic bun este o parte importantă a unui site web de succes. CSS vă oferă un control deosebit asupra apariției textului pe paginile web pe care le construiți. Aceasta include posibilitatea de a schimba culoarea oricăror fonturi pe care le utilizați.
Mai jos, vom examina modificarea culorii fontului utilizând o foaie de stil externă și un stil care este folosit într-o etichetă de paragraf. Puteți aplica aceeași proprietate de stil pentru a schimba culoarea fontului pe orice etichetă care înconjoară textul, inclusiv textul etichetă.
Adăugarea stilurilor pentru a schimba culoarea fonturilor
Pentru acest exemplu, trebuie să aveți un document HTML pentru a vedea modificările CSS și un fișier CSS separat care este atașat documentului respectiv. Vom analiza mai întâi elementul paragraf.
Pentru a modifica culoarea textului pentru fiecare paragraf din fișierul HTML, accesați foaia de stil externă și tastați p {}. Plasați culoare proprietate în stil urmat de un colon, cum ar fi p {culoare:}. Apoi, adăugați valoarea de culoare după proprietate, terminându-o cu punct și virgulă: p {culoare: negru;}.
Valorile culorilor pot fi exprimate ca cuvinte cheie pentru culori, numere de culori RGB sau numere de culori hexazecimale. În exemplul nostru, textul paragrafului este schimbat în culoarea neagră.
Cu toate acestea, dacă doriți să modificați culoarea textului în verde, albastru, roșu etc., folosind cuvintele cheie de culoare nu vă vor oferi flexibilitatea dorită pentru a crea nuanțe diferite. Aici intră valori hexazecimale pentru a juca.
p {culoare: # 000000; }
Acest stil CSS poate fi folosit pentru a colora paragrafele negre, deoarece codul hexazecimal # 000000 se traduce în negru. Ați putea folosi chiar și stenograma cu valoarea hex și scrieți-o ca # 000 cu aceleași rezultate. p {culoare: # 2f5687; }
După cum am menționat mai sus, valorile hexajului funcționează bine atunci când aveți nevoie de o culoare care nu este pur și simplu negru sau alb. Valoarea hexaj CSS de mai sus ar stabili paragrafele la o culoare albastră, dar spre deosebire de cuvântul cheie "albastru", acest cod hex vă oferă posibilitatea de a seta o nuanță foarte specifică de albastru albastru, . p {culoare: rgba (47,86,135,1); }
În cele din urmă, puteți utiliza și valorile culorilor RGBA pentru culorile fontului. RGCA este acceptat în toate browserele moderne, astfel încât să puteți utiliza aceste valori cu încredere că va funcționa pentru majoritatea spectatorilor, dar puteți seta și o ușoară cădere. Această valoare RGBA este aceeași cu culoarea albastră arsă specificată mai devreme. Primele trei valori stabilesc valorile Roșu, Verde și Albastru, iar numărul final este setarea alfa pentru transparență. Setarea alfa este setată la 1 pentru a însemna 100%, astfel că această culoare nu are transparență. Dacă setați acea valoare la un număr zecimal, cum ar fi .85, se traduce la 85% opacitate și culoarea va fi puțin transparentă. p { culoare: # 2f5687; culoare: rgba (47,86,135,1);}
Dacă doriți să vă străluciți valorile de culoare, copiați codul CSS de mai sus. Această sintaxă stabilește mai întâi codul hexazecimal și apoi suprascrie acea valoare cu numărul RGBA. Aceasta înseamnă că orice browser mai vechi care nu acceptă RGBA va primi prima valoare și va ignora a doua valoare. Culorile fonturilor pot fi schimbate cu o foaie de stil externă, cu o foaie de stil internă sau cu un design inline în cadrul documentului HTML. Cu toate acestea, cele mai bune practici dictează că ar trebui să utilizați o foaie de stil externă pentru stilurile dvs. CSS. O foaie internă de stil, care sunt stiluri scrise direct în "capul" documentului dvs., sunt în general utilizate numai pentru site-uri mici, de o pagină. Stilurile inline trebuie evitate deoarece sunt asemănătoare cu vechile etichete "font" pe care le-am tratat cu mulți ani în urmă. Aceste stiluri inline fac foarte greu să gestionați stilul de font, deoarece trebuie să le schimbați în fiecare instanță a stilului inline. Alte moduri de a modela o pagină HTML
