06_Sample

Code-Dateien

Dateiname	Aktion
CODECode_Sample.zip	Download

Videos

Dateiname	Aktion
VIDEOVideo_Sample_D	Abspielen

Lernmaterialien

Vererbung

DOM

Bedeutung

DOM steht für Document Object Model
(auf Deutsch: Dokument-Objekt-Modell).

➡️ Es ist die innere Struktur, die der Browser aus einer HTML-Datei erstellt, sobald du sie öffnest.

Der Browser „baut“ aus HTML einen Baum

Wenn du eine HTML-Datei öffnest, liest der Browser den Text und wandelt ihn in eine Baumstruktur um.

Beispiel-HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Meine Webseite</title>
  </head>
  <body>
    <h1>Willkommen!</h1>
    <p>Das ist mein erster Absatz.</p>
  </body>
</html>

So sieht das im DOM-Baum aus:

Document
└── html
    ├── head
    │    └── title
    └── body
         ├── h1
         └── p

💡 Jeder Eintrag in diesem Baum ist ein Knoten (Node), z. B. ein Element (<p>), ein Text oder ein Attribut.

Warum braucht der Browser den DOM?

Der Browser kann HTML nicht direkt anzeigen, er braucht erst eine interne Struktur, die er darstellen kann. Diese Struktur ist der DOM.

Mit ihr weiß der Browser z. B.:

welches Element oben steht (z. B. <h1>)
welche Elemente innerhalb anderer stehen (z. B. <p> im <body>)
welcher Text, welche Attribute, welche Reihenfolge vorkommen

Dadurch kann der Browser:

die Seite zeichnen
Inhalte neu berechnen, wenn sich etwas ändert (z. B. CSS-Stile)
Zugriff erlauben, wenn später JavaScript ins Spiel kommt

DOM und CSS

Auch CSS arbeitet mit dem DOM – nicht mit dem HTML-Text direkt.

Wenn du in CSS z. B. schreibst:

p {
  color: blue;
}

Dann sagt der Browser:

„Färbe im DOM alle <p>-Knoten blau.“

Das heißt:

HTML beschreibt den Inhalt
CSS beschreibt das Aussehen
Der DOM verbindet beides miteinander

Arten von DOM-Knoten

Knoten-Typ	Beispiel	Beschreibung
Document	(Wurzel)	Die gesamte Seite
Element-Knoten	`<p>`, `<h1>`	HTML-Tags
Text-Knoten	“Hallo Welt”	Inhalt zwischen Tags
Attribut-Knoten	`id="title"`	Eigenschaften von Elementen
Kommentar-Knoten	`<!-- Text -->`	Unsichtbare Notizen im HTML

DOM ist unabhängig von HTML-Datei

Der DOM ist nicht dasselbe wie dein HTML-Text:

HTML-Datei	DOM
Nur Text	Eine Datenstruktur im Speicher
Enthält Tags und Inhalte	Enthält Objekte und Beziehungen
Wird geladen	Wird vom Browser aufgebaut

Vererbung (Inheritance)

Viele CSS-Eigenschaften werden von Vorfahren-Elementen an Kindelemente vererbt. Typisch: Schrift und Text; untypisch: Box-Modell (Größen, Abstände, Rahmen).

Häufig vererbte Eigenschaften

color, font-family, font-size, font-weight, font-style, line-height
text-align, text-indent, text-transform, letter-spacing, word-spacing
visibility, cursor
CSS-Variablen: --my-color (werden ebenfalls vererbt)

Typisch nicht vererbte Eigenschaften

margin, padding, border, border-radius
width, height, display, position, top/right/bottom/left, z-index
background, box-shadow, overflow
transform, opacity (Achtung: wirkt zwar visuell auf Kinder, wird aber nicht „vererbt“)

Vererbungsverhalten steuern

inherit → erzwingt Vererbung vom Eltern-Element
initial → setzt den CSS-Standards-Ausgangswert
unset → vererbte Eigenschaft: wie inherit; sonst wie initial
revert → zum UA/Author/Benutzer-Stylesheet zurückkehren (fortgeschritten)

