Lecția 11: Culori și Fundaluri în CSS

by

Overview:

În această lecție, vom explora modul în care putem utiliza culorile și fundalurile în CSS pentru a adăuga stil și personalitate paginilor web.

Key Concepts:

  1. Culori în CSS:
    • Numele Culorilor: Utilizarea numelui culorilor predefinite (de exemplu, red, blue).
    • Valori Hexadecimale: Reprezentarea culorilor utilizând coduri hexadecimale (#rrggbb).
    • Valori RGB și RGBA: Specificarea culorilor utilizând componente Red, Green, Blue, și opțional, Alpha (transparență).
  2. Proprietatea color:
    • Setarea culorii textului într-un element.
  3. Proprietatea background-color:
    • Stabilirea culorii de fundal a unui element.
  4. Imagini de Fundal:
    • background-image: Adăugarea unei imagini de fundal unui element.
    • background-repeat, background-position: Controlul repetării și poziționării imaginii de fundal.

Detailed Examples:

1. Utilizarea Numelelor de Culori:
/* Stilizare pentru text cu culoare roșie */
.roșu {
  color: red;
}

/* Stilizare pentru fundal albastru */
.albastru {
  background-color: blue;
}
2. Valori Hexadecimale pentru Culori:
/* Stilizare pentru text cu culoare verde folosind cod hexazecimal */
.verde {
  color: #00ff00;
}

/* Stilizare pentru fundal cu o nuanță de galben */
.galben {
  background-color: #ffffcc;
}
3. Utilizarea Culorilor RGBA:
/* Stilizare pentru text cu culoare neagră și opacitate redusă */
.opac {
  color: rgba(0, 0, 0, 0.5);
}

/* Stilizare pentru fundal cu culoare albastră și opacitate redusă */
.transparent {
  background-color: rgba(0, 0, 255, 0.3);
}

Exercițiul Practic: CSS – Culori și Fundaluri

Task:

  1. Îmbunătățiți pagina HTML existentă și adăugați culori și fundaluri utilizând proprietățile CSS.
  2. Experimentați cu diferite culori, inclusiv nume, coduri hexadecimale și RGBA.

Pagina HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Lecția 11 - CSS Culori și Fundaluri</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <h1>Exercițiul Practic: CSS - Culori și Fundaluri</h1>

  <p class="rosu">Acesta este un text cu culoare roșie.</p>

  <div class="albastru">
    <p>Acesta este un div cu fundal albastru.</p>
  </div>

  <p class="verde">Acesta este un alt text cu culoare verde.</p>

  <div class="galben">
    <p>Acesta este un div cu fundal galben.</p>
  </div>

  <p class="opac">Acesta este un text cu opacitate redusă.</p>

  <div class="transparent">
    <p>Acesta este un div cu fundal albastru și opacitate redusă.</p>
  </div>

</body>
</html>

Fișierul CSS (style.css):

/* Stilizare pentru text cu culoare roșie */
.rosu {
  color: red;
}

/* Stilizare pentru fundal albastru */
.albastru {
  background-color: blue;
}

/* Stilizare pentru text cu culoare verde folosind cod hexazecimal */
.verde {
  color: #00ff00;
}

/* Stilizare pentru fundal cu o nuanță de galben */
.galben {
  background-color: #ffffcc;
}

/* Stilizare pentru text cu culoare neagră și opacitate redusă */
.opac {
  color: rgba(0, 0, 0, 0.5);
}

/* Stilizare pentru fundal cu culoare albastră și opacitate redusă */
.transparent {
  background-color: rgba(0, 0, 255, 0.3);
}