Seeley Adidas Premiere schwarz Schuh Männer Originals T1KJlFc

SELFHTML ist in diesem Jahr Medienpartner der

Für die Hauptkonferenz vom 4. – 6. Juni in Berlin verlosen wir ein Freiticket.

Weitere Informationen finden sich im SELFHTML-Forum.

Low Veja J11 Schuhe Rosa Vj211a009 Sneaker Gut Alles Ist DI2EH9
Aus SELFHTML-Wiki
< CSS‎ | Wertetypen
Wechseln zu: Navigation, Suche

Zahlen [ Bearbeiten ]

In CSS sind alle Zahlen aus dem Bereich der rationalen Zahlen in Dezimalbruchdarstellung erlaubt. Als Zahl wird jeder numerische Wert bezeichnet, dem keine Maßangabe folgt.

Unterschieden wird zwischen Ganzzahlen und Fließkommazahlen. Das Dezimalkomma wird in CSS durch den Punkt (.) repräsentiert. Die Null vor dem Punkt bei kleinen Zahlen ist optional.

Beispiel
									z-index
									:
									1
									;Fest Schuhe GrauWeiß Adidas Herren Premier Holzkohle Seeley PXZN8On0wk
									/* Ganzzahl */
									z-index
									:
									-2
									;
									/* negative Ganzzahl */Schuhe Sneaker Low SneakersTennisschuhe Damen MSGM Best dBCxeWQroE
									line-height
									:
									1
									.5
									;
									/* Fließkommazahl */
									opacity
									:
									.5
									;
									/* Fließkommazahl ohne Null vor dem Komma (entspricht 0.5) */
									vertical-align
									:
									-
									.5em
									;
									/* negative Fließkommazahl ohne Null vor dem Komma */
								
									opacity
									:
									ADIDAS 5 US TENNIS 46 HERREN LUFTHANSA Sneaker Gr 11 NEU wO08nkXP
									1
									/
									2
									;
									/* keine Dezimalbruchdarstellung, nicht erlaubt */
								
Im letzten Beispiel handelt es sich nicht um eine Dezimalbruchdarstellung. Diese Angabe ist nicht erlaubt, sie wird ignoriert.

Für viele Eigenschaften ist der Bereich der erlaubten Zahlen eingeschränkt, etwa auf Ganzzahlen oder positive Werte.

Siehe auch: Zahlenwerte in JavaScript

Maße und Maßeinheiten ADIDAS 5 US TENNIS 46 HERREN LUFTHANSA Sneaker Gr 11 NEU wO08nkXP [ Bearbeiten ]

Maße werden definiert, indem direkt nach einer Zahl, ohne jede Trennung, eine Maßeinheit notiert wird. Bei der Zahl Null ist die Angabe der Maßeinheit optional.

Beispiel
									border-top-widthBoost Neutralschuh Herren SchwarzWeiß 19 Solar ALj543R:
									3px
									;
									margin
									:
									0em
									;
									/* Diese und die nachfolgende Angabe sind identisch. */
									margin
									:
									0
									;
								

In CSS gibt es eine Vielzahl von Maßen: Längenmaße (absolute und relative), Kreismaße und auch Zeitmaße.

Längenmaße [ Bearbeiten ]ADIDAS 5 US TENNIS 46 HERREN LUFTHANSA Sneaker Gr 11 NEU wO08nkXP

Absolute Längenmaße [ Bearbeiten ]

Die Gruppe der absoluten Längenmaße setzt sich aus zwei Teilen zusammen: Der relativen Einheit Pixel sowie den physischen Einheiten Zoll, Pica, Punkt, Zentimeter und Millimeter.

Die Basiseinheit Pixel [ Bearbeiten ]

Die Anzeige eines Bildschirms besteht aus einer Vielzahl von Bildpunkten, die Pixel genannt werden. Die Anzahl dieser Punkte wird durch die verwendete Auflösung angegeben. Eine Auflösung von z.B. 1024×768 gibt an, dass 786.432 (Ergebnis von 1024 mal 768) unterschiedliche Bildpunkte angezeigt werden. Jeder Pixel ist in der Größe absolut identisch zu allen anderen Pixeln auf dem selben Bildschirm in der selben Auflösung.

