Relativ wozu?

(Auszug aus "CSS − Anspruchsvolle Websites mit Cascading Stylesheets" von Rachel Andrew & Dan Shafer)

Wenn Sie relative Schriftgrößen verwenden wie etwa em oder Prozentwerte oder auch die relativen Konstanten larger und smaller, müssen Sie beachten, auf welche Ausgangswerte sich Ihre Angaben beziehen. Unter Relative Werte haben wir gelernt, dass der Browser mit der Maßeinheit em angewiesen wird, die Schriftgröße als Vielfaches bzw. Bruchteil eben dieses Ausgangswerts zu berechnen. Die Angabe von font-size: 1.5em veranlasst den Browser, den so formatierten Text auf das Anderthalbfache des Ausgangswerts zu vergrößern und mit font-size: 0.5em wird der Text nur noch halb so groß wie normal angezeigt.

Aber was ist dieser Ausgangswert?

Wenn der Text direkt im body eines Dokuments enthalten ist, ist es einfach: Die Schriftgröße wird relativ zur Standardschriftgröße des Browsers bestimmt. Falls die Voreinstellung des Browsers für Text beispielswese 12 Punkt ist, bewirkt die Regel font-size: 1.5em eine Vergrößerung der Schrift auf 18 Punkt.

Befindet sich das Textelement innerhalb von anderen HTML-Elementen, denen bereits eigene Schriftgrößen zugewiesen wurden, zählt immer der font-size-Wert des übergeordneten Elements als Ausgangswert, wie Sie wahrscheinlich schon vermutet haben. Die Vererbung spielt bei relativen Schriftgrößen eine große Rolle und sollte unbedingt beachtet werden, um böse Überraschungen zu vermeiden.

Wenn Sie zum Beispiel ein bestimmtes <h1>-Tag mit einer font-size von 1.5em definieren, wird die Überschrift nicht unbedingt eineinhalb Mal größer als die anderen h1-Überschriften auf Ihrer Seite dargestellt. Als Ausgangswert zählt auch hier der Wert des übergeordneten Elements, egal ob es sich dabei um body, p, td oder ein anderes Element handelt.

Relative Schriftgröße benutzt den Wert von body als übergeordneten Ausgangswert

Abbildung: Die relative Schriftgröße benutzt den Wert von <body> als übergeordneten Ausgangswert.

Die obige Abbildung zeigt ein Beispiel mit zwei Überschriften, deren direkt übergeordnetes Element body ist. Das obere h1 wird nicht extra definiert und erhält die Standardschriftgröße für Überschriften erster Ordnung. Das untere h1 wiederum erhält eine font-size von 1.5em. Es wird dadurch nicht etwa 1,5 Mal größer als h1 dargestellt, sondern 1,5 Mal größer als body. (Anmerkung: Sind keine speziellen Werte für body definiert, erhält es als oberstes Element in der Dokumenthierarchie immer die Standardeinstellungen des Browsers.)

In der folgenden Abbildung verwenden wir ein <span>-Tag innerhalb der h1-Überschrift. Eine Stilregel für span definiert die font-size mit 1.5em. In diesem Fall zählt das <h1>-Tag als übergeordnetes Element und somit seine Standardgröße als Ausgangswert für die Schriftgröße. Das Wort »span-Element« wird 1,5 Mal größer als der Rest der Überschrift dargestellt.

Relative Schriftgröße benutzt h1 als übergeordneten Ausgangswert

Abbildung: Die relative Schriftgröße benutzt <h1> als übergeordneten Ausgangswert.

  

<< zurück vor >>

 

 

 

Tipp der data2type-Redaktion:
Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Copyright © 2006 der deutschen Übersetzung dpunkt.verlag GmbH
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS − Anspruchsvolle Websites mit Cascading Stylesheets" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

dpunkt.verlag GmbH, Ringstraße 19, 69115 Heidelberg