Numerische Datentypen

Jede CSS-Deklaration besteht aus einem Eigenschafts-/Wertpaar. Der Wert kann je nach Eigenschaft verschiedene Datentypen umfassen, wie zum Beispiel eine einzelne Zahl, ein Schlüsselwort, eine Funktion oder eine Kombination verschiedener Typen; einige Werte haben Einheiten, während andere dies nicht tun. Numerische Datentypen umfassen <integer>, <number>, <dimension> und <percentage> Werte. Dieser Leitfaden bietet einen Überblick über numerische Datentypen. Weitere detaillierte Informationen finden Sie auf der Seite für jeden Werttyp.

Ganzzahlen

Eine Ganzzahl ist eine oder mehrere Dezimalstellen, 0 bis 9, wie zum Beispiel 1024 oder -55. Eine Ganzzahl kann durch ein + oder - Symbol vorangestellt werden, ohne Leerzeichen zwischen dem Symbol und der Ganzzahl.

Zahlen

Ein <number> repräsentiert eine reelle Zahl, die möglicherweise einen Dezimalpunkt mit einem Bruchteil enthält oder nicht, zum Beispiel 0.255, 128 oder -1.2. Zahlen können auch durch ein + oder - Symbol vorangestellt sein.

Dimensionen

Ein <dimension> ist ein <number>, dem eine Einheit angehängt ist, zum Beispiel 45deg, 100ms oder 10px. Der angehängte Einheitenbezeichner ist nicht case-sensitiv. Es gibt niemals ein Leerzeichen oder andere Zeichen zwischen der Zahl und dem Einheitenbezeichner: Das heißt, 1 cm ist nicht gültig.

CSS verwendet Dimensionen zur Spezifizierung von:

Diese werden in den folgenden Unterabschnitten behandelt.

Längeneinheiten

Wo eine Längeneinheit, auch bekannt als Länge, als Wert für eine Eigenschaft erlaubt ist, wird dies als <length> Typ beschrieben. Es gibt zwei Arten von Längen in CSS: relative und absolute. Relative Längeneinheiten spezifizieren eine Länge in Relation zu etwas anderem.

Es gibt zwei Arten von relativen Längen: schriftgrößenabhängige Längen und ansichtsportabhängige Längen. Diese kommen beide in zwei Arten vor. Schriftgrößenabhängige Längeneinheiten sind entweder lokal schriftgrößenabhängig oder wurzel schriftgrößenabhängig. Ansichtsportabhängige Längen sind entweder relativ zur Höhe oder Breite des Ansichtsports oder, wie im CSS Containment Modul definiert, relativ zu einem Container.

Lokal schriftgrößenabhängige Längen

Lokal schriftgrößenabhängige Längen sind relativ zur "lokalen" Schriftgröße oder Zeilenhöhe und spezifizieren eine Länge in Relation zu einer berechneten Größe eines Merkmals des Elements selbst oder relativ zum geerbten Wert des Elements im Fall einer Ringschleife, wie der em Wert für eine font-size Eigenschaft oder ein lh Wert für eine line-height Eigenschaft. Zum Beispiel ist em relativ zur Schriftgröße des Elements und ex ist relativ zur x-Höhe der Schrift des Elements.

Einheit	Relativ zu
`cap`	Großbuchstabenhöhe (die nominelle Höhe von Großbuchstaben) der Schrift des Elements.
`ch`	Durchschnittliche Zeichenweiterung eines schmalen Glyphs in der Schrift des Elements, dargestellt durch das "0" (NULL, U+0030) Glyph.
`em`	Schriftgröße der Schrift des Elements.
`ex`	x-Höhe der Schrift des Elements.
`ic`	Durchschnittliche Zeichenweiterung eines vollbreiten Glyphs in der Schrift des Elements, dargestellt durch das "水" (CJK Wasser-Ideogramm, U+6C34) Glyph.
`lh`	Zeilenhöhe des Elements.

Wurzel schriftgrößenabhängige Längen

Wurzel schriftgrößenabhängige Längen spezifizieren eine Länge in Relation zum Wurzelelement Vorfahren eines Elements, wie zum Beispiel <HTML> oder <SVG>. Zum Beispiel ist rem relativ zur Schriftgröße des Wurzelelements und rex ist die x-Höhe der Schrift des Wurzelelements.

