<percentage>

Übersicht

Der <percentage> CSS Datentyp repräsentiert einen Prozentwert. Viele CSS Eigenschaften akzeptieren Prozentwerte, oft um Größen bezüglich Elternobjekten zu definieren. Prozentwerte werden durch einen <number> Wert unmittelbar gefolgt von einem Prozentzeichen % angegeben. Wie bei allen Einheiten in CSS wird kein Leerzeichen zwischen der Zahl und dem '%' geschrieben.

Viele Längeneigenschaften verwenden Prozentwerte, wie width, margin und padding. Prozentwerte können auch in font-size vorkommen, wo die Größe des Texts direkt von der Textgröße des Elternelements abhängt.

Hinweis: Nur berechnete Werte werden vererbt. D. h. auch wenn ein Prozentwert für eine Elterneigenschaft verwendet wird, wird für die vererbte Eigenschaft ein realer Wert, wie beispielsweise eine Breite in Pixeln für einen <length> Wert, verwendet, nicht der Prozentwert.

Interpolation

Werte des <percentage> CSS Datentyps können interpoliert werden, um Animationen zu erlauben. In diesem Fall werden sie als reale Fließkommazahlen interpoliert. Die Geschwindigkeit der Interpolation wird durch die Timingfunktion bestimmt, die mit der Animation verbunden ist.

Beispiele

<div style="background-color:#0000FF;">
  <div style="width:50%;margin-left:20%;background-color:#00FF00;">Breite: 50%, linker Außenabstand: 20%</div>
  <div style="width:30%;margin-left:60%;background-color:#FF0000;">Breite: 30%, linker Außenabstand: 60%</div>
</div>

Ergibt:

<div style="font-size:18px;">
  Text in Normalgröße (18px)
  <span style="font-size:50%;">50%</span>
  <span style="font-size:200%;">200%</span>
</div>