Culori

Culorile HTML sunt specificate folosind nume de culori predefinite sau valori RGB, HEX, HSL, RGBA, HSLA.

Cele mai folosite moduri de a adăuga culori sunt: color: numele culorii color: cod hexazecimal

1. Numele culorii

2. Cod hexazecimal

Când folosim numele culorii și când folosim cod hexazecimal?

Codul hexazecimal este recomandat să fie folosim mereu. De ce? Datorită varietății păleții sale de culori.

În HTML există 16.777.217 de culori hex.

În HTML există 140 de culori care au un nume propriu zis.

Cum găsim o culoare hexazecimala?

Google. Nimeni nu poate reține 16 milioane de culori și nici măcar nu este recomandat să reținem culori hexadecimale. Totul se rezolvă cu un search pe Google cu textul: “color picker”.

Background-color

Stabilește culoarea de fundal a unui element HTML. Aceasta poate fi adăugată oricărui element, de la body, butoane și div-uri până la paragrafe și heading-uri.

style = “background-color: #c23or6”

Color

Color este proprietatea CSS-ului de a stabili culoarea unui text din HTML.

style = “color: #hexhex”

Border

Border, prin traducere liberă înseamnă bordură. Acestuia i se atribuie valori cu ajutorul căruia stabilim: grosimea în px, faptul că este solid și culoarea în cod hexadecimal/cu numele ei.

style=”border: 2px solid white”
style=”border: 2px solid #ffffff”

Colțurile unui border pot fi rotunjite cu ajutorul proprietății: style = “border-radius: 5px”

Exerciții:

1. Creați 5 paragrafe diferite fiecare având textul “Culori diferite în HTML”. Adăugați textului o culoare la alegere. Folosiți numele culorii.

Soluţie

Soluţie


2. Căutați 5 coduri hexazecimale de culori apoi adăugați-le textelor din paragrafele de la exercițiul 1.

Soluţie

Soluţie


3. Adăugați tag-ului body culoarea de fundal #bbfacc, apoi schimbați culoarea de fundal a paragrafelor de la exercițiul anterior în culoarea textului. (dacă textul are culoarea verde, transformați culoarea de fundal a paragrafului respectiv în verde). Transformați apoi fiecare text în culoarea alb.

Soluţie

Soluţie


4. Adăugați câte un border de culoare albă fiecărui paragraf de la exercițiul anterior.

Soluţie

Soluţie


5. Adăugați fiecărui border un radius de 30%, apoi un radius de 20px. Ce diferențe observați?

Soluţie

Soluţie


You could leave a comment if you were logged in.