Cum se schimbă culoarea fontului html. Culoarea fontului HTML

Cum se schimbă culoarea fontului în html

Dacă aveți cunoștințe despre tehnologiile web, ar trebui să știți că toate markupurile și conținutul unui document sunt conținute într-un fișier html și în fișier stiluri css aceasta stochează stilurile care definesc aspect diverse elemente. Deci, este CSS pe care trebuie să-l folosim pentru a schimba culoarea fontului și orice altceva.

Există etichete în html care vă permit să aplicați anumite efecte textului, dar trebuie să recunoașteți că a veni cu sute de etichete pentru fiecare nuanță nu ar fi pe deplin rezonabil. În CSS puteți controla acest lucru mult mai convenabil. De exemplu, așa puteți seta culoarea font html-elementul body, adică o etichetă care include tot conținutul paginii care este afișată pe ecran.

corp (culoare: roșu; )

Am atribuit culoarea roșie corpului paginii. Paragrafele, listele, titlurile și toate celelalte elemente îl vor primi. Acest lucru se va întâmpla până când stilurile pentru aceste elemente vor fi redefinite pentru altele.

Formate de înregistrare color

Poate ai ceva cunoștințe de web design? În acest caz, ar trebui să știți că există diferite moduri de culoare. De exemplu, rgb, rgba, hsl, hex etc. Desigur, cel mai simplu mod de a da un ton este să scrieți pur și simplu un cuvânt cheie. Am făcut acest lucru în exemplul de mai sus, valoarea roșu face ca literele roșu, albastru – albastru, maro – maro. Acestea sunt doar nume de flori în engleză.

Singurul lucru pe care trebuie să-l știți în acest caz este numele culorii dorite. Le puteți vizualiza pe internet în orice tabel. Următorul mod popular de a specifica o culoare este să o notați cod hexazecimal. Acesta este așa-numitul format hex. Exemple:

