Rahmen und Hintergründe mit CSS formatieren
Folien
Falls keine PDF-Präsentation zu sehen ist: Direktdownload der PDF-Präsentation
Übungen
Zusätzliche Dateien (Bilder, Klassendiagramme, HTML-Vorlagen) finden Sie in der Materialsammlung. Diese Übungen können Sie als txt-Datei herunterladen.
Übungen: CSS - Rahmen, Hintergründe
CSS_8-1: Diverse Übungen zu Rahmen + Hintergrund
Formatieren Sie im folgenden Code die Elemente so, wie es in den Kommentaren angegeben ist.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Rahmen und Hintergruende, Uebung</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
</head>
<body>
<!-- folgende Überschrift: 3px dicker Rahmen in einer Farbe Ihrer Wahl, nicht schwarz. -->
<h1>Wilkommen in unserem Webshop!</h1>
<!-- folgender Absatz: roter Hintergrund, weiße Schrift -->
<p><strong>Achtung, wichtiger Hinweis!</strong><br />
Wenn Sie Ihren Warenkorb aktualisieren, achten Sie unbedingt darauf, nicht erwünschte Artikel zu löschen!</p>
<!-- folgende Überschrift: weiße Schrift auf schwarzem Grund, gestrichelter Rahmen blau -->
<h1>Garantie</h1>
<!-- folgende Absätze: untere und linke Rahmenlinie rot, 1px, durchgezogen; obere und rechte Rahmenlinie rot, 2px, durchgezogen -->
<p>Unsere Waren sind von bester Qualität. Deshalb erhalten Sie von uns eine <a href="#" title="Garantieerklärung">umfassende Garantie</a> auf alle Waren, die Sie in unserem Webshop kaufen.</p>
<p>Wenn Sie etwas wegen Nichtgefallens zurückschicken, werden wir Ihren Fall unkompliziert und schnell behandeln.</p>
<!-- folgende Überschrift: rote, fette Schrift auf gelbem Grund -->
<h1>Viel Spaß beim Einkaufen!!!</h1>
<!-- folgender Absatz: Verwenden Sie alle (!) Stildefinitionen für Rahmen, die Sie kennen, in beliebiger Weise. -->
<p>Nun wünschen wir Ihnen viel Spaß beim Einkaufen in unserem <a href="#" title="zum Webshop">Webshop</a>!</p>
</body>
</html>CSS_8-2: Liste mit Rahmen formatieren
Erstellen Sie eine Liste, die die Punkte “Home”, “Login”, “Shop” und “Kontakt” enthält. Formatieren Sie sie wie im Bild 03css/css08-bild-liste-rahmen.png angegeben. Zur Erinnerung: Die Liste wird horizontal ausgerichtet, indem dem Selektor “li” die Stildefinition display : inline zugewiesen wird.
