# 1
In diesem Beispiel wird die Darstellung im Browser durch verschiedene CSS-Definitionen beeinflusst, die für das `<h2>`-Element festgelegt sind. 

### Analyse der Hierarchie:
1. **Externe CSS-Datei (`style.css`)**: Diese definiert `h2 { background-color: red; }`, was für alle `<h2>`-Überschriften den Hintergrund rot setzt.
2. **Interne CSS-Definition im `<style>`-Tag**: Die interne CSS-Regel `h2 { background-color: yellow; }` überschreibt die externe Definition, da sie im Dokument direkt eingebunden ist und eine höhere Priorität hat.
3. **Inline-Styling auf dem ersten `<h2>`-Tag**: Im `<h2>`-Tag für „Erste Überschrift“ wird direkt `style="background-color: blue;"` definiert. Da Inline-Styling die höchste Priorität besitzt, wird der Hintergrund dieses Elements blau.

### Darstellung im Browser:
- **Erste Überschrift** (`<h2 style="background-color: blue;">Erste Überschrift</h2>`): Der Hintergrund wird **blau** angezeigt, da das Inline-Styling die höchste Priorität hat.
- **Zweite Überschrift** (`<h2>Zweite Überschrift</h2>`): Der Hintergrund wird **gelb** angezeigt, da die Definition aus dem internen `<style>`-Tag (gelb) die externe CSS-Datei (`style.css`, rot) überschreibt.

### Ergebnis:
Die erste Überschrift erscheint mit blauem Hintergrund, und die zweite Überschrift erscheint mit gelbem Hintergrund.


![[Pasted image 20241029134346.png]]
# 2

Hier ist die Analyse des CSS- und HTML-Codes und wie sie sich auf die Darstellung der Seite im Browser auswirken:

### CSS-Regeln und ihre Auswirkungen

1. **Regel 1: `h1 { color: red; }`**
   - Setzt die Textfarbe aller `<h1>`-Elemente auf **rot**.
   - Im Browser wird der Text „Cascading Stylesheets“ in der `<h1>`-Überschrift rot dargestellt.

2. **Regel 2: `h1, h2 { text-transform: uppercase; }`**
   - Setzt den Textinhalt aller `<h1>`- und `<h2>`-Elemente in **Großbuchstaben**.
   - Im Browser erscheinen die Texte der `<h1>`- und `<h2>`-Elemente („Cascading Stylesheets“, „Einleitung“ und „Syntax“) komplett in Großbuchstaben.

3. **Regel 3: `h1 h2 { text-transform: lowercase; }`**
   - Diese Regel versucht, `<h2>`-Elemente innerhalb von `<h1>`-Elementen in **Kleinbuchstaben** darzustellen. Da es jedoch kein `<h2>`-Element innerhalb eines `<h1>`-Elements gibt, hat diese Regel **keine sichtbare Wirkung**.

4. **Regel 4: `.hinweis { background-color: lightblue; }`**
   - Setzt den Hintergrund aller Elemente mit der Klasse `.hinweis` auf **hellblau**.
   - Im Browser erscheinen die `<div>`-Elemente mit der Klasse `hinweis` („Hinweis: Damit unterstützt CSS …“ und „Hinweis: Deklarationen …“) mit einem hellblauen Hintergrund.

5. **Regel 5: `#hinweis { background-color: red; }`**
   - Setzt den Hintergrund des Elements mit der ID `hinweis` auf **rot**. Da es jedoch kein Element mit der ID `hinweis` gibt, hat diese Regel **keine sichtbare Wirkung**.

6. **Regel 6: `a[href^="#"] { color: green; }`**
   - Setzt die Textfarbe von Links, deren `href`-Attribut mit `#` beginnt, auf **grün**.
   - Die Links im `<nav>`-Element (mit `href="#einleitung"` und `href="#syntax"`) werden daher im Browser grün dargestellt.

7. **Regel 7: `nav a:hover { background-color: green; color: white; }`**
   - Verändert die Darstellung von Links im `<nav>`-Element, wenn der Mauszeiger über ihnen schwebt. Der Hintergrund wird **grün** und die Schriftfarbe **weiß**.
   - Im Browser werden die Links im `<nav>`-Element beim Hover grün mit weißem Text dargestellt.

8. **Regel 8: `*[id] { font-style: italic; }`**
   - Setzt alle Elemente mit einem `id`-Attribut kursiv.
   - Die `<section>`-Elemente mit den IDs `einleitung` und `syntax` sowie deren Inhalte werden daher **kursiv** dargestellt.

### Darstellung im Browser

Zusammengefasst wird Folgendes dargestellt:
- **"Cascading Stylesheets"** als `<h1>`-Überschrift in **rot** und **Großbuchstaben**.
- **"Einleitung"** und **"Syntax"** als `<h2>`-Überschriften in **Großbuchstaben**.
- **Links im `<nav>`-Element** in **grün** und bei Hover mit grünem Hintergrund und weißem Text.
- **Text innerhalb der `.hinweis`-Divs** in einem **hellblauen** Hintergrund.
- **Abschnitte mit IDs** (`einleitung`, `syntax`) sind kursiv aufgrund von Regel 8.

![[Pasted image 20241029134619.png]]

![[Pasted image 20241029134825.png]]

# 3