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. #888: 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:

Textschatten

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. #009: 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.

Seite ergänzen

Ergänze die Seite um den Abschnitt für die Energieformen. Setze die Breite der Klasse grau auf 70%. Damit wird der Kasten etwas schmaler.


Informiere dich über verschachtelte Listen und ergänze die Aufzählung der mechanischen Energieformen.


zurück