Einheit	Relativ zu
`rcap`	Großbuchstabenhöhe (die nominelle Höhe von Großbuchstaben) der Schrift des Wurzelelements.
`rch`	Durchschnittliche Zeichenweiterung eines schmalen Glyphs in der Schrift des Wurzelelements, dargestellt durch das "0" (NULL, U+0030) Glyph.
`rem`	Schriftgröße der Schrift des Wurzelelements.
`rex`	x-Höhe der Schrift des Wurzelelements.
`ric`	Durchschnittliche Zeichenweiterung eines vollbreiten Glyphs in der Schrift des Wurzelelements, dargestellt durch das "水" (CJK Wasser-Ideogramm, U+6C34) Glyph.
`rlh`	Zeilenhöhe des Wurzelelements.

Ansichtsporteinheiten

Ansichtsporteinheiten spezifizieren eine Länge relativ zu den Dimensionen des Ansichtsports. Zum Beispiel ist vw relativ zur Breite des Ansichtsports und vh relativ zur Höhe des Ansichtsports.

Einheit	Relativ zu
`dvh`	1% der dynamischen Höhe des Ansichtsports.
`dvw`	1% der dynamischen Breite des Ansichtsports.
`lvh`	1% der großen Höhe des Ansichtsports.
`lvw`	1% der großen Breite des Ansichtsports.
`svh`	1% der kleinen Höhe des Ansichtsports.
`svw`	1% der kleinen Breite des Ansichtsports.
`vb`	1% der Größe des Ansichtsports in der Block-Achse des Wurzelelements.
`vh`	1% der Höhe des Ansichtsports.
`vi`	1% der Größe des Ansichtsports in der Inline-Achse des Wurzelelements.
`vmax`	1% der größeren Dimension des Ansichtsports.
`vmin`	1% der kleineren Dimension des Ansichtsports.
`vw`	1% der Breite des Ansichtsports.

Containereinheiten

Containereinheiten spezifizieren eine Länge relativ zu den Dimensionen eines Abfragecontainers. Zum Beispiel ist cqw relativ zur Breite des Abfragecontainers und cqh relativ zur Höhe des Abfragecontainers.

Einheit	Relativ zu
`cqb`	1% der Blockgröße eines Abfragecontainers
`cqh`	1% der Höhe eines Abfragecontainers
`cqi`	1% der Inline-Größe eines Abfragecontainers
`cqmax`	Der größere Wert von `cqi` oder `cqb`
`cqmin`	Der kleinere Wert von `cqi` oder `cqb`
`cqw`	1% der Breite eines Abfragecontainers

Absolute Längeneinheiten

Absolute Längeneinheiten sind an eine physische Länge gebunden: entweder ein Zoll oder ein Zentimeter. Viele dieser Einheiten sind daher nützlicher, wenn das Ausgabeformat ein festes Größenmedium ist, wie zum Beispiel Druck. Zum Beispiel ist mm ein physischer Millimeter, 1/10 eines Zentimeters.

Einheit	Name	Entspricht
`cm`	Zentimeter	1cm = 96px/2.54
`in`	Zoll	1in = 2.54cm = 96px
`mm`	Millimeter	1mm = 1/10 von 1cm
`pc`	Pica	1pc = 1/6 von 1in
`pt`	Punkt	1pt = 1/72 von 1in
`px`	Pixel	1px = 1/96 von 1in
`Q`	Viertelmillimeter	1Q = 1/40 von 1cm

Bei der Einbindung eines Längenwerts, wenn die Länge 0 ist, ist der Einheitenbezeichner nicht erforderlich. Andernfalls ist der Einheitenbezeichner erforderlich, nicht case-sensitiv und muss unmittelbar nach dem numerischen Teil des Wertes kommen, ohne Leerzeichen dazwischen.

Winkeleinheiten

Winkelwerte werden durch den Typ <angle> dargestellt und akzeptieren die folgenden Werte:

Einheit	Name	Beschreibung
`deg`	Grad	Ein Vollwinkel hat 360 Grad.
`grad`	Gon	Ein Vollwinkel hat 400 Gon.
`rad`	Radiant	Ein Vollwinkel hat 2π Radiant.
`turn`	Umdr.	Ein Vollwinkel hat 1 Umdrehung.

Zeiteinheiten

Zeitwerte werden durch den Typ <time> dargestellt. Wenn ein Zeitwert angegeben wird, ist der Einheitenbezeichner — s oder ms — erforderlich. Es akzeptiert die folgenden Werte.

Einheit	Name	Beschreibung
`ms`	Millisekunden	Eine Sekunde hat 1.000 Millisekunden.
`s`	Sekunden

