Direktnavigation

Weitere Infos

Sie lesen:
LB Teil 1 (2009)

Little Boxes Teil 1 (Cover)

Aktuell (2015)
Einstieg in CSS

Einstieg in CSS (Cover)


2. Auflage!

Einstieg in CSS (Cover)

Beispielseiten

Inhaltsbereich

5.6 Die Adresse im Fußbereich gestalten

Am Ende der Webseite steht im Element address eine (fiktive) Adresse. Die meisten Browser stellen dieses Element kursiv dar, aber mit CSS muss das natürlich nicht so bleiben. Das folgende ToDo zentriert die Kontaktadresse, verfeinert die Schriftgestaltung und verändert den Zeilenabstand.

Am besten speichern Sie im ToDo nach jeder Anweisung (also nach jedem Semikolon, aber nicht die schließende geschweifte Klammer vergessen) und betrachten die Webseiten kurz im Browser. Dann
können Sie die Auswirkungen Schritt für Schritt nachvollziehen.

ToDo: Die Schrift für das Element address gestalten
  1. Schreiben Sie folgende CSS-Regel an das Ende des Stylesheets:

    address {
      text-align: center; /* zentrieren */
      font-size: 80%; /* etwas kleiner als der Rest */
      font-style: normal; /* normale Schrift, nicht kursiv */
      letter-spacing: 2px; /* Abstand zwischen den Buchstaben */
      line-height: 1.5; /* Zeilenabstand, ohne Einheit */
    }

  2. Speichern Sie das Stylesheet und betrachten Sie die Webseiten im
    Browser.

Der Text von address ist jetzt zentriert, etwas kleiner als der Rest der Seite (80%), nicht mehr kursiv, der Zeichenabstand zwischen den einzelnen Buchstaben ist um 2 Pixel vergrößert und der Zeilenabstand auf das Anderthalbfache der Schriftgröße erhöht. Einheiten wie px lernen Sie übrigens im nächsten Kapitel noch genauer kennen.

Abbildung 5.4: address mit Formatierungen
Abbildung 5.4: address mit Formatierungen

Etwas gewöhnungsbedürftig ist das Kursiv- und Fettformatieren von Zeichen:

  • kursiv bekommen Sie mit font-style: italic;
  • fett erreichen Sie z. B. mit font-weight: bold;
CSS-Referenzen: Details zum Nachschlagen

Falls Sie weitere Details zu den im Beispiel benutzten CSS-Eigenschaften wie z. B. text-align suchen, führen die folgenden Links zu deutschsprachigen CSS-Referenzen im Web: