Lecția 7: Blocuri vs. Elemente Inline în HTML și CSS

by

Overview:

În dezvoltarea web, elementele HTML pot fi împărțite în două categorii principale: blocuri și elemente inline. În această lecție, vom explora diferențele dintre aceste două tipuri de elemente și modul în care influențează structura și prezentarea paginilor web.

Key Concepts:

  1. Elemente Bloc:
    • Elementele bloc sunt elemente care încep pe o nouă linie și se extind pe întreaga lățime a containerului părinte.
    • Exemple de elemente bloc includ <div>, <p>, <h1> - <h6>, <ul>, <ol>, <li>, și altele.
  2. Elemente Inline:
    • Elementele inline sunt elemente care nu încep pe o nouă linie și se încadrează doar pe suprafața necesară conținutului lor.
    • Exemple de elemente inline includ <span>, <a>, <strong>, <em>, <img>, și altele.
  3. Caracteristici ale Elementelor Bloc:
    • Ocupă întreaga lățime disponibilă a containerului părinte.
    • Elementele bloc permit să le stabilim înălțimea și lățimea.
    • Elementele bloc pot conține alte elemente, inclusiv alte elemente bloc.
  4. Caracteristici ale Elementelor Inline:
    • Ocupă doar spațiul necesar conținutului lor.
    • Nu permit să le stabilim înălțimea și lățimea direct.
    • Elementele inline se încadrează în jurul conținutului lor fără a schimba structura liniei.

Detailed Examples:

1. Element Bloc: <div>
<div>
  <p>Acesta este un paragraf într-un element bloc.</p>
  <ul>
    <li>Element bloc în listă</li>
    <li>Alt element bloc în listă</li>
  </ul>
</div>
2. Element Inline: <span>
<p>Acesta este un <span>text inline</span> într-un paragraf.</p>
3. Stilizare Diferențiată:
/* Stilizare pentru elemente bloc */
div {
  background-color: #e0e0e0;
  padding: 10px;
}

/* Stilizare pentru elemente inline */
span {
  color: #ff0000;
  font-weight: bold;
}

Practice Exercise:

Task:

  1. Creați o structură HTML care să includă atât elemente bloc, cât și elemente inline.
  2. Aplicați stilizare diferită pentru elementele bloc și elementele inline folosind CSS.

Structură HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Exemplu Bloc vs. Inline</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

  <div class="block-element">
    <h1>Element Bloc</h1>
    <p>Acesta este un paragraf într-un element bloc.</p>
    <ul>
      <li>Element bloc în listă</li>
      <li>Alt element bloc în listă</li>
    </ul>
  </div>

  <p>Acesta este un <span class="inline-element">text inline</span> într-un paragraf.</p>

</body>
</html>

Fișierul CSS (styles.css):

/* Stilizare pentru elemente bloc */
.block-element {
  background-color: #e0e0e0;
  padding: 10px;
}

/* Stilizare pentru elemente inline */
.inline-element {
  color: #ff0000;
  font-weight: bold;
}

Exemplu 2 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Lecția 7 - Bloc vs. Inline</title>
  <style>
    /* Stilizare pentru elemente bloc */
    .container {
      background-color: #f0f0f0;
      padding: 20px;
    }

    p {
      color: #333;
      font-size: 16px;
    }

    ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
    }

    li {
      background-color: #c0c0c0;
      margin-bottom: 5px;
    }

    /* Stilizare pentru elemente inline */
    span {
      color: #ff0000;
      font-weight: bold;
    }

    a {
      text-decoration: none;
      color: #0077cc;
    }
  </style>
</head>
<body>

<div class="container">
  <p>Acesta este un paragraf într-un element bloc.</p>
  <ul>
    <li>Element bloc în listă</li>
    <li>Alt element bloc în listă</li>
  </ul>
</div>

<p>Acesta este un <span>text inline</span> într-un paragraf. Un <a href="#">link inline</a> către o altă pagină.</p>

</body>
</html>

Această structură HTML include atât elemente bloc (cum ar fi <div>, <p>, <ul>, <li>), cât și elemente inline (cum ar fi <span> și <a>). Stilurile CSS asociate evidențiază diferențele între aceste două tipuri de elemente, inclusiv culoarea de fundal, dimensiunile textului și stilul link-urilor.