HTML-Tags & typische Formatierungen

Tag	Bedeutung	Häufige CSS-Regeln	Vererbung relevant?
`<body>`	Seitenwurzel	`font-family`, `color`, `line-height`, `--brand`	Ja – guter Ort für Grundstil
Überschriften `<h1>…<h6>`	Titel	`font-size`, `font-weight`, `margin`	Farbe/Schrift von `body` wird geerbt, Größe meist überschrieben
`<p>`	Absatz	`margin`, `line-height`, `text-align`	Schrift & Farbe geerbt
`<a>`	Link	`color`, `text-decoration`, `:hover`	Erbt oft Farbe, hat aber Browser-Standard (blau/unterstrichen)
`<ul>`, `<ol>`, `<li>`	Listen	`list-style`, `margin`, `padding`	Textstil geerbt
`<strong>`, `<em>`	Betonung	`font-weight`, `font-style`	Erbt Farbe/Schrift, ändert Gewicht/Kursiv
`<span>`	Inline-Container	beliebig (z. B. `color`)	Erbt alles Typografische
`<div>`	Block-Container	Layout (Abstände, Hintergrund)	Erbt Textstil, nicht Box-Modell
`<img>`	Bild	`width/height`, `border-radius`	Vererbt Textstil nicht
`<nav>`, `<header>`, `<footer>`, `<section>`, `<article>`	Semantik	wie `<div>` plus typogr. Vererbung	Ja für Text, nein für Layout
`<table>`, `<th>`, `<td>`	Tabelle	`border`, `border-collapse`, `text-align`	Text erbt; Rahmen nicht

