CSS/Wertvarianten

Aus SELFHTML-Wiki
< CSS
Wechseln zu: Navigation, Suche

Ein Wert, der einer Eigenschaft zugewiesen wird, ist nicht unveränderlich. Tatsächlich werden während der Verarbeitung eines Stylesheets verschiedene spezialisierte Werte, Wertvarianten aus dem festgelegten Wert gebildet.

Inhaltsverzeichnis

[Bearbeiten] Der festgelegte Wert

Als „festgelegt“ bzw. „spezifiziert“ wird ein Wert bezeichnet, wenn er einer Eigenschaft zugeordnet wurde. Die Zuordnung kann während der Kaskade, durch das Prinzip der Vererbung oder durch die Eigenschaft selbst erfolgen. Der Ablauf stellt sich wie folgt dar:

  • Wird während der Kaskade ein Wert für die Eigenschaft gefunden, so wird dieser Wert verwendet. Das bedeutet, dass der verwendete Wert im Browser-, Autoren- oder Benutzer-Stylesheet definiert wurde.
  • Anderenfalls wird, wenn die Eigenschaft vererbt wird und es sich bei dem Element nicht um das Wurzelelement handelt, der für das Elternelement berechnete Wert derselben Eigenschaft verwendet (siehe Vererbung).
  • Ansonsten gilt der Standardwert der Eigenschaft als festgelegter Wert.
Beispiel
font-size: 1.2em;
In diesem Beispiel enthält die Deklaration der Eigenschaft font-size den Wert 1.2em. Der festgelegte Wert lautet also „1.2em“.

[Bearbeiten] Der berechnete Wert

Für jeden Wert wird während der Kaskade der „berechnete Wert“ gebildet. Ein berechneter Wert ist eine genauere Variante des festgelegten Werts.

Relative Werte wie bestimmte Längenangaben (außer Prozentwerte) und Pfadangaben werden dabei in absolute Werte umgewandelt.

Beispiel
background-image: url('bilder/hintergrund.png'); }
In diesem Beispiel wird die Eigenschaft background-image deklariert. Der berechnete Wert dieser Eingenschaft kann z.B. url('http://www.example.org/bilder/hintergrund.png') lauten.

Bei einzelnen Eigenschaften sind spezielle Regeln für die Findung des berechneten Wertes definiert.

[Bearbeiten] Der benutzte Wert

Die berechneten Werte entstehen während der Kaskade, bevor die Darstellung erfolgt. Dies hat zur Folge, dass sich nicht aus allen festgelegten Werten ein spezialisierter berechneter Wert bilden lässt, z.B. aus Prozentangaben, da die Basis dafür erst während der Darstellung berechnet wird. Während der Darstellung werden daher „benutzte“ bzw. „verwendete“ Werte ermittelt.

Beispiel
p { width: 80%; }
In diesem Beispiel wird dem p-Element eine Breite von 80% zugewiesen. Während der Kaskade ist es nicht möglich die Breite des Elternelements von p herauszufinden. Der berechnete Wert von width beträgt also 80%. Erst nach der Kaskade, wenn die Darstellung erfolgt, kann der benutze Wert ermittelt werden. Besitzt das Elternelement von p eine Breite von 220 Pixel, beträgt der benutze Wert von p 176 Pixel (220 Pixel mal 0,8 ergibt 176 Pixel).

[Bearbeiten] Der tatsächliche Wert

Durch die Einschränkungen, die einem Ausgabemedium innewohnen können, ist es manchmal nicht möglich, dass der benutzte Wert verwendet wird. Beispielsweise können auf einem Bildschirm keine Pixelwerte mit Dezimalstellen dargestellt werden. Der Browser muss hier einen Annäherungswert an den benutzten Wert ermitteln. Dieser Wert wird als „tatsächlicher“ Wert bezeichnet.

Beispiel
<div id="information">
  <p class="kleingedrucktes">Kleine Information.</p>
</div>
#information     { font-size: 16px; }
.kleingedrucktes { font-size: .8em; }
In diesem Beispiel wird die Schriftgröße des div-Elements auf 16 Pixel festgesetzt. Bei Elementen mit der Klasse kleingedrucktes soll die Schriftgröße nur 80% der normalen Schriftgröße betragen. Der Browser errechnet daher den berechneten und benutzten Wert 12,8 Pixel (16 Pixel mal 0,8 ergibt 12,8 Pixel). Auf einem Ausgabemedium auf dem nur ganzzahlige Pixelwerte dargestellt werden können, rundet der Browser den berechneten Wert auf und bildet so den tatsächlichen Wert: 13 Pixel.
Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML