Designul tipografic bun este o parte importantă a unui site web de succes. CSS vă oferă un mare control asupra apariției textului pe paginile web a paginilor pe care le construiți. Aceasta include posibilitatea de a schimba culoarea oricăror fonturi pe care le utilizați.
Culorile fonturilor pot fi modificate utilizând o foaie de stil externă , o foaie de stil internă sau pot fi modificate utilizând stilul inline din cadrul documentului HTML. 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 utilizate în general 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 ar trebui să le schimbați la fiecare instanță a stilului inline.
În acest articol, veți învăța cum să modificați culoarea fontului utilizând o foaie de stil externă și un stil care este utilizat î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 eticheta
.Adăugarea stilurilor pentru a schimba culoarea fonturilor
Pentru acest exemplu, trebuie să aveți un document HTML pentru marcarea paginii dvs. și un fișier CSS separat atașat documentului respectiv. Documentul HTML ar face probabil un număr de elemente în el. Singurul dintre noi în cauză pentru acest articol este elementul de paragraf.
Iată cum puteți schimba culoarea fontului textului în etichetele paragrafului folosind foaia dvs. de stil externă.
Valorile culorilor pot fi exprimate ca cuvinte cheie pentru culori, numere de culori RGB sau numere de culori hexazecimale.
- Adăugați atributul de stil pentru eticheta paragrafului:
- p {}
- Plasați proprietatea de culoare în stil. Plasați un colon după acea proprietate:
- p {culoare:}
- Apoi, adăugați valoarea de culoare după proprietate. Asigurați-vă că ați terminat acea valoare cu un semi-colon:
- p {culoare: negru;}
Paragrafele din pagina dvs. vor fi acum negre.
Acest exemplu folosește un cuvânt cheie color - "negru". Aceasta este o modalitate de a adăuga culoare în CSS, dar este foarte limitator. Utilizarea cuvintelor cheie pentru "negru" și "alb" este simplă, deoarece aceste două culori sunt foarte specifice, dar ce se întâmplă dacă folosiți cuvinte cheie precum "roșu", "albastru" sau "verde"? Exact ce umbră de roșu, albastru sau verde veți obține? Nu puteți specifica exact ce nuanță de culori doriți cu cuvintele cheie. Acesta este motivul pentru care valorile hexazecimale sunt adesea folosite în locul cuvintelor cheie de culoare.
p {culoare: # 000000; }
Acest stil CSS va stabili, de asemenea, culoarea paragrafelor dvs. în negru, deoarece codul hex din # 000000 se transformă în negru. Ați putea folosi chiar și stenograma cu valoarea hex și scrieți-o ca fiind doar # 000 și ați obține același lucru.
Așa cum am menționat deja, valorile hexajului funcționează bine atunci când aveți nevoie de o culoare care nu este pur și simplu negru sau alb. Iată un exemplu:
p {culoare: # 2f5687; }
Această valoare hexagonală ar stabili paragrafele într-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 - probabil cea pe care designerul o alege atunci când creează interfața pentru acest site. În acest caz, culoarea ar fi o gamă medie, albastră asemănătoare ardei.
În cele din urmă, puteți utiliza și valorile culorilor RGBA pentru culorile fontului. RGCA este acum acceptată în toate browserele moderne, astfel încât să puteți utiliza aceste valori cu îngrijorare puțin că nu va fi acceptată într-un browser web, dar puteți seta și o rezervă ușoară.
p {culoare: rgba (47,86,135,1); }
Această valoare RGBA este aceeași cu culoarea albastră arsă specificată mai devreme. Primele 3 valori stabilesc valorile Roșu, Verde și Albastru, iar numărul final este setarea alfa. Este setat la "1", ceea ce înseamnă "100%", astfel încât această culoare nu ar avea transparență. Dacă setați acest număr la un număr zecimal, cum ar fi .85, se va traduce la 85% opacitate și culoarea va fi puțin transparentă.
Dacă doriți să vă străluciți valorile de culoare, ați face acest lucru:
p {
culoare: # 2f5687;
culoare: rgba (47,86,135,1);
}
Această sintaxă stabilește mai întâi codul hexazecimal. Apoi suprascrie această valoare cu numărul RGBA. Aceasta înseamnă că orice browser mai vechi care nu acceptă RGBA ar obține prima valoare și va ignora a doua valoare. Browserele moderne ar folosi cea de-a doua cascadă CSS.