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

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.

!

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.

!

!

3