Folien



(letzte Synchronisation der PDF-Präsentation: 02.03.2017)

Falls keine PDF-Präsentation zu sehen ist, klicken Sie zum Download hier: Direktdownload PDF-Präsentation

Übungen

Alle Übungen finden Sie in der Materialsammlung (dort auch alle zusätzlichen Dateien wie Bilder, Klassendiagramme oder HTML-Vorlagen!).

Die aktuelle Übung können Sie hier als txt-File 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.

HTML-Code
<!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.