Cum se schimbă culorile fontului site-ului web cu CSS

CSS vă oferă control asupra aspectului textului pe paginile web pe care le creați și le gestionați. În acest ghid, vă vom arăta cum să schimbați culorile fontului în CSS utilizând cuvinte cheie color, coduri de culoare hexazecimale sau numere de culoare RGB.

Cum se utilizează stilurile CSS pentru a schimba culoarea fontului

Valorile culorilor pot fi exprimate ca cuvinte cheie de culoare, numere de culoare hexazecimale sau numere de culoare RGB. Pentru această lecție, va trebui să aveți un document HTML pentru a vedea modificările CSS și a

fișier CSS separat atașat la acel document. Vom analiza elementul de paragraf, în mod specific.

Utilizați cuvinte cheie color pentru a schimba culorile fontului

Pentru a schimba culoarea textului pentru fiecare paragraf din fișierul HTML, accesați foaia de stil extern și tastați p {}. Așezați culoare proprietate în stilul urmat de două puncte, cum ar fi p {culoare:}. Apoi, adăugați valoarea culorii după proprietate, terminând-o cu punct și virgulă. În acest exemplu, textul paragrafului este schimbat în culoarea neagră:

p {
culoarea neagra;
}

Utilizați valori hexazecimale pentru a schimba culorile fontului

Folosirea cuvintelor cheie color pentru a schimba textul în roșu, verde, albastru sau o altă culoare de bază nu vă va oferi precizia pe care o puteți căuta atunci când creați diferite nuanțe ale acestor culori. Pentru asta sunt valorile hexazecimale.

Acest stil CSS poate fi folosit pentru a colora paragrafele în negru, deoarece codul hex # 000000 se traduce în negru. Puteți folosi chiar stenograma cu acea valoare hexagonală și o puteți scrie ca # 000 cu aceleași rezultate.

p {
culoare: # 000000;
}

Valorile hexagonale funcționează bine atunci când aveți nevoie de o culoare care nu este pur și simplu alb sau negru. De exemplu, acest cod hex vă oferă posibilitatea de a seta o nuanță foarte specifică de albastru - un albastru de gamă medie, ca de ardezie:

p {
culoare: # 2f5687;
}

Hex funcționează setând valorile RGB (roșu, verde, albastru) ale unei culori separat cu valorile de bază-șaisprezece. De aceea conțin literele A prin F pe lângă cifre 0 prin 9.

Fiecare culoare, roșu, verde și albastru, primește propria sa valoare din două cifre. 00 este cea mai mică valoare posibilă, în timp ce FF este cel mai înalt. Culorile sunt listate în ordine RGB într-un hex, deci primele două cifre reprezintă valoarea roșie și așa mai departe.

Utilizați valorile de culoare RGBA pentru a schimba culorile fontului

În cele din urmă, puteți utiliza valorile culorilor RGBA pentru a edita 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, de asemenea, să setați o rezervă simplă.

Această valoare RGBA este aceeași cu culoarea albastru ardezie specificată mai sus:

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

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%, deci această culoare nu are transparență. Dacă setați acea valoare la un număr zecimal, cum ar fi .85, aceasta se traduce la 85% opacitate, iar culoarea ar fi ușor transparentă.

Dacă doriți să vă protejați cu glume valorile culorilor, copiați acest cod CSS:

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

Această sintaxă stabilește mai întâi codul hexagonal ș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 o va ignora pe a doua.

Este important să rețineți că proprietatea culorii funcționează pe orice element de text HTML din CSS. De exemplu, puteți schimba toate culorile linkului. Acest exemplu va face linkurile dvs. verzi:

A {
culoare: # 16c616;
}

Acest lucru funcționează și cu mai multe elemente simultan. Puteți seta simultan fiecare nivel de titlu. De exemplu, aceasta va seta toate elementele dvs. de titlu la o culoare albastru miezul nopții:

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

Venirea cu valorile hex sau RGBA pentru culorile dvs. nu este întotdeauna ușoară. Majoritatea proiectanților web vor utiliza un program de editare a imaginilor, cum ar fi Photoshop sau GIMP, pentru a genera codurile exacte. De asemenea, puteți găsi instrumente convenabile de selectare a culorilor online, cum ar fi acesta de la w3schools.

Alte moduri de a stiliza o pagină HTML

Culorile fontului pot fi schimbate cu o foaie de stil externă, o foaie de stil internă sau un stil în linie în documentul HTML. Cu toate acestea, cele mai bune practici dictează faptul că ar trebui să utilizați o foaie de stil externă pentru stilurile dvs. CSS.

O foaie de stil internă, care sunt stiluri scrise direct în „capul” documentului dvs., sunt utilizate în general numai pentru site-urile mici, cu o singură pagină. Stilurile în linie ar trebui evitate, deoarece acestea sunt asemănătoare vechilor etichete „font” cu care ne-am ocupat acum mulți ani. Aceste stiluri inline fac foarte dificilă gestionarea stilului fontului, deoarece trebuie să le schimbați la fiecare instanță a stilului inline.