p( culoare: #000; ) /* Textul din paragrafe va fi negru. */ table( culoare: #fff; ) /* Conținutul din tabele va fi alb. */

După cum puteți vedea, trebuie să scrieți grila, urmată de codul de culoare. Cum să-l recunosc? De exemplu, puteți deschide Photoshop sau orice alt editor grafic, în care, atunci când selectați o culoare, este afișat codul hex al acesteia. De asemenea, puteți utiliza serviciul online.

RGB este altul format popularînregistrări. Pur și simplu reprezintă roșu, verde, albastru. Culoarea în acest format este setată astfel:

#footer( culoare: rgb(234, 22, 56); )

Elementul cu ID subsol va primi culoarea specificată. Cota de roșu va fi 234, verde – 22, albastru – 56. Aceste valori pot fi scrise de la 0 la 255. În consecință, nuanța noastră va fi mai aproape de roșu. În Paint, puteți adăuga culori la paletă modificând saturația celor trei culori primare.

Avantajul acestei metode este că poți alege dintre milioane de culori doar schimbând trei numere. Când scrieți folosind cuvinte cheie, veți avea doar câteva sute de culori în arsenalul dvs.

Rgba - text translucid!

Da, este mod nouînregistrări, care în editori grafici există de mult timp, dar a apărut relativ recent în web design. Este scris astfel:

a( rgba(255, 12, 22, 0,5); )

Ultimul număr din intrare stabilește transparența. Poate fi scris de la 0 la 1, unde 1 este text complet opac, adică comportamentul implicit. În acest caz, toate legăturile vor deveni roșii, dar datorită transparenței, luminozitatea culorii va fi mult mai mică, iar dacă există un alt fundal sau element sub link, acesta va fi vizibil.

Mod greșit de a seta culoarea

Există un atribut de culoare depreciat în html și cu ajutorul acestuia a fost posibil să scrieți culoarea textului folosind cuvânt cheie. Acum s-ar putea să nu funcționeze browsere moderne, și într-adevăr această metodă încalcă standardele web general acceptate. Și este, de asemenea, incomod.

Cum să determinați culoarea pentru un fragment arbitrar

Bine, vorbim despre culoarea fontului pentru paragrafe, linkuri și tabele, dar acestea sunt elemente solide, dar ce se întâmplă dacă trebuie să definiți o culoare pentru o propoziție, un cuvânt, o literă, până la urmă?

Pur și simplu includem fragmentul dorit în etichete span. Scriem un atribut de clasă în interiorul etichetei, căruia îi setăm o valoare arbitrară, dar de înțeles. De exemplu, așa:

Gata, acum nu mai ramane decat sa accesezi selectorul din css.

Unele site-uri atrag utilizatorii nu prin animație, nu prin imagini sau fotografii, nu prin videoclipuri, ci doar prin conținutul lor text. Textul este o parte integrantă a conținutului multor site-uri populare. În lecțiile anterioare, ne-am uitat la proprietățile CSS care vă permit să schimbați culoarea textului, să îi adăugați o umbră, să o aliniați și să adăugați o subliniere, supraliniere sau chiar baraj. Această lecție va analiza ce familii de fonturi există și cum să schimbați fontul implicit al textului.

Diferența dintre familiile de fonturi Sans-serif și Serif

site web - font sans-serif

site - font serif

Familii de fonturi în CSS

ÎN fonturi CSSîmpărțită în familii, fiecare familie este formată dintr-un set de fonturi care au caracteristici generale. Există doar cinci familii de fonturi:

• sans-serif - fonturi sans-serif, sunt considerate a fi mai ușor de citit pe ecranul computerului decât fonturile din familia serif.
• serif este o familie de fonturi serif. Mulți oameni le asociază cu articole din ziare. Serifurile sunt linii decorative și liniuțe de-a lungul marginilor literelor.
• monospace este o familie de fonturi ale căror caractere au aceeași lățime fixă. Astfel de fonturi sunt folosite în primul rând pentru a afișa exemple de cod de program.
• cursive - fonturi care imită textul scris de mână.
• fantezie - fonturi artistice și decorative. Ele nu sunt foarte răspândite, nu sunt disponibile pe toate computerele și sunt rareori folosite în web design.

Proprietatea font-family vă permite să schimbați fontul implicit. De obicei, conține o listă de fonturi interschimbabile, separate prin virgulă, aparținând aceleiași familii. Dacă numele fontului este format din mai mult de un cuvânt, acesta trebuie specificat între ghilimele. Numele de familie este de obicei indicat la sfârșitul listei:

Corp (familie de font: Verdana, Helvetica, Arial, sans-serif; )

Să ne uităm la modul în care browserul procesează lista de fonturi specificate în proprietatea noastră font-family:

1. Mai întâi verifică dacă fontul Verdana este instalat pe computer și, dacă da, îl folosește ca font pentru textul din interiorul elementului (în cazul nostru, în interiorul elementului )
2. Dacă Verdana nu este instalat, caută fontul Helvetica. Dacă căutarea are succes, folosește-o în interior .
3. Dacă Helvetica nu este instalată, caută fontul Arial. Dacă este disponibil pe computer, îl aplică intern .
4. În cele din urmă, dacă niciunul dintre fonturile specificate nu este găsit, se folosește primul font din familia sans-serif găsit de browser pe computer. În acest fel, browserul poate determina independent fontul potrivit din familie.

proprietate CSS familie de fonturi

Paragraf folosind fontul Times New Roman.

Paragraf folosind fontul Arial.

Notă: Când selectați un singur font specific, este important să înțelegeți că browserul îl va afișa numai dacă fontul este instalat pe computerul utilizatorului. Dacă fontul nu este găsit, textul va fi afișat în fontul „Times New Roman”, care este implicit în toate browserele.

În acest tutorial ne vom uita la ultimul atribut de etichetă , care stabilește culoarea textului. În mod implicit, textul este negru, care este afișat pe un fundal alb. Pentru a schimba culoarea textului în html, trebuie să aplicați atributul culoarea etichetei :