Materialien zum Unterricht

Weitere Formatierungen

Die Überschriften sollen farblich verändert werden und einen Schatten erhalten. Dazu werden die einzelnen Tags bearbeitet. Die Formatierung für <h1> sieht so aus:

Der Textschatten braucht vier Angaben:
  1. #808080: Schattenfarbe, drei gleiche Werte bedeutet Grau.
  2. 7px: X-Verschiebung, also 7px nach rechts. (Negative Angaben verschieben nach links)
  3. 5 px: Y-Verschiebung, also 5 px nach unten. (Negative Angaben verschieben nach oben)
  4. 10 px: Grad der Randverschmierung, je größer der Wert, um so weicher wird der Rand
Aufgabe: Gestalte alle Überschriften in dem Text nach deinem Geschmack.

 

Hinweis: Anregungen für Spielerein mit dem Textschatten findet man hier:

Schattenspiele

Die Seite erhält einen Rahmen und einen Innenabstand.

Der Rahmen braucht 3 Angaben
  1. 1px: die Breite des Rahmens
  2. solid: die Art des Rahmens, solid bedeutet einfach durchgezogen
  3. #000099: die Rahmenfarbe
Damit der Text nicht am Rahmen klebt, erhält der Bereich eine Auspolsterung (Innenabstand) padding. Der Wert gibt den Abstand zwischen Rahmen und Text an.

Hinweis: Es gibt verschieden Rahmenarten:
dotted = gepunktet.
dashed = gestrichelt.
solid = durchgezogen.
double = doppelt durchgezogen.
groove = 3D-Effekt.
ridge = 3D-Effekt.
inset = 3D-Effekt.
outset = 3D-Effekt.
Der Satz zur Energie erhält eine Hintergrundfarbe, einen Rahmen, einen Innenabstand und einen Schatten. Dafür wird eine Klasse nit Namen grau eingeführt.

Der Abstatztag <p> erhält die Klasse. Damit wird nur dieser Absatz formatiert. Die Formatierung sieht so aus:

Der Punkt vor dem Klassenname ist wichtig, da nur so die Formatierung als Klasse erkannt wird.

Hinweis: box-shadow benötigt die gleichen Angaben wie text-shadow
Aufgabe: Weise der Tabelle (<table>) ebnfalls die Klasse grau zu. Entscheide, ob das gut aussieht oder nicht.

zurück