Minimalbeispiel: Vererbung in Aktion

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>CSS Vererbung</title>
<style>
  /* Basis: vererbte Typografie + Variable */
  :root { --brand: #0a66c2; }                /* CSS-Variable (wird vererbt) */
  body {
    font-family: system-ui, Arial, sans-serif;
    color: #333;
    line-height: 1.6;
  }

  /* Nicht vererbte Layout-Regeln pro Element */
  main { max-width: 60ch; margin: 40px auto; padding: 16px; border: 1px solid #ddd; }

  /* Überschrift erbt Schrift & Farbe; Größe/Abstand individuell */
  h1 { font-size: 2rem; margin: 0 0 16px; color: var(--brand); }

  /* Link: überschreibt Standard, erbt sonst Farbe vom Elternelement */
  a { color: var(--brand); text-decoration: none; }
  a:hover { text-decoration: underline; }

  /* Innere Box ändert nur die Farbe – Kinder erben diese Farbe automatisch */
  .accent { color: #b00020; }                 /* vererbt an p, a, strong, span … */

  /* Erzwungene Vererbung: li nimmt Textausrichtung von ul an */
  ul { text-align: right; }
  li { text-align: inherit; }                 /* ohne diese Regel wäre li linksbündig */

  /* Kein Vererben bei Box-Modell: Abstände pro Element definieren */
  p { margin: 0 0 12px; }
</style>
</head>
<body>
  <main>
    <h1>Vererbung verstehen</h1>
    <p>Dieser Absatz erbt <strong>Schriftart</strong>, <em>Farbe</em> und <span>Zeilenhöhe</span> vom <code>body</code>.</p>

    <div class="accent">
      <p>In dieser Box ist die Textfarbe <strong>rot</strong> – und alle Kinder erben sie, auch <a href="#">Links</a>.</p>
    </div>

    <ul>
      <li>Listenpunkt A (rechtsbündig dank <code>inherit</code>)</li>
      <li>Listenpunkt B</li>
    </ul>
  </main>
</body>
</html>

Was man sieht:

body setzt Schrift & Farbe → alles erbt das (Überschriften, Absätze, Links …).
.accent ändert nur color → Kinder (inkl. <a>) werden rot.
ul legt text-align:right fest → li übernimmt dank inherit.

:root

:root ist ein CSS-Selektor, der das oberste Element im Dokumentbaum anspricht — also im HTML immer das <html>-Element.

Beispiel:

:root {
  background-color: white;
}

➡️ Das wirkt genauso, als würdest du html { background-color: white; } schreiben.

Der Unterschied: :root wird oft verwendet, um globale Werte zu definieren —
vor allem CSS-Variablen.

CSS-Variablen

CSS-Variablen heißen offiziell Custom Properties. Sie beginnen immer mit zwei Minuszeichen (--).

In deinem Beispiel:

--brand: #0a66c2;

definiert eine benutzerdefinierte Variable namens --brand mit dem Wert #0a66c2 (ein Blau-Ton).

Verwendung der Variable

Du kannst sie überall im CSS verwenden mit der Funktion var():

h1 {
  color: var(--brand);
}

a {
  color: var(--brand);
}

Das bedeutet: Wenn der Farbwert in :root geändert wird, ändert sich automatisch die Farbe aller Überschriften und Links, die var(--brand) benutzen.

Warum im :root-Selektor?

Wenn du Variablen im :root definierst, gelten sie global im gesamten Dokument, weil sie (wie normale CSS-Eigenschaften) vererbt werden.

Beispiel:

:root {
  --brand: #0a66c2;
  --text: #333;
  --background: #f5f5f5;
}

➡️ Diese Werte kannst du dann auf jeder Seite und in jedem Element wiederverwenden.

Beispiel

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>CSS Variablen Beispiel</title>
<style>
  :root {
    --brand: #0a66c2;
    --background: #f5f5f5;
    --text: #333;
  }

  body {
    background-color: var(--background);
    color: var(--text);
    font-family: Arial, sans-serif;
  }

  h1 {
    color: var(--brand);
  }

  a {
    color: var(--brand);
    text-decoration: none;
  }

  a:hover {
    color: #084a8f;
  }
</style>
</head>
<body>
  <h1>CSS Variables in Action</h1>
  <p>Visit <a href="#">this link</a> to see the brand color.</p>
</body>
</html>

Vorteil:

Wenn man das Farbschema ändern will, musst das nur einmal in :root z. B. --brand: red; anpassen — alle Farben passen sich automatisch an.

Beispielprojekt

📁 Dateistruktur

projekt/
│
├── index.html
└── style.css

📄 index.html

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Personal Page</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>Welcome to My Personal Page</h1>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Projects</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <section class="intro">
      <h2>Hello, I’m Alex 👋</h2>
      <p>
        I’m a student learning <strong>HTML</strong> and <strong>CSS</strong>.  
        This is my first web page built using everything I’ve learned so far.
      </p>
    </section>

    <section class="features">
      <h2>My Interests</h2>
      <div class="grid">
        <div class="card">🎵 Music</div>
        <div class="card">💻 Coding</div>
        <div class="card">🚴 Cycling</div>
      </div>
    </section>

    <section class="about">
      <h2>About This Page</h2>
      <p>
        This page uses <span class="highlight">CSS Variables</span>,
        <span class="highlight">Flexbox</span>, <span class="highlight">Grid</span>,
        and <span class="highlight">Positioning</span>.
      </p>
      <p>
        Everything is styled from a single <code>style.css</code> file using inheritance.
      </p>
    </section>
  </main>

  <footer>
    <p>© 2025 My Personal Page</p>
    <button class="back-to-top">⬆ Back to Top</button>
  </footer>
</body>
</html>

🎨 style.css

/* ===== CSS VARIABLES ===== */
:root {
  --brand: #0a66c2;
  --accent: #f39c12;
  --text: #333;
  --bg: #f5f5f5;
  --radius: 10px;
  --shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* ===== GLOBAL STYLES ===== */
body {
  font-family: Arial, sans-serif;
  color: var(--text);
  background-color: var(--bg);
  margin: 0;
  line-height: 1.6;
}

/* ===== HEADER ===== */
header {
  background-color: var(--brand);
  color: white;
  text-align: center;
  padding: 20px 0;
  position: sticky;
  top: 0;
  box-shadow: var(--shadow);
}

nav ul {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 10px 0 0 0;
  padding: 0;
}

nav a {
  color: white;
  text-decoration: none;
  font-weight: bold;
}

nav a:hover {
  color: var(--accent);
}

/* ===== MAIN CONTENT ===== */
main {
  max-width: 900px;
  margin: 20px auto;
  padding: 20px;
  background-color: white;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* ===== GRID SECTION ===== */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
  margin-top: 10px;
}

.card {
  background-color: var(--brand);
  color: white;
  padding: 20px;
  border-radius: var(--radius);
  text-align: center;
  font-size: 18px;
}

/* ===== HIGHLIGHTED TEXT ===== */
.highlight {
  color: var(--accent);
  font-weight: bold;
}

/* ===== FOOTER ===== */
footer {
  background-color: var(--brand);
  color: white;
  text-align: center;
  padding: 10px;
  position: relative;
}

/* ===== FIXED BUTTON ===== */
.back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: var(--accent);
  color: white;
  border: none;
  border-radius: var(--radius);
  padding: 10px 15px;
  cursor: pointer;
  box-shadow: var(--shadow);
}

.back-to-top:hover {
  background-color: #d87e00;
}

Verwendete Konzepte

Konzept	Anwendung
HTML-Struktur	`<header>`, `<main>`, `<section>`, `<footer>`
Vererbung	Schriftart und Farbe vom `body`
CSS-Variablen	`--brand`, `--accent`, `--bg`, `--radius`
Flexbox	Navigation (`display: flex; justify-content: center;`)
Grid	Interessen-Karten (`.grid`)
Positioning	Sticky Header + Fixed Button
Hover-Effekt	Navigation + Button
Box-Modell	Abstände, Ränder, Schatten, Rundungen

Beispielprojekt mit Menü

📁 Dateistruktur

projekt/
│
├── index.html
├── about.html
├── projects.html
├── contact.html
└── style.css

🏠 index.html

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Personal Page</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>Welcome to My Personal Page</h1>
    <nav>
      <ul>
        <li><a href="index.html" class="active">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="projects.html">Projects</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <section class="intro">
      <h2>Hello, I’m Alex 👋</h2>
      <p>
        I’m a student learning <strong>HTML</strong> and <strong>CSS</strong>.
        This is my first website built using everything I’ve learned so far.
      </p>
    </section>

    <section class="features">
      <h2>My Interests</h2>
      <div class="grid">
        <div class="card">🎵 Music</div>
        <div class="card">💻 Coding</div>
        <div class="card">🚴 Cycling</div>
      </div>
    </section>
  </main>

  <footer>
    <p>© 2025 My Personal Page</p>
    <button class="back-to-top">⬆ Back to Top</button>
  </footer>
</body>
</html>

🙋‍♂️ about.html

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>About Me</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>About Me</h1>
    <nav>
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html" class="active">About</a></li>
        <li><a href="projects.html">Projects</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <h2>Who am I?</h2>
    <p>
      My name is Alex, and I love technology and design.  
      I’m learning to create websites using HTML and CSS.
    </p>
  </main>

  <footer>
    <p>© 2025 My Personal Page</p>
  </footer>
</body>
</html>

💻 projects.html

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Projects</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>My Projects</h1>
    <nav>
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="projects.html" class="active">Projects</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <h2>Some things I’ve built</h2>
    <div class="grid">
      <div class="card">🌐 Simple HTML Page</div>
      <div class="card">💬 Chat Layout</div>
      <div class="card">🎨 CSS Flexbox Design</div>
    </div>
  </main>

  <footer>
    <p>© 2025 My Personal Page</p>
  </footer>
</body>
</html>

📬 contact.html

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contact</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>Contact Me</h1>
    <nav>
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="projects.html">Projects</a></li>
        <li><a href="contact.html" class="active">Contact</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <h2>Send a Message</h2>
    <form>
      <label for="name">Name:</label><br>
      <input type="text" id="name" name="name"><br><br>

      <label for="email">E-Mail:</label><br>
      <input type="email" id="email" name="email"><br><br>

      <label for="message">Message:</label><br>
      <textarea id="message" rows="4"></textarea><br><br>

      <input type="submit" value="Send">
    </form>
  </main>

  <footer>
    <p>© 2025 My Personal Page</p>
  </footer>
</body>
</html>

🎨 style.css

:root {
  --brand: #0a66c2;
  --accent: #f39c12;
  --text: #333;
  --bg: #f5f5f5;
  --radius: 10px;
  --shadow: 0 2px 5px rgba(0,0,0,0.1);
}

body {
  font-family: Arial, sans-serif;
  color: var(--text);
  background-color: var(--bg);
  margin: 0;
  line-height: 1.6;
}

header {
  background-color: var(--brand);
  color: white;
  text-align: center;
  padding: 20px 0;
  position: sticky;
  top: 0;
  box-shadow: var(--shadow);
}

nav ul {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 10px 0 0 0;
  padding: 0;
}

nav a {
  color: white;
  text-decoration: none;
  font-weight: bold;
}

nav a:hover {
  color: var(--accent);
}

nav a.active {
  text-decoration: underline;
}

main {
  max-width: 900px;
  margin: 20px auto;
  padding: 20px;
  background-color: white;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
  margin-top: 10px;
}

.card {
  background-color: var(--brand);
  color: white;
  padding: 20px;
  border-radius: var(--radius);
  text-align: center;
  font-size: 18px;
}

form input, form textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: var(--radius);
  margin-bottom: 10px;
}

input[type="submit"] {
  background-color: var(--accent);
  color: white;
  border: none;
  cursor: pointer;
  padding: 10px 15px;
}

input[type="submit"]:hover {
  background-color: #d87e00;
}

footer {
  background-color: var(--brand);
  color: white;
  text-align: center;
  padding: 10px;
  margin-top: 30px;
}

nav ul { ... }

Das ist ein CSS-Selektor, der sagt:

„Wende diese Regeln auf **alle <ul>-Elemente an, die sich innerhalb eines <nav>-Elements befinden.“

HTML:

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

CSS:

nav ul {
  list-style: none;       /* entfernt die Punkte */
  display: flex;          /* macht die Liste horizontal */
  justify-content: center;/* zentriert die Navigation */
  gap: 20px;              /* Abstand zwischen den Links */
  padding: 0;             /* entfernt Innenabstände */
  margin: 0;              /* entfernt Außenabstände */
}

Themen

Thema	Anwendung
HTML Struktur	header, nav, main, footer
Navigation (Menü)	`<nav><ul><li><a href="...">`
Verlinkung zwischen Seiten	relative Links (z. B. `about.html`)
CSS-Variablen	`--brand`, `--accent`, …
Flexbox	Navigation horizontal
Grid Layout	Projekte & Interessen
Vererbung	Schrift, Farben vom `body`
Positioning	Sticky Header
Formulare	einfache Eingaben & Buttons

Semester_1

06_Sample

Code-Dateien

Videos

Lernmaterialien

Vererbung

DOM

Bedeutung

Der Browser „baut“ aus HTML einen Baum

Warum braucht der Browser den DOM?

DOM und CSS

Arten von DOM-Knoten

DOM ist unabhängig von HTML-Datei

Vererbung (Inheritance)

Häufig vererbte Eigenschaften

Typisch nicht vererbte Eigenschaften

Vererbungsverhalten steuern

HTML-Tags & typische Formatierungen

Minimalbeispiel: Vererbung in Aktion

:root

CSS-Variablen

Verwendung der Variable

Warum im :root-Selektor?

Beispiel

Beispielprojekt

📁 Dateistruktur

📄 index.html

🎨 style.css

Verwendete Konzepte

Beispielprojekt mit Menü

📁 Dateistruktur

🏠 index.html

🙋‍♂️ about.html

💻 projects.html

📬 contact.html

🎨 style.css

Themen