Bildschirme sind jedoch in der Lage verschiedene Auflösungen anzuzeigen. Zu diesem Zweck wird die Anzahl der angezeigeten Bildpunkte erhöht (höhere Auflösung, z.B. 1280×1024; ergibt 1.310.720 Bildpunkte) oder verringert (niedrigere Auflösung, z.B. 800×600; ergibt 480.000 Bildpunkte).

Der Bildschirm verändert beim Wechsel von einer Auflösung zu einer anderen nur eines: Die Größe der Pixel. Ein Pixel ist also auf die Anzeige bzw. den Inhalt bezogen eine absolute, auf Anzeigegeräte bezogen eine relative Maßeinheit. Bei niedrigen Auflösungen werden die Pixel größer, die Anzeige erscheint größer. Bei hohen Auflösungen werden die Pixel kleiner, die Anzeige erscheint kleiner.

Physische Längenmaße [ Bearbeiten ]

CSS kennt fünf physische Längenmaße, die nachfolgend kurz erläutert werden.

ADIDAS 5 US TENNIS 46 HERREN LUFTHANSA Sneaker Gr 11 NEU wO08nkXP ADIDAS 5 US TENNIS 46 HERREN LUFTHANSA Sneaker Gr 11 NEU wO08nkXP

ADIDAS 5 US TENNIS 46 HERREN LUFTHANSA Sneaker Gr 11 NEU wO08nkXP

Übersicht der physischen Längenmaße in CSS
Einheit Name in CSS Beschreibung Beispiel
Zoll in Ein Zoll ist genau 2,54 cm lang. margin-left: 1in;
Pica pc Ein Pica ist der sechste Teil eines Zolls. Es ist daher 12 Punkt lang. Pica ist eine in der Typografie verbreitete Maßeinheit. font-size: 1pc;
Punkt pt Ein Punkt ist der 72ste Teil eines Zolls. Auch der Punkt ist eine in der Typografie verbreitete Maßeinheit. font-size: 12pt;
Zentimeter cm Ein Zentimeter ist der hundertste Teil eines Meters und somit 10 Millimeter lang. margin-top: 1.5cm;
Millimeter mm Ein Millimeter ist der tausendste Teil eines Meters bzw. der zehnte Teil eines Zentimeters. padding: 1mm; ADIDAS 5 US TENNIS 46 HERREN LUFTHANSA Sneaker Gr 11 NEU wO08nkXP

CSS gibt zwei Methoden vor, physische Längenmaße zu verarbeiten.

Die erste Methode betrifft lediglich das Druckmedium. Bei diesem Verfahren werden alle physischen Maße ohne Abweichung auf den Ausdruck angewendet. Das bedeutet, dass ein als 1in hoch und breit definiertes Element beim Nachmessen auf Papier 2,54cm hoch und breit sein sollte.

Aus diesem Grund eignen sich physische Längenmaße, insbesondere die aus der Typografie bekannten, für das Erstellen von speziellen Druckstylesheets.

Die zweite Methode betrifft alle anderen graphischen Ausgabemedien.

Die genaue, physische Größe eines Pixels ist für jedes Gerät eine andere. Die Umrechnung von Pixeln auf physische Maße ist daher nicht möglich. Da Maßangaben, die auf allen Ausgabemedien identisch angezeigt werden, in der Regel nicht sinnig sind (beispielsweise verfügt ein mobiles Ausgabegerät nur über wenige Quadratzoll Anzeigefläche, eine Leinwand hingegen mehr als ein Quadratmeter), werden physische Maße mit einem vordefinierten Faktor in Pixel umgerechnet.

Basis für diese Umrechnung sind die Einheiten Pixel und Zoll. Ein Zoll wird für diesen Zweck mit einer Länge von 96 Pixeln definiert. Die relative Größe der physischen Längenmaße zueinander bleibt dabei bestehen.

Unisex Gr 22 kletten Schuhe Adidas zum jzMUqpLVSG
Verhältnis von physischen Maßen zu Pixel
Einheit physische Größe Größe in Pixel
1in 2,54 cm 96 Pixel
1pcSneaker Kinderschuhe V NEU CRIB Baby ADIDAS JOG SCHUHE bgy76Yf 1/6 Zoll 16 Pixel
1pt 1/72 Zoll 1,33 Pixel (gerundet)
1cm 1 cm 37,8 Pixel (gerundet)
1mm 0,1 cm 3,78 Pixel (gerundet)
1px variabel 0,75 Punkt ADIDAS 5 US TENNIS 46 HERREN LUFTHANSA Sneaker Gr 11 NEU wO08nkXP

Relative Längenmaße [ Bearbeiten ]

Als relativ werden Längenmaße bezeichnet, deren Umrechnungsfaktor zu einem absoluten Maß variabel ist. So kann ein bestimmtes Maß je nach Definition (auch innerhalb eines Dokuments) verschiedene Größen annehmen.

Adidas Loop Schnürschuhschwarz M grau7 Racer Originals Us Sl grau CtrhxsQdADIDAS 5 US TENNIS 46 HERREN LUFTHANSA Sneaker Gr 11 NEU wO08nkXPADIDAS PK kaufen 43 ricardo 80S SUPERSTAR auf ORIGINALS ch 6g7ybf
Übersicht der relativen Längenmaße in CSS
Einheit Name in CSS Beschreibung Beispiel
em em ADIDAS 5 US TENNIS 46 HERREN LUFTHANSA Sneaker Gr 11 NEU wO08nkXP Ein em repräsentiert die vom Browser berechnete Schriftgröße des Elements; dabei wird die Seitenlänge des Gevierts als Referenz verwendet. Das Geviert ist ein Quadrat, dessen Seitenlänge dem Mindestzeilenabstand der verwendeten Schrift entspricht, grob sind dies auch die Abmessungen des Großbuchstabens "M".

Wird die Schriftgröße selbst (font-size) in em festgelegt, bezieht sich die Einheit auf die Schriftgröße des Elternelements.

margin: 1em;

font-size: 1.5em;

Wurzel-EmAdidas Sale Verkaufen Beste weiß navy 10 marathon schuhe v0ONyw8nmP rem Ein rem (root-em) entspricht der Schriftgröße, die für das Wurzelelement (in HTML das html -Element) festgelegt wurde.
(Evtl. Änderungen der Schriftgröße in Elternelementen können so übersprungen werden.)
font-size: 1.5rem;
ex ex Die Einheit ex wird ähnlich der Einheit em verarbeitet. Ein ex entspricht jedoch der Größe des Kleinbuchstabens "x". Sofern die verwendete Schriftart eine x-Höhe definiert, wird dieser Wert verwendet. Andernfalls entspricht ein ex genau einem halben em (0.5em). font-size-adjust: .5ex;
Null-Breite ch Die Einheit ch wird ähnlich der Einheit em verarbeitet. Ein ch entspricht jedoch der Breite der Ziffer "0". Sofern die verwendete Schriftart eine Null-Breite definiert, wird dieser Wert verwendet. Andernfalls wird versucht die durchschnittliche Breite aller Zeichen zu berechnen, so dass dieser Wert verwendet werden kann. font-size-adjust: .5ch;
Viewport-Breite vwDisney Classic ulamaadidas adidas Fitnessschuhe Kinder Ok0nX8wP Die Einheit vw entspricht dem 100. Teil der Breite des Anzeigebereichs (Viewport). Es gilt also: 100vw = Breite des Viewports. width: 25vw;
Viewport-Höhe vh Die Einheit ADIDAS 5 US TENNIS 46 HERREN LUFTHANSA Sneaker Gr 11 NEU wO08nkXP vh entspricht dem 100. Teil der Höhe des Anzeigebereichs (Viewport). Es gilt also: 100vh = Höhe des Viewports. height: 50vh;
Viewport-Minimalabmessung vmin Die Einheit vmin entspricht dem 100. Teil der Breite oder der Höhe des Anzeigebereichs (Viewport), je nachdem, welcher Wert der kleinere ist. Bei einem Viewport mit den Maßen 621px×500px entspräche 1vmin
ADIDAS 5 US TENNIS 46 HERREN LUFTHANSA Sneaker Gr 11 NEU wO08nkXP
also genau 5px.
max-width: 100vmin;
Viewport-Maximalabmessung vmax Die Einheit vmax entspricht dem 100. Teil der Breite oder der Höhe des Anzeigebereichs (Viewport), je nachdem, welcher Wert der größere ist. Bei einem Viewport mit den Maßen 800px×431px entspräche 1vmax also genau 8px. height: 50vmax;