Frequenzeinheiten

Frequenzwerte werden durch den Typ <frequency> dargestellt. Es akzeptiert die folgenden Werte.

Einheit	Name	Beschreibung
`Hz`	Hertz	Repräsentiert die Anzahl der Vorkommen pro Sekunde.
`kHz`	KiloHertz	Ein KiloHertz sind 1000 Hertz.

1Hz, was auch als 1hz oder 1HZ geschrieben werden kann, ist ein Zyklus pro Sekunde.

Flex-Einheiten

Flex-Einheiten werden durch den Typ <flex> dargestellt. Es akzeptiert den folgenden Wert.

Einheit	Name	Beschreibung
`fr`	Flex	Repräsentiert eine flexible Länge innerhalb eines Grid-Containers

Auflösungseinheiten

Auflösungseinheiten werden durch den Typ <resolution> dargestellt. Sie repräsentieren die Größe eines einzelnen Punkts in einer grafischen Darstellung, wie zum Beispiel einem Bildschirm, indem sie angeben, wie viele dieser Punkte in einen CSS-Zoll, Zentimeter oder Pixel passen. Es akzeptiert die folgenden Werte:

Einheit	Beschreibung
`dpcm`	Punkte pro Zentimeter.
`dpi`	Punkte pro Zoll.
`dppx`, `x`	Punkte pro px Einheit.

Prozentsätze

Ein <percentage> ist ein Typ, der einen Bruchteil eines anderen Wertes repräsentiert.

Prozentwerte sind immer relativ zu einer anderen Größe, zum Beispiel einer Länge. Jede Eigenschaft, die Prozentsätze zulässt, definiert auch die Größe, auf die sich der Prozentsatz bezieht. Diese Größe kann der Wert einer anderen Eigenschaft desselben Elements sein, der Wert einer Eigenschaft eines Vorfahrenelements, eine Messung eines umgebenden Blocks oder etwas anderes.

Zum Beispiel, wenn Sie die width einer Box als Prozentsatz angeben, bezieht sie sich auf den Prozentsatz der berechneten Breite des Elternteils der Box:

css

.box {
  width: 50%;
}

Mischung von Prozentsätzen und Dimensionen

Einige Eigenschaften akzeptieren eine Dimension, die entweder einer von zwei Typen sein könnte, zum Beispiel ein <length> oder ein <percentage>. In diesem Fall ist der erlaubte Wert in der Spezifikation als Kombinationseinheit detailliert angegeben, z.B. <length-percentage>. Andere mögliche Kombinationen sind wie folgt:

Spezielle Datentypen (in anderen Spezifikationen definiert)

Farbe

Der <color> Wert legt die Farbe eines Merkmal eines Elements fest (z.B. die Hintergrundfarbe) und ist im CSS Color Module definiert.

Bild

Der <image> Wert spezifiziert alle verschiedenen Typen von Bildern, die in CSS verwendet werden können und ist im CSS Image Values and Replaced Content Module definiert.

Position

Der <position> Typ definiert die 2D-Positionierung eines Objekts innerhalb eines Positionierungsbereichs, zum Beispiel eines Hintergrundbildes innerhalb eines Containers. Dieser Typ wird als background-position interpretiert und daher in der CSS Backgrounds and Borders Specification festgelegt.

Funktionale Notation

Funktionale Notation ist ein Wertetyp, der komplexere Typen repräsentieren oder spezielle Verarbeitung durch CSS aufrufen kann. Die Syntax beginnt mit dem Namen der Funktion, gefolgt von einer linken Klammer (, gefolgt von den Argument(en) der Notation, gefolgt von einer rechten Klammer ). Funktionen können mehrere Argumente enthalten, die ähnlich wie ein CSS-Eigenschaftswert formatiert sind.

Leerzeichen sind innerhalb der Klammern erlaubt, aber optional. (Siehe jedoch Hinweise zu Leerzeichen auf Seiten für min(), max(), minmax() und clamp() Funktionen.)

Einige alte Notationen, wie die alte Syntax für rgb(), rgba(), hsl() und hsla(), verwendeten Kommas, aber Kommas werden im Allgemeinen nur verwendet, um Elemente in einer Liste zu trennen. Wenn ein Komma verwendet wird, um Argumente zu trennen, sind Leerzeichen optional vor und nach dem Komma.

Die Spezifikation definiert auch die toggle() Funktion. Diese wurde bisher jedoch noch nicht implementiert.

Spezifikationen

Specification
CSS Values and Units Module Level 4