a

WS2425/Web Tech/Übung/4/Ü4.md

@@ -0,0 +1,67 @@
+# 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