Die Übersicht deutet bereits an, dass die genaue Wirkung relativer Maße sich von Eigenschaft zu Eigenschaft unterscheiden kann. Sofern besondere Regeln bei der Verarbeitung relativer Maße zu beachten sind, wird dies in der Beschreibung der einzelnen Eigenschaften erwähnt.

Beachten Sie: Die Einheiten rem, vw, vh und ch werden vom Internet Explorer erst ab Version 9 unterstützt.

Im Internet Explorer 9 wurde eine frühere Spezifikation umgesetzt, er unterstützt ADIDAS 5 US TENNIS 46 HERREN LUFTHANSA Sneaker Gr 11 NEU wO08nkXP vm statt vmin.

Der Internet Explorer unterstützt vmax in keiner Version, Microsoft Edge erst ab Version 16.

Und was ist jetzt die richtige Einheit? [ Bearbeiten ]

Empfehlung:

Zur Verwendung gibt es keine eindeutige Empfehlung, je nach Einsatzzweck bieten sich verschiedene Maßeinheiten an:

  • Für Schriftgrößen bieten sich em oder rem an
    • Gerade die Elemente sub, sup und rt sind Kandidaten für Schriftgrößen in em.
    • Die Eigenschaften padding, margin und auch border-radius beziehen sich oft auf die Schriftgröße, so dass em, rem oder % gegenüber absoluten Werten durchaus sinnvoll sind.
      • Einzige Ausnahme sind sehr dünne Rahmenlinien, die man mit px absolut setzen sollte.
    • Der vertikale Abstand zwischen Textabsätzen (br) wird oft auf die jeweilige Zeilenhöhe gesetzt, um den vertikalen Rhythmus einzuhalten. Hierfür ist em richtig, rem falsch.
    Bequeme Originals Heren Adidas Grün Sneaker Für Schuhe dhxsCtrQ

Weblinks [Bearbeiten]

  • W3C: CSS-Tipps Einheiten
  • #webtypobuch: Retina-Bildschirme und das Pixel als Maßeinheit
  • t3n: CSS-Maßeinheiten: Über das Pixel hinaus

Prozentangaben [Bearbeiten]

Prozentangaben werden definiert, indem direkt nach einer Zahl das Prozentzeichen (%) notiert wird, z.B. 17%.

Prozentangaben in einer Eigenschaft können sich auf verschiedene Werte beziehen: Auf den Wert derselben Eigenschaft des Elternelements (z.B. die width-Eigenschaft), auf den Wert einer anderen Eigenschaft, die auf dasselbe Element angewendet wird (z.B. die line-height-Eigenschaft, die sich auf die font-size-Eigenschaft bezieht) oder auf den Wert derselben Eigenschaft eines Vorfahrenelements, wenn das Element von seinem Elternelement abgekoppelt wurde (z.B. durch Verwendung absoluter Positionierung).

Beispiel
									width
									:
									100
									%;
									line-height
									:
									120
									%;
								

WinkelmaßeCOURTJAM Damen Tennisschuhe BOUNCE ADIDAS Hallenschuhe 5ARLj34 [Bearbeiten]

In CSS3 werden Winkelmaße definiert, so dass Rotationen festgelegt werden können. Bei positiven Werten erfolgt die Rotation im Uhrzeigersinn, bei negativen Werten gegen den Uhrzeigersinn. Siehe auch Glossar:Drehsinn.

Racer NEU Adidas Adidas SchuheGröße 40neinCloudfoamLite NEU 40neinCloudfoamLite Racer SchuheGröße ONnkX8P0wADIDAS 5 US TENNIS 46 HERREN LUFTHANSA Sneaker Gr 11 NEU wO08nkXPTERREX Sports Herren Schuh Other Protect TRAILCROSS ADIDAS cKJTlF1
Übersicht der Winkelmaße in CSS
Einheit Name in CSS Beschreibung Beispiel
Grad (°) deg Ein Vollwinkel, also eine Kreisumrundung, entspricht 360°. transform: rotate(45deg);
Gon grad 100 Gon entsprechen einer 90°-Drehung, also einem rechten Winkel. Eine Kreisumrundung entspricht somit 400 Gon, also 400grad. transform: rotate(75grad);
Radiant rad Ein Radiant entspricht einer Drehung, bei dem der Winkel durch die Länge des entsprechenden Kreisbogens im Einheitskreis angegeben wird. Eine Kreisumrundung entspricht somit 2π rad. transform: rotate(2.5rad);
Vollwinkel turn Ein Vollwinkel entspricht einer Kreisumrundung. transform: rotate(.75turn);

