CSS 2.1 ::Grundlegendes

Prozentwerte in CSS

Prozentangaben bestehen stets aus einer numerischen Angabe, an die ohne Zwischenraum der Identifizierer % angehängt ist. Negative Prozentangaben sind erlaubt, der Angabe kann das Zeichen '+' oder '-' vorangestellt werden.

Beispiele:

{ width: 80%; }
{ pause: +5%; }
{ right: -3%; }

Prozentangaben sind relative Werte, die sich immer auf einen anderen Wert beziehen. Dafür gibt es grundsätzlich nur drei Möglichkeiten:

  1. Der Prozentwert einer Eigenschaft bezieht sich auf den Wert einer anderen Eigenschaft desselben Elementes, z. B. ist ein Prozentwert für line-height abhängig von der font-size desselben Elements.
  2. Der Prozentwert einer Eigenschaft bezieht sich auf den Wert einer Eigenschaft eines Vorfahrenelementes, z. B. ist ein Prozentwert für font-size abhängig von der font-size des Elternelements.
  3. Der Prozentwert einer Eigenschaft bezieht sich auf den Kontext der Formatierung, z. B. ist ein Prozentwert für width oder height abhängig von der Breite oder Höhe des umschließenden Elements.

Umrechnung:

Mit der Einführung von CSS 2.1 wurden die Umrechnung von Prozentwerten und von relativen Längenwerten vereinheitlicht. Sie folgt jetzt einem neuen vierstufigen Ablauf, der im Folgenden dargestellt ist:

Spezifizierter Wert → Berechneter Wert → Verwendeter Wert → Aktueller Wert.

  1. Jeder Eigenschaft wird zunächst, basierend auf den Deklarationen aller zutreffenden Stylesheets, mit Hilfe der folgenden Prozedur ein Spezifizierter Wert zugeordnet. Dies ist der Wert, der vorgegeben ist:
    1. Wenn die Kaskade einen Wert ergibt, verwende diesen.
    2. Bei der Vererbung von einem Elternelement nutze den Berechneten Wert des Elternelementes.
    3. Anderenfalls verwende den Ausgangswert der Eigenschaft.
  2. Daraus wird anschließend mit Hilfe der Kaskade der Berechnete Wert abgeleitet.
    1. Wenn der spezifizierte Wert nicht inherit ist, dann wird der berechnete Wert so ermittelt, wie es unter dem Stichwort 'Berechneter Wert' in der Beschreibung jeder Eigenschaft festgelegt ist.
    2. Im Falle der Vererbung ist der vom Elternelement ererbte Wert gleichzeitig der spezifizierte Wert und der berechnete Wert.
    Der berechnete Wert ist der Wert, der an die Kindelemente weitervererbt wird. Deshalb existiert er auch dann, wenn die zugehörige Eigenschaft auf ein Element nicht anwendbar ist. Berechnete Werte können auch voneinander abhängig sein, beispielsweise wenn es sich um eine Prozentangabe handelt.
  3. Ist ein Wert nicht direkt in Pixel angegeben, sondern in Prozent, Ems, Exs oder anderen relativen Einheiten, wird dieser Wert im nächsten Schritt in Pixel umgerechnet. Das Ergebnis ist der Verwendete Wert. Dies ist der endgültige absolute Wert, der grundsätzlich an das eigentliche Layout angebracht wird.
  4. In einigen Fällen ist der verwendete Wert auf Grund äußerer Umstände aber noch nicht zur Benutzung geeignet. Deshalb muss als vierter Schritt noch ein Rundungsverfahren nachgeschaltet werden. Dies ist zum Beispiel bei der Bildschirmausgabe der Fall, wo zur Darstellung in Pixeln ganze Zahlen benötigt werden, oder bei Systemen, die nur eine begrenzte Anzahl von Farben darstellen können. Das Ergebnis ist der Aktuelle Wert, der angewendet wird, wenn alle nötigen Rundungen durchgeführt wurden.

Beispiel zur Vererbung von Prozentwerten

Ein div-Container ist mit dem Wert 50% für die Breite deklariert. Darin befindet sich ein Absatz, der den Breitenwert erbt:

<div style="width:50%;"> <p style="width:inherit;"> ... </p> </div>

Bei einer Bildschirmbreite von 1152 Pixel berechnet der Browser die Breite des div-Containers mit 576 Pixel. Dies ist der berechnete Wert, der an den Absatz weitervererbt wird. Der Prozentsatz wird nicht vererbt. Der Absatz ist deshalb ebenfalls 576 Pixel breit, nicht 288 Pixel. (padding, border und margin werden natürlich berücksichtigt.)

Verwendung

Für jede Eigenschaft ist individuell definiert, auf welche der drei erlaubten Arten ein Prozentwert dort angewendet wird. Die folgende Tabelle ist eine Zusammenfassung für alle Eigenschaften, die Prozentwerte zulassen.

