Materialien zum Unterricht

Klassen

Klassen fassen eine Reihe von Formatierungen zusammen und können auf einer Web-Site immer wieder verwendet werden. Damit sind sie ein mächtiges Mittel zum Gestalten einer Seite.

Klasse bild_rechts

Es wird in der Datei style.css eine neue Klasse .bild_rechts erzeugt. Klassen erkennt man am Punkt vor dem Klassennamen. Der Name der Klasse ist frei wählbar und sollte das aussagen, was sie macht. Das ist für das spätere Lesen des Quelltextes sehr hilfreich.

klasse

Danach wird dem Bild in der Datei index.html diese Klasse zugewiesen:

text

Aufgabe: Lade die Datei wasserturm.jpg und baue das Bild auf der Seite links neben der Liste ein.

Aufgabe: Erweitere in der Datei style.css die Klasse bild_rechts um einen dünnen Rahmen, der einen Innenabstand von 0.2 em hat (padding).

Klasse kursiv_blau

Aufgabe: Erzeuge in der style.css die entsprechenden Klassenformatierungen und verändere die Tabelle.

Klasse text_schatten

Aufgabe: Der Text im Kopf soll einen Schatten bekommen.
  • Erzeuge eine neuen Klasse: text_schatten. Weise der Überschrift im Kopf diese Klasse zu.
  • Die Werte haben folgende Bedeutung:
    • -2 px: horizontaler Versatz, - links, + rechts
    • 3 px: vertikaler Versatz, - oben, + unten
    • 4 px: Unschärfe
    • #305052: Schattenfarbe
  • Spiele an den Werten rum!

Zwischenergebnis

Die Seite sollte jetzt schon ganz ansehnlich sein und die Forderungen des Responsive Webdesign erfüllen.

Klasse verlauf

Aufgabe: Der Kopf erhält einen Farbverlauf.
  • Erstelle eine neue Klasse .verlauf
  • Weise dem Bereich Kopf diese Klasse zu
  • Die Werte haben folgende Bedeutung
    • -moz-linear-gradient: Linearer Farbverlauf für den Browser Firefox
    • #0DDEE5: obere Startfarbe
    • #FFFFCE: Untere Endfarbe, entspricht der Hintergrundfarbe von body

Farbverläufe

zurück