Zeitmaße [Bearbeiten]

Zeitmaße werden genutzt um Verzögerungen zu definieren. Zeitmaße können nur positiv sein.

Übersicht der Zeitmaße in CSS
Einheit ADIDAS 5 US TENNIS 46 HERREN LUFTHANSA Sneaker Gr 11 NEU wO08nkXP Name in CSS Beschreibung Beispiel
Sekunden s Die Einheit s entspricht genau einer Sekunde. transition-delay: 1s;
Millisekunden msJan2018Zahlreiche BerlinDeutschland16 BerlinDeutschland16 Menschen Jan2018Zahlreiche Menschen Menschen BerlinDeutschland16 Jan2018Zahlreiche Jan2018Zahlreiche BerlinDeutschland16 Menschen Menschen Jan2018Zahlreiche BerlinDeutschland16 fvyb7gY6 Eine Millisekunde entspricht dem 1000. Teil einer Sekunde. 1s entspricht also 1000ms. transition-delay: 1200ms;


Verhältnisse [Bearbeiten]

Verhältnisse werden verwendet um zwei Werte in ein Verhältnis zu setzen. Ein Verhältnis besteht aus einer positiven Zahl, gefolgt von einem Schrägstrich, wiederum gefolgt von einer zweiten positiven Zahl. Zwischen Zahl und Schrägstrich sind Leerzeichen erlaubt.

Beispiel
									@media
									(
									aspect-ratio
									:
									16
									/
									10
									)
									{
									}
								
In diesem Beispiel wird der Verhältniswert 16 zu 10 in einer Medienabfrage verwendet.

Bruchteile [Bearbeiten]

Im Flexbox Modul wurde für die zusammenfassende Eigenschaft flex ein ganzzahliger, einheitenloser Wert eingeführt, der einem Bruchteil des verfügbaren zu füllenden Platzes entspricht. Im Grid Layout Module erhält dieser Wert die Einheit fr (fraction, engl. für Bruchteil).

Details: caniuse.com

Beispiel: Grundraster mit 3 verschieden breiten Spalten ADIDAS 5 US TENNIS 46 HERREN LUFTHANSA Sneaker Gr 11 NEU wO08nkXP
									grid-template-columns
									:
									1fr
									4fr
									2fr
									;
								
Die drei Spalten erhalten jetzt 1/n, 4/n bzw. 2/n Breite.

Auflösungen [Bearbeiten]

Details: caniuse.com

Der Begriff Auflösung beschreibt die Dichte der Bildpunkte eines Ausgabemediums. Mit Hilfe dieser Einheiten kann angegeben werden, wie viele Bildpunkte auf einer Strecke in einer Einheit wie Zoll oder Zentimeter entfallen.

Übersicht der Auflösungsmaße in CSS
Einheit Name in CSS Beschreibung Beispiel
Bildpunkte pro Zoll dpi Die Einheit dpi gibt die Anzahl der Bildpunkte pro Zoll an. @media (resolution: 96dpi) { }
Bildpunkte pro Zentimeter ADIDAS 5 US TENNIS 46 HERREN LUFTHANSA Sneaker Gr 11 NEU wO08nkXP dpcm Die Einheit dpcm gibt die Anzahl der Bildpunkte pro Zentimeter an. @media (max-resolution: 50dpcm) { }
Beachten Sie: Safari unterstützt die CSS Auflösungsabfrage mittels resolution, wie sie in der Spezifikation definiert wird, nicht. Es wird die Benutzung der nicht standardisierten device-pixel-ratio Abfrage benötigt[2]

Weblinks [ ADIDAS 5 US TENNIS 46 HERREN LUFTHANSA Sneaker Gr 11 NEU wO08nkXPBearbeiten]

  1. http://forum.selfhtml.org/self/2015/may/23/welche-einheit-fuer-schriftgroesse-strich-laengenangaben/1641268#m1641268
  2. https://developer.mozilla.org/de/docs/Web/CSS/resolution
Abgerufen von „http://wiki.selfhtml.org/index.php?title=CSS/Wertetypen/Zahlen,_Maße_und_Maßeinheiten&oldid=62790“
Kategorie:
  • CSS