Eigenschaften Bezugswert Erläuterungen
background-color #fff oder rgb(255,255,255) Es müssen drei Werte angegeben werden im Format rgb(xx%,xx%,xx%).
background-position Box des zugehörigen Elements Ein oder zwei Werte können angegeben werden. Sie gelten für die Lage der UrsprungsGrafik innerhalb der padding-Kante der Box.
bottom Höhe des umschließenden Blocks. Wenn die Höhe des umschließenden Blocks nicht explizit gegeben ist, wird der Prozentwert wie auto gewertet. Negative Werte sind erlaubt.
color #fff oder rgb(255,255,255) Es müssen drei Werte angegeben werden im Format rgb(xx%,xx%,xx%).
font-size Der berechnete Wert der font-size des Elternelementes. Bei Umrechnungen aus Prozentwerten soll die Skaliertabelle für absolute Werte unberücksichtigt bleiben. Negative Werte sind nicht erlaubt.
height Höhe des umschließenden Blocks. Wenn die Höhe des umschließenden Blocks nicht explizit spezifiziert wurde, d. h. wenn sie von der Höhe des Inhalts abhängt, werden Prozentwerte wie auto interpretiert. Negative Werte sind nicht erlaubt.
left Breite des umschließenden Blocks. Negative Werte sind erlaubt.
line-height Berechneter Wert der font-size des Elements. Negative Werte sind illegal.
margin Breite des umschließenden Blocks. Wenn die Breite des umschließenden Blocks von der Breite des aktuellen Elements abhängt, dann ist das Ergebnislayout undefiniert. Negative Werte sind erlaubt.
margin-[t|r|b|l] Breite des umschließenden Blocks. Wenn die Breite des umschließenden Blocks von der Breite des aktuellen Elements abhängt, dann ist das Ergebnislayout undefiniert. Für margin-top und margin-bottom ist bei Druckausgabe (auch für die Vorschau auf dem Bildschirm) die Seitenhöhe, d. h. die Höhe des umschließenden Blocks, die maßgebliche Größe. Negative Werte sind erlaubt.
max-height Höhe des umschließenden Blocks. Die Höhe des umschließenden Blocks muss explizit definiert sein. Ist das nicht der Fall, wird der deklarierte Wert wie none interpretiert. Negative Werte sind nicht erlaubt.
max-width Breite des umschließenden Blocks. Negative Werte sind nicht erlaubt.
min-height Höhe des umschließenden Blocks. Die Höhe des umschließenden Blocks muss explizit definiert sein. Ist das nicht der Fall, wird der deklarierte Wert wie 0 interpretiert. Negative Werte sind nicht erlaubt.
min-width Breite des umschließenden Blocks. Negative Werte sind nicht erlaubt.
padding Breite des umschließenden Blocks. Wenn die Breite des umschließenden Blocks von der Breite des aktuellen Elements abhängt, dann ist das Ergebnislayout undefiniert. Negative Werte sind nicht erlaubt.
padding-[t|r|b|l] Breite des umschließenden Blocks. Wenn die Breite des umschließenden Blocks von der Breite des aktuellen Elements abhängt, dann ist das Ergebnislayout undefiniert. Negative Werte sind nicht erlaubt.
pause Invertierter Wert der Sprechgeschwindigkeit (speech-rate). Der invertierte Wert entspricht der Wortlänge, diese wird mit 100% gleichgesetzt.
pause-after Invertierter Wert der Sprechgeschwindigkeit (speech-rate). Der invertierte Wert entspricht der Wortlänge, diese wird mit 100% gleichgesetzt.
pause-before Invertierter Wert der Sprechgeschwindigkeit (speech-rate). Der invertierte Wert entspricht der Wortlänge, diese wird mit 100% gleichgesetzt.
right Breite des umschließenden Blocks. Negative Werte sind erlaubt.
text-indent Breite des umschließenden Blocks. (Keine.)
top Höhe des umschließenden Blocks. Wenn die Höhe des umschließenden Blocks nicht explizit gegeben ist, wird der Prozentwert wie auto gewertet. Negative Werte sind erlaubt.
vertical-align line-height des Elements. Positive Werte heben, negative Werte senken die Box um den angegebenen Wert. 0% hat die gleiche Wirkung wie baseline.
volume Ererbter Wert. Der berechnete Wert wird auf 100% zurückgesetzt, wenn er größer als 100 ist und auf 0% zurückgesetzt, wenn er negativ ist.
width Breite des umschließenden Blocks. Wenn die Breite des umschließenden Blocks von der Breite des aktuellen Elements abhängt, dann ist das Ergebnislayout undefiniert. Negative Werte sind nicht erlaubt.


TOP


Home|Vollreferenz|Schnellreferenz|Grundlegendes|Tutorials & Artikel|Quiz|Allgemeines

© Copyright All Contents 2002-2017 K. Langenberg.
Commercial Use prohibited.


Notizen: