Lecția 9: CSS – Clase și ID-uri

by

Overview:

În această lecție, vom explora conceptele de clase și ID-uri în CSS. Clasele și ID-urile sunt instrumente puternice pentru a selecta și stiliza elemente specifice din pagină, permițându-ne să aplicăm stiluri diferite în funcție de necesități.

Key Concepts:

  1. Clase CSS:
    • Clasele sunt folosite pentru a grupa mai multe elemente și a le aplica același set de stiluri.
    • Se definesc cu ajutorul selectorului .nume-clasa în CSS și se aplică elementelor HTML prin adăugarea atributului class="nume-clasa".
  2. ID-uri CSS:
    • ID-urile sunt folosite pentru a identifica unic un singur element într-un document HTML.
    • Se definesc cu ajutorul selectorului #nume-id în CSS și se aplică elementului HTML prin adăugarea atributului id="nume-id".
  3. Prioritatea Stilurilor:
    • Când același element este selectat prin mai mulți selectori (de exemplu, un selector de clasă și un selector de etichetă), CSS utilizează o anumită ierarhie pentru a decide ce stil să aplice.
    • ID-urile au prioritate mai mare decât clasele, iar clasele au prioritate mai mare decât selectorii de etichetă.

Detailed Examples:

1. Utilizarea Claselor CSS:
/* Stilizare pentru clasa .highlight */
.highlight {
  background-color: #ffffcc;
  border: 1px solid #ffcc00;
  padding: 10px;
}
2. Utilizarea ID-urilor CSS:
/* Stilizare pentru ID-ul #header */
#header {
  background-color: #333;
  color: #fff;
  padding: 15px;
}

Exercițiul Practic: CSS – Clase și ID-uri

Task:

  1. Creați o pagină HTML simplă care să conțină cel puțin trei elemente: două cu clase diferite și unul cu un ID unic.
  2. Utilizați CSS pentru a aplica stiluri diferite acestor elemente, utilizând clase și ID-uri.

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 9 - CSS Clase și ID-uri</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <h1>Exercițiul Practic: CSS - Clase și ID-uri</h1>

  <div class="box highlight">
    <p class="special">Acesta este un div cu clasa .highlight și un paragraf cu clasa .special.</p>
  </div>

  <p class="normal">Acesta este un alt paragraf cu clasa .normal.</p>

  <div id="uniqueBox">
    <p>Acesta este un div cu ID-ul #uniqueBox.</p>
  </div>

</body>
</html>

Fișierul CSS (style.css):Fișierul CSS (style.css):

/* Stilizare pentru clasa .highlight */
.highlight {
  background-color: #ffffcc;
  border: 1px solid #ffcc00;
  padding: 10px;
}

/* Stilizare pentru clasa .special */
.special {
  font-weight: bold;
  color: #ff0000;
}

/* Stilizare pentru clasa .normal */
.normal {
  color: #333;
}

/* Stilizare pentru ID-ul #uniqueBox */
#uniqueBox {
  background-color: #99ccff;
  border: 2px solid #0066cc;
  padding: 15px;
}