09 – Listen & Selektoren 📋

📋 1. Was ist eine Liste?

Eine Liste ist eine geordnete oder ungeordnete Sammlung von gleichartigen Elementen. Im echten Leben begegnen wir ständig Listen:

• Einkaufszettel
• Inhaltsverzeichnis eines Buches
• Schritte einer Anleitung
• Navigationsmenü einer Website

Im Web werden Listen mit HTML-Elementen strukturiert: → <ul> für ungeordnete Listen → <ol> für geordnete Listen → <li> für jedes einzelne Listenelement

🔘 2. Ungeordnete Listen – <ul>

Eine ungeordnete Liste (ul = unordered list) wird für Elemente verwendet, bei denen die Reihenfolge egal ist.

<ul>
  <li>Apfel</li>
  <li>Banane</li>
  <li>Orange</li>
</ul>

Standardmäßig werden die Listenelemente mit schwarzen Punkten dargestellt.

🔢 3. Geordnete Listen – <ol>

Eine geordnete Liste (ol = ordered list) wird verwendet, wenn die Reihenfolge wichtig ist – z. B. bei Anleitungen.

<ol>
  <li>Eier kochen</li>
  <li>Schale abziehen</li>
  <li>Mit Mayonnaise mischen</li>
</ol>

Standardmäßig werden die Elemente mit fortlaufenden Zahlen nummeriert.

🔽 4. Verschachtelte Listen – Strukturierung durch Einrückung

Listen können beliebig tief verschachtelt werden – ideal für Inhaltsverzeichnisse oder Kategorien.

<ul>
  <li>Obst
    <ul>
      <li>Zitrusfrüchte
        <ul>
          <li>Orange</li>
          <li>Zitrone</li>
        </ul>
      </li>
      <li>Beeren</li>
    </ul>
  </li>
  <li>Gemüse</li>
</ul>

Jede Ebene wird automatisch eingerückt – und verwendet ein anderes Aufzählungszeichen (Punkte → Kreise → Quadrate).

🎨 5. Listen mit CSS stylen – wichtige Eigenschaften

Mit CSS kannst du das Erscheinungsbild von Listen vollständig kontrollieren. Die wichtigsten Eigenschaften:

list-style-type – Aufzählungszeichen ändern

ul { list-style-type: square; }        /* Quadrate */
ol { list-style-type: upper-roman; } /* I, II, III */
ul { list-style-type: none; }        /* Keine Punkte (für Navigation!)

list-style-position – Position der Punkte

ul { list-style-position: inside; }  /* Punkte im Textblock */
ul { list-style-position: outside; } /* Standard – Punkte außerhalb */

list-style-image – Eigene Symbole

ul { list-style-image: url("pfeil.png"); }

🧬 6. Vererbung bei Listen – wie CSS sich ausbreitet

Listen bestehen aus zwei HTML-Elementen: - dem List-Container (ul oder ol) - den Listenelementen (li)

Viele CSS-Eigenschaften werden von ul/`ol` auf `li` vererbt:

• color – Schriftfarbe
• font-family, font-size
• text-align

Eigenschaften wie padding, margin oder border werden nicht vererbt – sie müssen explizit gesetzt werden.

🧭 7. Praxis: Navigation als ungeordnete Liste

Eine Website-Navigation ist semantisch eine Liste von Links. Deshalb wird sie mit <ul> umgesetzt – und mit CSS „bereinigt“:

<nav>
  <ul>
    <li><a href="start.html">Start</a></li>
    <li><a href="kontakt.html">Kontakt</a></li>
  </ul>
</nav>

/* CSS: Punkte und Unterstriche entfernen */
nav ul {
  list-style: none;     /* Entfernt die Punkte */
  padding: 0;
  margin: 0;
  display: flex;
  gap: 20px;
}

nav a {
  text-decoration: none; /* Entfernt den standardmäßigen Unterstrich */
  color: #2c3e50;
}

🧠 8. KI als Lernpartner – guter Prompt

❌ Schlecht: „Mach mir eine Navigation.“ ✅ Gut: „Kannst du mir zeigen, wie ich eine zweistufige Navigation mit HTML-Listen umsetze – und wie ich per CSS die Punkte entferne, horizontale Ausrichtung erzeuge, den Link-Unterstrich mit text-decoration: none ausblende und Hover-Effekte hinzufüge? Erkläre auch, welche Eigenschaften vererbt werden.“