Jede Linie wird gedehnt, um den verbleibenden Raum auszufüllen .

In diesem Fall ist der Behälter 300pxhoch. Alle Boxen sind 50pxhoch, bis auf die zweite, die 100pxhoch ist.

Jede Zeile füllt nur den benötigten Platz . Sie bewegen sich alle zum Anfang der Querachse des Flexbox-Containers.

Jede Zeile füllt nur den benötigten Platz . Sie bewegen sich alle zum Ende der Querachse des Flexbox-Containers.

Jede Zeile füllt nur den benötigten Platz . Sie bewegen sich alle in Richtung der Mitte der Querachse des Flexbox-Containers.

Jede Zeile füllt nur den benötigten Platz . Der verbleibende Abstand wird zwischen den Zeilen angezeigt.

Jede Zeile füllt nur den benötigten Platz . Der verbleibende Platz wird gleichmäßig auf die Zeilen verteilt: vor der ersten Zeile, zwischen den beiden und nach der letzten.

Die Flexbox-Elemente werden am Anfang der Querachse ausgerichtet .

Standardmäßig ist die Querachse vertikal. Das heißt , die FlexBox Elemente werden ausgerichtet werden vertikal an der Oberseite .

Die Flexbox-Elemente werden am Ende der Querachse ausgerichtet .

Standardmäßig ist die Querachse vertikal. Dies bedeutet, dass die Flexbox-Elemente am _bottom vertikal ausgerichtet werden.

Die Flexbox-Elemente sind in der Mitte der Querachse ausgerichtet .

Standardmäßig ist die Querachse vertikal. Dies bedeutet, dass die Flexbox-Elemente vertikal zentriert werden .

Die Flexbox-Elemente werden an der Grundlinie der Querachse ausgerichtet .

Standardmäßig ist die Querachse vertikal. Dies bedeutet, dass sich die Flexbox-Elemente selbst ausrichten, damit die Grundlinie ihres Textes entlang einer horizontalen Linie ausgerichtet wird.

Die Flexbox-Elemente erstrecken sich über die gesamte Querachse .

Standardmäßig ist die Querachse vertikal. Dies bedeutet, dass die Flexbox-Elemente den gesamten vertikalen Raum ausfüllen.

Wenn der Container hat align-items: centerund das Ziel hat align-items: flex-start, befindet sich nur das Ziel am Anfang der Querachse.

Standardmäßig bedeutet dies , wird sie ausgerichtet werden , vertikal an der Oberseite .

Wenn der Container align-items: centerund das Ziel haben align-items: flex-end, befindet sich nur das Ziel am Ende der Querachse.

Standardmäßig bedeutet dies , wird sie ausgerichtet werden , vertikal an der Unterseite .

Wenn der Container align-items: flex-startund das Ziel haben align-items: center, befindet sich nur das Ziel in der Mitte der Querachse.

Standardmäßig bedeutet dies, dass es vertikal zentriert wird .

Wenn der Container align-items: centerund das Ziel haben align-items: baseline, befindet sich nur das Ziel an der Grundlinie der Querachse.

Standardmäßig bedeutet dies, dass es entlang der Grundlinie des Textes ausgerichtet wird.

Wenn der Container hat align-items: centerund das Ziel hat align-items: stretch, wird sich nur das Ziel entlang der gesamten Querachse erstrecken.

Die Animation wartet null Sekunden und startet somit sofort.

Mit dem Schlüsselwort können Sie Dezimalwerte in Sekunden verwendens .

Sie können mit dem Schlüsselwort Millisekunden anstelle von Sekunden verwenden ms.

Sie können negative Werte verwenden : Die Animation wird so gestartet, als ob sie bereits abgespielt worden wäre 500ms.

Die Animation wird vorwärts abgespielt . Wenn es das Ende erreicht hat, beginnt es beim ersten Keyframe von vorne.

Die Animation wird rückwärts abgespielt : beginnt am letzten Keyframe und endet am ersten Keyframe.

Die Animation wird zuerst vorwärts und dann rückwärts abgespielt :

• beginnt am ersten Keyframe
• stoppt am letzten Keyframe
• startet erneut, aber am letzten Keyframe
• stoppt beim ersten Keyframe

Die Animation wird zuerst rückwärts und dann vorwärts abgespielt :

• beginnt am letzten Keyframe
• stoppt beim ersten Keyframe
• startet erneut, aber beim ersten Keyframe
• stoppt am letzten Keyframe

Der Standardwert ist null Sekunden : Die Animation wird einfach nicht abgespielt.

Mit dem Schlüsselwort können Sie Dezimalwerte in Sekunden verwendens .

Sie können mit dem Schlüsselwort Millisekunden anstelle von Sekunden verwenden ms.

Die Animationsstile wirken sich nicht auf den Standardstil aus: Das Element wird vor dem Start der Animation auf den Standardzustand gesetzt und kehrt nach dem Ende der Animation in diesen Standardzustand zurück.

Die letzten am Ende der Animation angewendeten Stile bleiben danach erhalten .

Die Stile der Animation werden bereits angewendet, bevor die Animation tatsächlich startet.

Die Stile werden vor und nach der Wiedergabe der Animation angewendet .

Die Animation wird nur einmal abgespielt .

Sie können mit Integer - Wert einer definieren spezifische Höhe der Zeit die Animation abgespielt wird.

Bei Verwendung des Schlüsselworts infinitewird die Animation unbegrenzt abgespielt.

Wenn kein Animationsname angegeben ist, wird keine Animation abgespielt.

Wenn ein Name angegeben wird, werden die Keyframes verwendet, die diesem Namen entsprechen.

Die fadeInAnimation sieht beispielsweise folgendermaßen aus:

@keyframes fadeIn {
  von {
    Deckkraft: 0;
  }}
  zu {
    Opazität: 1;
  }}
}}

Ein weiteres Beispiel: die moveRightAnimation:

@keyframes moveRight {
  von {
    transform: translateX (0);
  }}
  zu {
    transform: translateX (100px);
  }}
}}

Wenn das animation-durationund animation-namedefiniert sind, wird die Animation automatisch abgespielt.

Die Animation wird beim ersten Keyframe angehalten .

Dies ist anders als entweder nein animation-durationoder animation-nameüberhaupt nicht. Wenn die Animation angehalten wird, wird der Stil des ersten Keyframes und nicht der Standardstil angewendet .

In diesem Beispiel ist das Quadrat standardmäßig sichtbar, aber die auf dem ersten Keyframe fadeAndMove, die opacityfestgelegt ist 0. Wenn die Animation angehalten wird, bleibt sie auf diesem ersten Keyframe "hängen" und ist somit unsichtbar.

@keyframes fadeAndMove {
  von {
    Deckkraft: 0;
    transform: translateX (0);
  }}
  zu {
    Deckkraft: 0;
    transform: translateX (100px);
  }}
}}

Die Animation beginnt langsam, beschleunigt in der Mitte und verlangsamt sich am Ende.

Die Animation beginnt langsam und wird schrittweise bis zum Ende beschleunigt.

Die Animation startet schnell und verlangsamt sich allmählich bis zum Ende.

Wie ease, aber ausgeprägter.

Die Animation startet schnell und verlangsamt sich allmählich bis zum Ende.

Die Animation hat eine * konstante Geschwindigkeit .

Die Animation springt sofort in den Endzustand .

Die Animation bleibt bis zum Ende im Ausgangszustand und springt sofort in den Endzustand .

Durch die Verwendung steps()mit einer Ganzzahl können Sie eine bestimmte Anzahl von Schritten definieren, bevor Sie das Ende erreichen. Der Zustand des Elements ändert sich nicht allmählich, sondern springt in getrennten Augenblicken von Zustand zu Zustand.

Das Hintergrundbild wird mit der Seite gescrollt. Es positioniert sich auch entsprechend dem Element, auf das es angewendet wird.

Das Hintergrundbild wird nicht mit der Seite gescrollt und bleibt entsprechend dem Ansichtsfenster positioniert. Es wird sich auch entsprechend dem Ansichtsfenster positionieren und seine Größe ändern. Infolgedessen ist das Hintergrundbild wahrscheinlich nur teilweise sichtbar.

Der Hintergrund erstreckt sich vollständig über das gesamte Element, auch unter dem Rand.

Der Hintergrund erstreckt sich nur bis zum Rand des Randes: Er enthält die Polsterung, nicht jedoch den Rand.

Der Hintergrund erstreckt sich nur bis zum Rand des Inhalts : Er enthält weder die Auffüllung noch den Rand.

Standardmäßig ist die Hintergrundfarbe transparent , was im Grunde bedeutet, dass keine Hintergrundfarbe vorhanden ist.

Sie können einen der über 140 Farbnamen verwenden .

Sie können hexadezimale Farbcodes verwenden.

Sie können die Farbcodes rgb () verwenden:

• Der erste Wert ist für red
• Der zweite Wert ist für green
• Der dritte Wert ist für blue

Jeder von ihnen kann einen Wert zwischen 0 und 255 haben .

Sie können rgba () Farbcodes verwenden:

• Die ersten 3 Werte sind für rgb
• Der 4. Wert gilt für den alphaKanal und definiert die Deckkraft der Farbe

Der Alpha-Wert kann von null 0 (transparent) bis eins 1 (undurchsichtig) gehen.

Sie können die Farbcodes hsl () verwenden:

• Der erste Wert ist für hueund kann von 0 bis 359 gehen
• Der zweite Wert ist für saturationund geht von 0% auf 100%
• Der dritte Wert ist für luminosityund geht von 0% auf 100%

Sie können hsl () einen Farbcode verwenden:

• Die ersten 3 Werte sind für hsl
• Der 4. Wert gilt für den alphaKanal und definiert die Deckkraft der Farbe

Der Alpha-Wert kann von null 0 (transparent) bis eins 1 (undurchsichtig) gehen.

Entfernt Hintergrundbilder.

Verwendet das im URL- Pfad definierte Bild . Dieser Pfad kann entweder relativ (zur CSS-Datei) oder absolut (ähnlich http://cssreference.io/images/jt.png) sein.

Sie können einen linearen Farbverlauf als Hintergrundbild definieren.

Sie müssen mindestens zwei Farben definieren . Der erste beginnt oben, der zweite unten.

Der Standardwinkel ist to bottom(oder 180deg), was bedeutet, dass der Verlauf vertikal ist und oben beginnt und unten im Element endet.

Sie können einen Winkel entweder in Grad oder mit Schlüsselwörtern angeben .

Bei Verwendung von Degress geben Sie die Richtung des Verlaufs an oder wann er endet. Bedeutet 0degalso die Spitze des Elements, wie 12:00 Uhr auf einer Uhr.

In diesem Beispiel 45degbedeutet dies 2:30 oder die obere rechte Ecke.

Sie können einen radialen Farbverlauf als Hintergrundbild definieren.

Sie müssen mindestens zwei Farben definieren . Der erste befindet sich in der Mitte, der zweite an den Rändern.

Sie können die Form des radialen Verlaufs angeben : Kreis oder Ellipse (Standard).

Sie können festlegen , Farbstopps mit Prozentwerten.

Sie können angeben, wo der Verlauf enden soll :

• closest-side
• closest-corner
• farthest-side
• farthest-corner

Wie bei background-positionkönnen Sie die Position des Verlaufs angeben .

Das Hintergrundbild beginnt am Rand des Randes: innerhalb der Polsterung, jedoch nicht am Rand.

Das Hintergrundbild beginnt unter dem Rand.

Das Hintergrundbild beginnt nur am Rand des Inhalts : Es enthält weder die Auffüllung noch den Rand.

Das Hintergrundbild wird bei 0% auf der horizontalen Achse und 0% auf der vertikalen Achse positioniert , dh in der oberen linken Ecke des Elements.

Sie können eine Kombination von verwenden Position Schlüsselwort : center, top, bottom, leftund right.

Das Hintergrundbild wird in der Mitte des Elements positioniert.

Das Hintergrundbild wiederholt sich sowohl horizontal als auch vertikal .

Das Hintergrundbild wiederholt sich nur horizontal .

Das Hintergrundbild wiederholt sich nur vertikal .

Das Hintergrundbild wird nur einmal angezeigt .

Das Hintergrundbild behält seine ursprüngliche Größe bei.

Dieses Hintergrundbild ist beispielsweise 960 x 640 Pixel groß. Das Seitenverhältnis beträgt 3 mal 2 . Es ist größer als sein Behälter (der 150px hoch ist) und wird daher abgeschnitten .

Sie können eine Größe in Pixel angeben :

• Der erste Wert ist die horizontale Größe
• Die zweite ist die vertikale Größe

Sie können auch Prozentwerte verwenden. Beachten Sie, dass dies das Seitenverhältnis des Hintergrundbilds verändern und zu unerwarteten Ergebnissen führen kann.

Das Schlüsselwort containändert die Größe des Hintergrundbilds, um sicherzustellen, dass es vollständig sichtbar bleibt .

Das Schlüsselwort coverändert die Größe des Hintergrundbilds, um sicherzustellen, dass das Element vollständig abgedeckt ist .

Wendet eine transparente Farbe auf den unteren Rand an. Der untere Rand nimmt weiterhin den durch den Wert definierten Platz einborder-width .

Sie können einen der über 140 Farbnamen verwenden .

Sie können mit hexadezimalen Farbcodes rgb(), rgba(), hsl(), hsla()...

Entfernt alle Randradien.

Sie können Pixelwerte verwenden.

Sie können Prozentwerte verwenden. In diesem Beispiel beginnt der Radius zur Hälfte am unteren Rand und endet zur Hälfte am linken Rand.

Wenn Sie zwei Werte festlegen , ist der erste für den unteren Rand und der zweite für den linken Rand.

Entfernt alle Randradien.

Sie können Pixelwerte verwenden.

Sie können Prozentwerte verwenden. In diesem Beispiel beginnt der Radius zur Hälfte am unteren Rand und endet zur Hälfte am rechten Rand.

Wenn Sie zwei Werte festlegen , ist der erste für den unteren Rand und der zweite für den rechten Rand.

Entfernt den unteren Rand.

Verwandelt den unteren Rand in eine Folge von Punkten.

Verwandelt den unteren Rand in eine Folge von Strichen.

Verwandelt den unteren Rand in eine durchgezogene Linie.

Teilt den unteren Rand in zwei Zeilen.

Legt einen Einschubstil für den unteren Rand fest.

Entfernt den unteren Rand.

Sie können Pixelwerte verwenden.

Die Reihenfolge ist wichtig:

• Breite
• Stil
• Farbe

Nur die Farbe ist optional . Wenn Sie es weglassen, entspricht die angewendete Farbe der Farbe des Textes .

Jede Tabellenzelle wird seine eigenen Grenzen anzuzeigen.

In diesem Beispiel hat jede Zelle einen border-widthvon 4px . Infolgedessen beträgt die Grenze zwischen zwei Zellen 8 Pixel .

Angrenzend Tabellenzellen werden fusionieren ihre Grenzen zusammen.

Die Zelle, die zuerst im Code erscheint, "gewinnt": Ihre Ränder maskieren die der folgenden Zellen.

Wendet eine transparente Farbe auf die Ränder an. Die Ränder nehmen weiterhin den durch den Wert definierten Platz einborder-width .

Sie können einen der über 140 Farbnamen verwenden .

Sie können hexadezimale Farbcodes verwenden.

Sie können die Farbcodes rgb () verwenden:

• Der erste Wert ist für red
• the second value is for green
• the third value is for blue

Each of them can have a value between 0 and 255.

You can use rgba() color codes:

• the first 3 values are for rgb
• the 4th value is for the alpha channel and defines the opacity of the color

The alpha value can go from zero 0 (transparent) to one 1 (opaque).

You can use hsl() color codes:

• the first value is for hue and can go from 0 to 359
• the second value is for saturation and go from 0% to 100%
• the third value is for luminosity and go from 0% to 100%

Sie können hsl () einen Farbcode verwenden:

• Die ersten 3 Werte sind für hsl
• Der 4. Wert gilt für den alphaKanal und definiert die Deckkraft der Farbe

Der Alpha-Wert kann von null 0 (transparent) bis eins 1 (undurchsichtig) gehen.

Wendet eine transparente Farbe auf den linken Rand an. Der linke Rand nimmt weiterhin den durch den Wert definierten Platz einborder-width .

Sie können einen der über 140 Farbnamen verwenden .

Sie können mit hexadezimalen Farbcodes rgb(), rgba(), hsl(), hsla()...

Entfernt den linken Rand.

Verwandelt den linken Rand in eine Folge von Punkten.

Verwandelt den linken Rand in eine Folge von Strichen.

Verwandelt den linken Rand in eine durchgezogene Linie.

Teilt den linken Rand in zwei Zeilen.

Legt einen Einfügungsstil am linken Rand fest.

Entfernt den linken Rand.

Sie können Pixelwerte verwenden.

Die Reihenfolge ist wichtig:

• Breite
• Stil
• Farbe

Nur die Farbe ist optional . Wenn Sie es weglassen, entspricht die angewendete Farbe der Farbe des Textes .

Entfernt alle Randradien.

Sie können Pixelwerte verwenden.

Sie können Prozentwerte verwenden. In diesem Beispiel beginnt der Radius in der Mitte jedes Randes.

Wenn Sie zwei Werte festlegen , ist der erste für den oberen und unteren Rand, der zweite für den linken und rechten Rand.

Wendet eine transparente Farbe auf den rechten Rand an. Der rechte Rand nimmt weiterhin den durch den Wert definierten Platz einborder-width .

Sie können einen der über 140 Farbnamen verwenden .

Sie können mit hexadezimalen Farbcodes rgb(), rgba(), hsl(), hsla()...

Entfernt den rechten Rand.

Verwandelt den rechten Rand in eine Folge von Punkten.

Verwandelt den rechten Rand in eine Folge von Strichen.

Verwandelt den rechten Rand in eine durchgezogene Linie.

Teilt den rechten Rand in zwei Zeilen.

Legt einen Einschubstil auf den rechten Rand fest.

Entfernt den rechten Rand.

Sie können Pixelwerte verwenden.

Die Reihenfolge ist wichtig:

• Breite
• Stil
• Farbe

Nur die Farbe ist optional . Wenn Sie es weglassen, entspricht die angewendete Farbe der Farbe des Textes .

Entfernt die Rahmen des Elements.

Verwandelt den Rand in eine Folge von Punkten.

Verwandelt den Rand in eine Folge von Strichen.

Verwandelt den Rand in eine durchgezogene Linie.

Teilt den Rand in zwei Zeilen.

Legt einen eingefügten Stil für die Ränder fest.

Wendet eine transparente Farbe auf den oberen Rand an. Der obere Rand nimmt weiterhin den durch den Wert definierten Platz einborder-width .

Sie können einen der über 140 Farbnamen verwenden .

You can use hexadecimal color codes, rgb(), rgba(), hsl(), hsla()...

Removes any border radius.

You can use pixel values.

You can use percentage values. In this example, the radius starts halfway on the top border, and ends halfway on the left border.

If you set two values, the first one is for the top border, the second one for the left border.

Removes any border radius.

You can use pixel values.

Sie können Prozentwerte verwenden. In diesem Beispiel beginnt der Radius zur Hälfte am oberen Rand und endet zur Hälfte am rechten Rand.

Wenn Sie zwei Werte festlegen , ist der erste für den oberen Rand und der zweite für den rechten Rand.

Entfernt den oberen Rand.

Verwandelt den oberen Rand in eine Folge von Punkten.

Verwandelt den oberen Rand in eine Folge von Strichen.

Verwandelt den oberen Rand in eine durchgezogene Linie.

Teilt den oberen Rand in zwei Linien.

Legt einen Einschubstil für den oberen Rand fest.

Entfernt den oberen Rand.

Sie können Pixelwerte verwenden.

Die Reihenfolge ist wichtig:

• Breite
• Stil
• Farbe

Nur die Farbe ist optional . Wenn Sie es weglassen, entspricht die angewendete Farbe der Farbe des Textes .

Definiert die Breite aller Ränder auf 1px.

Definiert den oberen und unteren Rand auf 2px, den linken und rechten auf 0.

Die Reihenfolge ist wichtig:

• Breite
• Stil
• Farbe

Nur die Farbe ist optional . Wenn Sie es weglassen, entspricht die angewendete Farbe der Farbe des Textes .

Das Element bleibt in seiner natürlichen Position.

Wenn sich das Element relativ zur Position befindet , bewegt sich das Element um den durch den unteren Wert definierten Betrag nach oben .

Wenn sich das Element in der absoluten Position befindet , positioniert sich das Element am unteren Rand des zuerst positionierten Vorfahren .

Entfernt alle Box-Schatten, die auf das Element angewendet wurden.

Sie benötigen mindestens zwei Werte :

• Der erste ist der horizontale Versatz
• Der zweite ist der vertikale Versatz

Die Schattenfarbe wird von der Textfarbe übernommen.

Sie können eine Farbe als letzten Wert definieren.

Wie bei colorkönnen Sie Farbnamen, hexadezimal, rgb, hsl ...

Der optionale dritte Wert definiert die Unschärfe des Schattens.

Die Farbe wird in diesem Beispiel über 10 Pixel verteilt, von opak bis transparent.

Der optionale vierte Wert definiert die Ausbreitung des Schattens.

Die Ausbreitung definiert, wie stark der Schatten wachsen soll : Er verstärkt den Schatten.

Die Breite und Höhe des Elements gelten nur für den Inhalt des Elements.

Zum Beispiel hat dieses Element

• border-width: 12px
• padding: 30px
• width: 200px

Die volle Breite beträgt 24px + 60px + 200px = 284px .

Der Inhalt hat die definierte Breite. Die Box bietet Platz für diese Abmessungen.

Die Breite und Höhe des Elements gelten für alle Teile des Elements: den Inhalt , den Abstand und die Ränder .

Zum Beispiel hat dieses Element

• border-width: 12px
• padding: 30px
• width: 200px

Die volle Breite beträgt 200px , egal was passiert .

Die Box hat die definierte Breite. Der Inhalt passt sich diesen Dimensionen an und beträgt 200px - 30px - 24px = 146px .

Die Eigenschaft clear ist nur relevant, wenn sie mit Geschwistern verwendet wird, die einen Gleitkommawert haben.

Das Element befindet sich neben jedem schwebenden Element, das ihm vorausgeht .

Das gelöschte Element bewegt sich nach jedem vorangestellten linken schwebenden Element, bleibt jedoch neben den rechten schwebenden Elementen.

Das gelöschte Element bewegt sich nach jedem vorangestellten rechten schwebenden Element, bleibt jedoch neben den linken schwebenden Elementen.

The cleared element will move after any floating element that precedes it. This includes both left floating and right floating elements.

Wendet eine transparente Farbe auf den Text an. Der Text nimmt immer noch den Platz ein, den er sollte.

Sie können einen der über 140 Farbnamen verwenden .

Sie können hexadezimale Farbcodes verwenden.

Sie können die Farbcodes rgb () verwenden:

• Der erste Wert ist für red
• Der zweite Wert ist für green
• Der dritte Wert ist für blue

Jeder von ihnen kann einen Wert zwischen 0 und 255 haben .

Sie können rgba () Farbcodes verwenden:

• Die ersten 3 Werte sind für rgb
• Der 4. Wert gilt für den alphaKanal und definiert die Deckkraft der Farbe

Der Alpha-Wert kann von null 0 (transparent) bis eins 1 (undurchsichtig) gehen.

Sie können die Farbcodes hsl () verwenden:

• Der erste Wert ist für hueund kann von 0 bis 359 gehen
• Der zweite Wert ist für saturationund geht von 0% auf 100%
• Der dritte Wert ist für luminosityund geht von 0% auf 100%

Sie können hsl () einen Farbcode verwenden:

• Die ersten 3 Werte sind für hsl
• Der 4. Wert gilt für den alphaKanal und definiert die Deckkraft der Farbe

Der Alpha-Wert kann von null 0 (transparent) bis eins 1 (undurchsichtig) gehen.

Entfernt alle Spalten aus dem Element (sofern keine andere column-Eigenschaft festgelegt wurde).

Bei Verwendung eines ganzzahligen Werts verteilt das Element seine untergeordneten Elemente auf die Anzahl der definierten Spalten.

Die Lücke zwischen den Spalten wird auf den Standardwert des Browsers festgelegt , der normalerweise 1em beträgt .

Sie können Pixelwerte für die Lücke verwenden.

Beachten Sie, dass die Lücke nur zwischen den Spalten und nicht an den Außenseiten der Randspalten angezeigt wird .

Das Element wird nicht verteilt seine untergeordneten Elemente in Spalten, unlesse ein column-countWert definiert ist. In diesem Fall wird die Spaltenbreite aus der Spaltenanzahl abgeleitet.

Sie können Pixelwerte für die Spaltenbreite verwenden.

Die Anzahl der Spalten ist das Minimum, das erforderlich ist, um den gesamten Inhalt über das Element zu verteilen.

Dem Element wird kein Inhalt hinzugefügt.

Betrachtet man dieses HTML-Element:

<p class = "element">
  Hallo Welt
</ p>

Und dieses CSS:

.element: vor {
  Inhalt: "Foo Bar";
}}

Der Textinhalt wird dem Inhalt des Elements vorangestellt .

Beachten Sie, wie das Endergebnis Text aus dem HTML-Code und Text aus dem CSS kombiniert .

Mit der Funktion können Sie Bilder einfügen url().

Betrachtet man dieses HTML-Element:

<p class = "element" data-Something = "cssreference">
  Hallo Welt
</ p>

Und dieses CSS:

.element: vor {
  Inhalt: attr (Daten-etwas);
}}

Das Element übernimmt den Textinhalt aus dem HTML- Attribut .

Setzt den Cursor auf den Standardwert des Elements. Für einen Link wäre es ein Zeiger. Für Text wäre es ein Auswahlcursor.

Auto

Zeiger

Bewegung

Fadenkreuz

Text

warten

Größe ändern

ne-resize

nw-resize

n-Größe ändern

Größe ändern

sw-resize

S-Größe ändern

w-resize

Das Element wird vollständig entfernt , als wäre es überhaupt nicht im HTML-Code enthalten.

Das Element wird in ein Inline- Element umgewandelt: Es verhält sich wie einfacher Text.

Jede heightund widthangewandte hat keine Wirkung.

Das Element wird in ein Blockelement umgewandelt : Es beginnt in einer neuen Zeile und nimmt die gesamte Breite ein.

Das Element teilt die Eigenschaften eines Inline- und eines Blockelements :

• Inline, weil sich das Element wie einfacher Text verhält und sich in einen Textblock einfügt
• Blockieren, weil Sie heightund widthWerte anwenden können

Zum Beispiel hat dieses Element:

.Element{
  Höhe: 3em;
  Breite: 60px;
}}

Das Element verhält sich wie ein Listenelement : <li>. Der einzige Unterschied zum Block besteht darin, dass ein Listenelement einen Aufzählungspunkt hat .

Das Element verhält sich wie eine Tabelle : <table>.

Der Inhalt und die untergeordneten Elemente verhalten sich wie Tabellenzellen.

Das Element verhält sich wie eine Tabellenzelle : <td>oder <th>.

Der Inhalt und die untergeordneten Elemente verhalten sich wie Tabellenzellen.

Das Element verhält sich wie eine Tabellenzeile : <tr>.

Der Inhalt und die untergeordneten Elemente verhalten sich wie Tabellenzellen.

Das Element wird in einen Flexbox- Container verwandelt . Allein verhält es sich wie ein Blockelement.

Die untergeordneten Elemente werden in Flexbox-Elemente umgewandelt .

Das Element teilt die Eigenschaften eines Inline- und eines Flexbox- Elements:

• Inline, weil sich das Element wie einfacher Text verhält und sich in einen Textblock einfügt
• Flexbox, da das untergeordnete Element in Flexbox-Elemente umgewandelt wird

Zum Beispiel hat dieses Element:

.Element{
  Höhe: 3em;
  Breite: 120px;
}}

Die Größe des Elements wird automatisch basierend auf seinem Inhalt oder auf einem beliebigen Wert heightoder einem widthWert, falls dieser definiert ist, angepasst.

Sie können Pixel- oder (r) em- Werte definieren. Das Element umschließt seinen Inhalt, um einen Überlauf zu vermeiden.

Die FlexBox Elemente werden die geordnete gleiche Weise wie die Textrichtung , entlang der Hauptachse .

Die FlexBox Elemente sind die geordnete entgegengesetzte Weise wie die Textrichtung , entlang der Hauptachse .

Die FlexBox Elemente werden die geordnete gleiche Weise wie die Textrichtung entlang der Querachse .

Die FlexBox Elemente sind die geordnete entgegengesetzte Weise wie die Textrichtung entlang der Querachse .

Das Element wächst nicht , wenn Platz verfügbar ist. Es wird nur der Platz verwendet, den es benötigt.

Das Element wächst um den Faktor 1 . Der verbleibende Speicherplatz wird ausgefüllt, wenn kein anderes Flexbox-Element einen flex-growWert hat.

Da der Flex-Grow-Wert relativ ist , hängt sein Verhalten vom Wert der Geschwister der Flexbox-Elemente ab .

In diesem Beispiel ist der verbleibende Speicherplatz in 3 Teile unterteilt :

• 1 Drittel geht an den grünen Gegenstand
• 2 Drittel gehen an den rosa Gegenstand
• Nichts geht an den gelben Gegenstand, der seine ursprüngliche Breite behält

Wenn auf der Hauptachse des Containers nicht genügend Platz verfügbar ist, wird das Element um den Faktor 1 verkleinert und der Inhalt umbrochen.

Das Element wird nicht schrumpfen: es wird die Breite behält sie braucht, und nicht dessen Inhalt wickeln. Seine Geschwister schrumpfen, um dem Zielelement Platz zu geben.

Da das Zielelement seinen Inhalt nicht umschließt, besteht die Möglichkeit, dass der Inhalt des Flexbox-Containers überläuft .

Da der Flex-Shrink-Wert relativ ist , hängt sein Verhalten vom Wert der Geschwister der Flexbox-Elemente ab .

In diesem Beispiel möchte das grüne Element 100% der Breite ausfüllen. Der Platz, den es benötigt, wird von seinen beiden Geschwistern genommen und ist in 4 Teile unterteilt :

• 3 Viertel werden vom roten Gegenstand genommen
• 1 Viertel wird dem gelben Gegenstand entnommen

Die Flexbox-Elemente bleiben in einer einzelnen Zeile , egal was passiert , und laufen bei Bedarf möglicherweise über.

Die Flexbox-Elemente werden bei Bedarf auf mehrere Zeilen verteilt .

Die Flexbox-Elemente werden bei Bedarf auf mehrere Zeilen verteilt . Jede zusätzliche Zeile wird vor der vorherigen angezeigt.

Entfernt alle zuvor definierten floatWerte. Das Element bleibt im natürlichen Fluss der Seite.

Verschiebt das Element auf die linke Seite seines Containers. Die folgenden Elemente wickeln sich darum und füllen den rechts verbleibenden Raum aus.

Verschiebt das Element auf die rechte Seite seines Containers. Die folgenden Elemente wickeln sich darum und füllen den verbleibenden Platz auf der linken Seite aus.

Bei Verwendung mehrerer Werte definiert die font-familyListe der Schriftfamilien die Priorität, in der der Browser die Schriftfamilie auswählen soll.

Der Browser sucht nach jeder Familie auf dem Computer des Benutzers und in einer beliebigen @ font-face- Ressource.

Die Liste wird von links nach rechts priorisiert : Sie verwendet den ersten Wert, falls verfügbar, oder wechselt zum nächsten, bis das Ende der Liste erreicht ist. Die Standardschriftfamilie wird durch die Browsereinstellungen definiert.

In diesem Beispiel versucht der Browser zu verwenden, Source Sans Prowenn er verfügbar ist. Wenn es es nicht finden kann, wird es versuchen, es zu verwenden Arial. Wenn es auch nicht verfügbar ist, wird die sans-serifSchriftart des Browsers verwendet .

Der Browser verwendet eine Serifenschriftfamilie : Alle Zeichen haben Strichenden .

Der Browser verwendet eine serifenlose Schriftfamilie: Kein Zeichen hat Strichenden.

Der Browser verwendet eine Monospace- Schriftfamilie: Alle Zeichen haben die gleiche Breite .

Der Browser verwendet eine kursive Schriftfamilie.

Der Browser verwendet eine Fantasy- Schriftfamilie.

Der Text verwendet die mittlere Standardgröße des Browsers .

Sie können Pixelwerte verwenden.

Sie können em- Werte verwenden.

Der Wert ist im Verhältnis zu dem übergeordneten ‚s font-size.
Infolgedessen wird der Wert kaskadiert, wenn er für untergeordnete Elemente verwendet wird.

Sie können rem- Werte verwenden.

Der Wert ist in Bezug auf das Wurzelelement ist font-size, das das IS - <html>Element.
Infolgedessen variiert der Wert nicht in Abhängigkeit von der Tiefe des Elements in der HTML-Hierarchie und wird kontextunabhängig wiedergegeben.

Sie können Prozentwerte verwenden. Sie wirken wie em Werte.

Der Wert ist im Verhältnis zu dem übergeordneten ‚s font-size.
Infolgedessen wird der Wert kaskadiert, wenn er für untergeordnete Elemente verwendet wird.

Sie können relative Schlüsselwörter verwenden . Der Wert ist relativ zum übergeordneten Wert .

Folgendes ist verfügbar:

• larger
• smaller

Sie können absolute Schlüsselwörter verwenden . Der Wert ist relativ zum Stammelement <html> .

Folgendes ist verfügbar:

• xx-small
• x-small
• small
• medium
• large
• x-large
• xx-large

Der Text ist nicht geneigt.

Verwenden Sie die kursive Version der Schriftart: Die Buchstaben sind leicht geneigt.

Verwenden Sie die schräge Version der Schriftart: Die Buchstaben sind eher schräg als kursiv.

Jeder Buchstabe verwendet seine normale Glyphe.

Jeder Buchstabe verwendet seine kleinformatige Version.

Der Text ist normalgewichtig .

Der Text wird fett .

Sie können numerische Werte verwenden. Sie alle entsprechen einem bestimmten benannten Gewicht :

• 100 dünn
• 200 Extra Licht
• 300 Licht
• 400 Normal
• 500 Medium
• 600 Semi Bold
• 700 Fett
• 800 extra fett
• 900 Ultra Bold

Wenn die Schriftfamilie nicht das gewünschte Gewicht bereitstellt, wird das nächstgelegene verfügbare verwendet.

Sie können relative Schlüsselwörter verwenden: lighteroder bolder. Der Browser verwendet das nächste verfügbare Gewicht.

Das Element passt seine Höhe automatisch an, damit der Inhalt korrekt angezeigt werden kann.

Sie können numerische Werte wie Pixel , (r) em , Prozentsätze ... verwenden.

Wenn der Inhalt nicht in die angegebene Höhe passt, läuft er über . Wie der Container mit diesem überfüllten Inhalt umgeht, wird durch die overflowEigenschaft definiert .

Die Flexbox-Elemente werden zum Anfang der Hauptachse des Containers geschoben .

Die Flexbox-Elemente werden zum Ende der Hauptachse des Containers geschoben .

Die Flexbox-Elemente sind entlang der Hauptachse des Containers zentriert .

Der verbleibende Raum verteilt zwischen dem Flexbox Artikel.

Der verbleibende Raum verteilt um den Flexbox Artikel: dieser Raum fügt vor dem ersten Punkt und nach dem letzten.

Das Element bleibt in seiner natürlichen Position.

Wenn sich das Element relativ zur Position befindet , bewegt sich das Element um den durch den linken Wert definierten Betrag nach oben .

Wenn sich das Element in der absoluten Position befindet , positioniert sich das Element links vom ersten positionierten Vorfahren .

Der Abstand zwischen den Zeichen ist normal .

Sie können Pixelwerte verwenden.

Sie können em- Werte verwenden: Dadurch bleibt der Abstand relativ zur Schriftgröße erhalten.

Stellt den Standardwert des Browsers wieder her.

Sie können Werte ohne Einheit verwenden: Die Zeilenhöhe ist relativ zur Schriftgröße.

Sie können Pixelwerte verwenden.

Sie können em- Werte verwenden: Wie bei Werten ohne Einheit ist die Zeilenhöhe relativ zur Schriftgröße.

Die Listenelemente verwenden den durch den list-style-typeWert definierten Aufzählungspunkt , der standardmäßig eine Disc ist .

Die Listenelemente verwenden das Bild unter der angegebenen URL als Aufzählungspunkt.
Die Bildgröße kann nicht geändert werden.

Der Aufzählungspunkt befindet sich außerhalb des Listenelements, als wäre er nicht Teil des Listenelements.

Der Anfang jeder Zeile eines Listenelements wird vertikal ausgerichtet.

Der Aufzählungspunkt befindet sich innerhalb des Listenelements.

Wie es ist Teil des Listenelementes, wird es Teil des Textes und drücken Sie den Text am Anfang.

Die Listenelemente verwenden eine Disc als Aufzählungspunkt.

Die Listenelemente verwenden einen Kreis als Aufzählungspunkt.

Die Listenelemente verwenden ein Quadrat als Aufzählungspunkt.

Die Listenelemente verwenden eine Dezimalstelle als Aufzählungszeichen.

Die Listenelemente haben keinen Aufzählungspunkt.

Entfernt alle Ränder am unteren Rand.

Sie können Pixelwerte verwenden.

Sie können (r) em- Werte verwenden.

Der Wert ist relativ zur Schriftgröße:

• em : relativ zur aktuellen Schriftgröße des Elements
• REM : relativ zu <html>dem Wurzelelement ist Schriftgröße

Sie können Prozentwerte verwenden.
Der Prozentsatz basiert auf der Breite des Containers .

Entfernt alle Ränder links.

Sie können Pixelwerte verwenden.

Sie können (r) em- Werte verwenden.

Der Wert ist relativ zur Schriftgröße:

• em : relativ zur aktuellen Schriftgröße des Elements
• REM : relativ zu <html>dem Wurzelelement ist Schriftgröße

Sie können Prozentwerte verwenden.
Der Prozentsatz basiert auf der Breite des Containers .

Das Schlüsselwort auto gibt der linken Seite einen Teil des verbleibenden Speicherplatzes .

Wenn mit kombiniert margin-right: auto, wird es zentriert um das Element, wenn eine feste Breite definiert ist.

Entfernt alle Ränder rechts.

Sie können Pixelwerte verwenden.

Sie können (r) em- Werte verwenden.

Der Wert ist relativ zur Schriftgröße:

• em : relativ zur aktuellen Schriftgröße des Elements
• REM : relativ zu <html>dem Wurzelelement ist Schriftgröße

Sie können Prozentwerte verwenden.
Der Prozentsatz basiert auf der Breite des Containers .

Das Schlüsselwort auto gibt der rechten Seite einen Teil des verbleibenden Speicherplatzes .

Wenn mit kombiniert margin-left: auto, wird es zentriert um das Element, wenn eine feste Breite definiert ist.

Entfernt alle Ränder oben.

Sie können Pixelwerte verwenden.

Sie können (r) em- Werte verwenden.

Der Wert ist relativ zur Schriftgröße:

• em : relativ zur aktuellen Schriftgröße des Elements
• REM : relativ zu <html>dem Wurzelelement ist Schriftgröße

Sie können Prozentwerte verwenden.
Der Prozentsatz basiert auf der Breite des Containers .

Entfernt alle Ränder.

Bei Verwendung von 1 Wert wird der Rand für alle 4 Seiten festgelegt .

Bei Verwendung von 2 Werten:

• Der erste Wert ist für oben / unten
• Der zweite Wert ist für rechts / links

Um sich an die Reihenfolge zu erinnern , denken Sie an die Werte, die Sie nicht definiert haben .

Wenn Sie 2 Werte eingeben (oben / rechts), lassen Sie die Einstellung unten und links weg . Da unten das vertikale Gegenstück zu oben ist, wird der Wert von oben verwendet. Und weil links das horizontale Gegenstück zu rechts ist, wird der Wert von rechts verwendet.

Bei Verwendung von 3 Werten:

• Der erste Wert ist für top
• Der zweite Wert ist für rechts / links
• Der dritte Wert ist für unten

Um sich an die Reihenfolge zu erinnern , denken Sie an die Werte, die Sie nicht definiert haben .

Wenn Sie 3 Werte eingeben (oben / rechts / unten), lassen Sie die Einstellung links weg. Als Gegenstück zum Recht wird es seinen Wert verwenden.

Bei Verwendung von 4 Werten:

• Der erste Wert ist für top
• Der zweite Wert ist für richtig
• Der dritte Wert ist für unten
• Der vierte Wert ist für links

Um sich an die Reihenfolge zu erinnern , beginnen Sie oben und gehen Sie im Uhrzeigersinn .

Das Element hat keine Höhenbeschränkung.

Sie können numerische Werte wie Pixel , (r) em , Prozentsätze ... verwenden.

Wenn die maximale Höhe größer als die tatsächliche Höhe des Elements ist , hat die maximale Höhe keine Auswirkung .

Wenn der Inhalt nicht in die maximale Höhe passt, läuft er über . Wie der Container mit diesem überfüllten Inhalt umgeht, wird durch die overflowEigenschaft definiert .

Das Element hat keine Begrenzung in Bezug auf die Breite.

Sie können numerische Werte wie Pixel , (r) em , Prozentsätze ... verwenden.

Wenn die maximale Breite größer als die tatsächliche Breite des Elements ist , hat die maximale Breite keine Auswirkung .

Wenn der Inhalt nicht in die maximale Breite passt, ändert sich automatisch die Höhe des Elements, um den Inhalt einzuschließen.

Das Element hat keine Mindesthöhe .

Sie können numerische Werte wie Pixel , (r) em , Prozentsätze ... verwenden.

Wenn die Mindesthöhe größer ist als das Element tatsächliche Höhe wird die Höhe min angewendet werden.

Wenn die Mindesthöhe kleiner ist als das Element tatsächliche Höhe, hat die Mindesthöhe keine Wirkung .

Das Element hat keine Mindestbreite .

Sie können numerische Werte wie Pixel , (r) em , Prozentsätze ... verwenden.

Wenn die Mindestbreite größer als die tatsächliche Breite des Elements ist Breite wird die Breite min angewandt werden.

Wenn die minimale Breite ist kleiner als die des Elements tatsächliche Breite, hat die min Breite keine Wirkung .

Das Element wird nicht gemischt.

Das Element verwendet den Multiplikationsmischmodus .

Das Element verwendet den Bildschirmüberblendungsmodus .

Das Element verwendet den Overlay- Mischmodus.

Das Element verwendet den Verdunkelungsmodus zum Abdunkeln.

Das Element verwendet den Aufhellungsmodus .

Das Element verwendet den Farbausweich-Mischmodus .

Das Element verwendet den Farbbrenn- Mischmodus.

Das Element verwendet den Hard-Light- Mischmodus.

Das Element verwendet den Soft-Light- Mischmodus.

Das Element verwendet den Differenzmischmodus .

Das Element verwendet den Ausschlussmischmodus .

Das Element verwendet den Farbtonmischmodus .

Das Element verwendet den Sättigungsmischmodus .

Das Element verwendet den Farbmischmodus .

Das Element verwendet den Helligkeitsmischmodus .

Das Element ist vollständig undurchsichtig .

Das Element ist vollständig transparent .

Jeder Wert zwischen 0 (Null) und 1 (Eins) macht das Element halbtransparent .

Die Reihenfolge der Flexbox-Elemente ist die im HTML-Code definierte .

Die Reihenfolge ist relativ zu den Geschwistern des Flexbox-Elements . Die endgültige Reihenfolge wird definiert, wenn alle einzelnen Bestellwerte für Flexbox-Artikel berücksichtigt werden.

Sie können negative Werte verwenden.

Sie können für jedes Flexbox-Element einen anderen Wert festlegen.

Wendet eine transparente Farbe auf die Konturen an. Die Umrisse nehmen weiterhin den durch den Wert definierten Platz einoutline-width .

Sie können einen der über 140 Farbnamen verwenden .

Sie können hexadezimale Farbcodes verwenden.

Sie können die Farbcodes rgb () verwenden:

• Der erste Wert ist für red
• Der zweite Wert ist für green
• Der dritte Wert ist für blue

Jeder von ihnen kann einen Wert zwischen 0 und 255 haben .

Sie können rgba () Farbcodes verwenden:

• Die ersten 3 Werte sind für rgb
• Der 4. Wert gilt für den alphaKanal und definiert die Deckkraft der Farbe

Der Alpha-Wert kann von null 0 (transparent) bis eins 1 (undurchsichtig) gehen.

Sie können die Farbcodes hsl () verwenden:

• Der erste Wert ist für hueund kann von 0 bis 359 gehen
• Der zweite Wert ist für saturationund geht von 0% auf 100%
• Der dritte Wert ist für luminosityund geht von 0% auf 100%

Sie können hsl () einen Farbcode verwenden:

• Die ersten 3 Werte sind für hsl
• Der 4. Wert gilt für den alphaKanal und definiert die Deckkraft der Farbe

Der Alpha-Wert kann von null 0 (transparent) bis eins 1 (undurchsichtig) gehen.

Entfernt die Umrisse des Elements.

Verwandelt den Umriss in eine Folge von Punkten.

Verwandelt den Umriss in eine Folge von Strichen.

Verwandelt den Umriss in eine durchgezogene Linie.

Teilt den Umriss in zwei Linien.

Legt einen eingefügten Stil für die Konturen fest.

Definiert die Breite aller Konturen bis mittel .

Definiert die Breite aller Konturen auf 1 Pixel .

Die Reihenfolge ist wichtig:

• Breite
• Stil
• Farbe

Nur die Farbe ist optional . Wenn Sie es weglassen, entspricht die angewendete Farbe der Farbe des Textes .

Wörter ohne Leerzeichen werden nicht unterbrochen. Sequenzen von ununterbrochenen Zeichen werden in einer einzelnen Zeile angezeigt.

Wörter ohne Leerzeichen werden unterbrochen , sobald sie das Ende einer Zeile erreichen.

Der überlaufende Inhalt ist sichtbar , während das Element selbst auf der angegebenen Breite bleibt.

Der überlaufende Inhalt ist ausgeblendet und kann nicht abgerufen werden.

Der überlaufende Inhalt ist über eine horizontale Bildlaufleiste zugänglich .

Der Browser entscheidet, ob eine horizontale Bildlaufleiste angezeigt wird oder nicht.

Der überlaufende Inhalt ist sichtbar , während das Element selbst auf der angegebenen Höhe bleibt.

Der überlaufende Inhalt ist ausgeblendet und kann nicht abgerufen werden.

Der überlaufende Inhalt ist über eine vertikale Bildlaufleiste zugänglich .

Der Browser entscheidet, ob eine vertikale Bildlaufleiste angezeigt wird oder nicht.

Der überlaufende Inhalt ist sichtbar , während das Element selbst auf der angegebenen Höhe bleibt.

Der überlaufende Inhalt ist ausgeblendet und kann nicht abgerufen werden.

Der überlaufende Inhalt ist über eine vertikale Bildlaufleiste zugänglich .

Der Browser entscheidet, ob eine vertikale Bildlaufleiste angezeigt wird oder nicht.

Entfernt alle Polsterungen an der Unterseite.

Sie können Pixelwerte verwenden.

Sie können (r) em- Werte verwenden.

Der Wert ist relativ zur Schriftgröße:

• em : relativ zur aktuellen Schriftgröße des Elements
• REM : relativ zu <html>dem Wurzelelement ist Schriftgröße

Sie können Prozentwerte verwenden.
Der Prozentsatz basiert auf der Breite des Elements .

Entfernt alle Polster auf der linken Seite.

Sie können Pixelwerte verwenden.

Sie können (r) em- Werte verwenden.

Der Wert ist relativ zur Schriftgröße:

• em : relativ zur aktuellen Schriftgröße des Elements
• REM : relativ zu <html>dem Wurzelelement ist Schriftgröße

Sie können Prozentwerte verwenden.
Der Prozentsatz basiert auf der Breite des Elements .

Entfernt alle Polster auf der rechten Seite.

Sie können Pixelwerte verwenden.

Sie können (r) em verwenden Werte verwenden.

Der Wert ist relativ zur Schriftgröße:

• em : relativ zum Elementaktuellen Schriftgröße
• REM : relativ zu <html>dem Wurzelelement ist Schriftgröße

Sie können Prozentwerte verwenden.
Der Prozentsatz basiert auf der Breite des Elements .

Entfernt alle Polster auf der Oberseite.

Sie können Pixelwerte verwenden.

Sie können (r) em- Werte verwenden.

Der Wert ist relativ zur Schriftgröße:

• em : relativ zur aktuellen Schriftgröße des Elements
• REM : relativ zu <html>dem Wurzelelement ist Schriftgröße

Sie können Prozentwerte verwenden.
Der Prozentsatz basiert auf der Breite des Elements .

Entfernt alle Polster.

Bei Verwendung von 1 Wert wird die Polsterung für alle 4 Seiten eingestellt .

Bei Verwendung von 2 Werten:

• Der erste Wert ist für oben / unten
• Der zweite Wert ist für rechts / links

Um sich an die Reihenfolge zu erinnern , denken Sie an die Werte, die Sie nicht definiert haben .

Wenn Sie 2 Werte eingeben (oben / rechts), lassen Sie die Einstellung unten und links weg . Da unten das vertikale Gegenstück zu oben ist, wird der Wert von oben verwendet. Und weil links das horizontale Gegenstück zu rechts ist, wird der Wert von rechts verwendet.

Bei Verwendung von 3 Werten:

• Der erste Wert ist für top
• Der zweite Wert ist für rechts / links
• Der dritte Wert ist für unten

Um sich an die Reihenfolge zu erinnern , denken Sie an die Werte, die Sie nicht definiert haben .

Wenn Sie 3 Werte eingeben (oben / rechts / unten), lassen Sie die Einstellung links weg. Als Gegenstück zum Recht wird es seinen Wert verwenden.

Bei Verwendung von 4 Werten:

• Der erste Wert ist für top
• Der zweite Wert ist für richtig
• Der dritte Wert ist für unten
• Der vierte Wert ist für links

Um sich an die Reihenfolge zu erinnern , beginnen Sie oben und gehen Sie im Uhrzeigersinn .

Das Element reagiert auf Zeigerereignisse wie :hoveroder click.

Das Element reagiert nicht auf Zeigerereignisse wie :hoveroder click. Dadurch sind Elemente, die dahinter stehen, zugänglich.

Das Element bleibt im natürlichen Fluss der Seite.

Infolgedessen fungiert es nicht als Ankerpunkt für den absolut positionierten gelben Block.

Außerdem reagiert es nicht auf die folgenden Eigenschaften:

• top
• bottom
• left
• right
• z-index

Das Element bleibt im natürlichen Fluss der Seite.

Außerdem wird das Element positioniert : Es fungiert als Ankerpunkt für den absolut positionierten gelben Block.

Außerdem reagiert es auf die folgenden Eigenschaften:

• top
• bottom
• left
• right
• z-index

Das Element bleibt nicht im natürlichen Fluss der Seite. Es positioniert sich entsprechend dem am nächsten positionierten Vorfahren .

Da es positioniert ist , fungiert es als Ankerpunkt für den absolut positionierten gelben Block.

Außerdem reagiert es auf die folgenden Eigenschaften:

• top
• bottom
• left
• right
• z-index

Das Element bleibt nicht im natürlichen Fluss der Seite. Es positioniert sich entsprechend dem Ansichtsfenster .

Da es positioniert ist , fungiert es als Ankerpunkt für den absolut positionierten gelben Block.

Außerdem reagiert es auf die folgenden Eigenschaften:

• top
• bottom
• left
• right
• z-index

Der Textbereich kann nicht in der Größe geändert werden.

Der Textbereich kann horizontal in der Größe geändert werden .

Der Textbereich kann vertikal in der Größe geändert werden .

Die Größe des Textbereichs kann sowohl horizontal als auch vertikal geändert werden .

Der Textinhalt ist nach links ausgerichtet .

Der Textinhalt ist rechts ausgerichtet .

Der Textinhalt ist zentriert .

Der Textinhalt ist gerechtfertigt .

Entfernt jegliche Textdekoration.

Unterstreicht den Textinhalt.

Der Text wird nicht eingerückt.

Sie können numerische Werte wie Pixel , (r) em , Prozentsätze ... verwenden.

Beachten Sie, dass nur die erste Zeile eingerückt wird.

Sie können auch negative Werte verwenden.

Der Textinhalt ist abgeschnitten und nicht zugänglich.

Der überlaufende Inhalt wird durch ein Auslassungszeichen ersetzt :…

Der Textinhalt hat keinen Schatten .

Sie brauchen wenigstens zwei Werte :

• Der erste ist der horizontale Versatz
• Der zweite ist der vertikale Versatz

Die Schattenfarbe wird von der Textfarbe übernommen.

Sie können eine Farbe als letzten Wert definieren.

Wie bei colorkönnen Sie Farbnamen, hexadezimal, rgb, hsl ...

Der optionale dritte Wert definiert die Unschärfe des Schattens.

Die Farbe wird in diesem Beispiel über 10 Pixel verteilt, von opak bis transparent.

Entfernt jegliche Textumwandlung: Der Text wird genauso angezeigt wie im HTML-Code.

Schaltet den ersten Buchstaben jedes Wortes in einen Kapital Brief.

Schaltet alle Buchstaben in der Hauptstadt Buchstaben.

Verwandelt alle Buchstaben in Kleinbuchstaben .

Das Element bleibt in seiner natürlichen Position.

Wenn das Element in der Lage ist relativ , wird das Element bewegen , nach oben durch den Betrag , um den definierten oberen Wert.

Wenn sich das Element in der absoluten Position befindet , positioniert sich das Element von der Oberseite des zuerst positionierten Vorfahren .

Der Transformationsursprung befindet sich in der Mitte des Elements.

Sie können 2 Werte verwenden :

• Der erste Wert ist die horizontale Achse
• Die zweite ist die vertikale Achse

Sie können eine Kombination von verwenden Position Schlüsselwort : center, top, bottom, leftund right.

Bei Verwendung von Schlüsselwörtern können Sie die Reihenfolge der Achse ändern , solange jedes Schlüsselwort eindeutig ist.

Entfernt alle Transformationen.

Bewegen Sie das Element auf der horizontalen Achse.

Bewegen Sie das Element auf der vertikalen Achse.

Sie können Prozentwerte verwenden: Der Prozentsatz bezieht sich auf das Element selbst und nicht auf das übergeordnete Element .

Sie können translate()mit zwei Werten verwenden :

• Der erste Wert gilt für die horizontale Achse
• Der zweite Wert gilt für die vertikale Achse

Skalieren Sie das Element auf der horizontalen Achse.

Skalieren Sie das Element auf der vertikalen Achse.

Sie können negative Werte verwenden: Das Element wird invertiert.

Sie können scale()mit zwei Werten verwenden :

• Der erste Wert gilt für die horizontale Achse
• Der zweite Wert gilt für die vertikale Achse

Wenn Sie für beide den gleichen Wert verwenden, können Sie proportional skalieren .

Drehen Sie das Element.

Sie können verwenden:

• Grad von 0bis360deg
• Absolventen von 0bis400grad
• Bogenmaß von 0bis2Ï€rad
• dreht sich von 0nach1turn

Neigen Sie das Element auf der horizontalen Achse.

Neigen Sie das Element auf der vertikalen Achse.

Sie können skew()mit zwei Werten verwenden :

• Der erste Wert gilt für die horizontale Achse
• Der zweite Wert gilt für die vertikale Achse

Sie können mehrere Transformationen kombinieren , indem Sie sie durch ein Leerzeichen trennen.

Der Übergang wartet null Sekunden und beginnt somit sofort.

Mit dem Schlüsselwort können Sie Dezimalwerte in Sekunden verwendens .

Sie können mit dem Schlüsselwort Millisekunden anstelle von Sekunden verwenden ms.

Sie können negative Werte verwenden : Der Übergang beginnt so, als ob er es getan hätte schon gespielt für 500ms.

Der Übergang dauert null Sekunden und ist somit sofort .

Mit dem Schlüsselwort können Sie Dezimalwerte in Sekunden verwendens .

Sie können mit dem Schlüsselwort Millisekunden anstelle von Sekunden verwenden ms.

Das Element übergibt alle Eigenschaften:

• background
• color
• transform

Das Element übergibt keine Eigenschaft: Der Übergang erfolgt somit sofort .

Das Element transtioniert nur die Hintergrundeigenschaft .

Das Element transtioniert nur die Farbeigenschaft .

Das Element transtioniert nur die Transformationseigenschaft .

Der Übergang beginnt langsam, beschleunigt in der Mitte und verlangsamt sich am Ende.

Der Übergang beginnt langsam und beschleunigt sich allmählich bis zum Ende.

Der Übergang beginnt schnell und verlangsamt sich allmählich bis zum Ende.

Mögen ease, aber ausgeprägter.

Der Übergang beginnt schnell und verlangsamt sich allmählich bis zum Ende.

Der Übergang hat eine * konstante Geschwindigkeit .

Der Übergang springt sofort in den Endzustand .

Der Übergang bleibt bis zum Ende im Ausgangszustand, bevor er sofort in den Endzustand springt .

Durch die Verwendung steps()mit einer Ganzzahl können Sie eine bestimmte Anzahl von Schritten definieren, bevor Sie das Ende erreichen. Der Zustand des Elements ändert sich nicht allmählich, sondern springt in getrennten Augenblicken von Zustand zu Zustand.

• transition-durationwird eingestellt , um1s
• transition-property Standardmäßig istall
• transition-timing-function Standardmäßig istease
• transition-delay Standardmäßig ist0s

• transition-durationwird eingestellt , um1s
• transition-property Standardmäßig istall
• transition-timing-functionwird eingestellt , umlinear
• transition-delay Standardmäßig ist0s

• transition-durationwird eingestellt , um1s
• transition-propertywird eingestellt , umbackground
• transition-timing-functionwird eingestellt , umlinear
• transition-delay Standardmäßig ist0s

• transition-durationwird eingestellt , um1s
• transition-propertywird eingestellt , umbackground
• transition-timing-functionwird eingestellt , umlinear
• transition-delaywird eingestellt , um500ms

Sie können mehrere Eigenschaften mit ihrer eigenen Übergangsdauer kombinieren .

Folgen von Räumen werden zu einem zusammengefasst.
Zeilenumbrüche werden ignoriert.
Der Textinhalt wird umbrochen.

Folgen von Räumen werden zu einem zusammengefasst.
Zeilenumbrüche werden ignoriert.
Der Textinhalt wird nicht umbrochen und bleibt in einer einzelnen Zeile .

Der Leerraum bleibt exakt erhalten .

• Sequenzen von Räumen bleiben erhalten
• Zeilen brechen nur bei neuen Zeilen und <br>

Der weiße Raum bleibt größtenteils erhalten .

• Sequenzen von Räumen bleiben erhalten
• Linien brechen in neuen Linien, <br>aber auch am Ende des Elements

Es bleiben nur neue Zeilen erhalten.

• Raumfolgen werden kombiniert in einer
• Linien brechen in neuen Linien, <br>aber auch am Ende des Elements

Das Element passt seine Breite automatisch an, damit der Inhalt korrekt angezeigt werden kann.

Sie können numerische Werte wie Pixel , (r) em , Prozentsätze ... verwenden.

Wenn Sie Prozentsätze verwenden , ist der Wert relativ zur Breite des Containers.

Weist den Browser nicht an, eine Eigenschaft zu optimieren .

Teilt dem Browser des Elements zu optimieren Scroll - Position , wie sie sich in Zukunft ändern könnte.

Weist den Browser an, den Inhalt des Elements zu optimieren , da er sich in Zukunft möglicherweise ändern wird.

Sie können jede andere CSS- Eigenschaft angeben . Dies weist den Browser beispielsweise an, den Kastenschatten des Elements zu optimieren , da er sich in Zukunft möglicherweise ändern wird.

Wörter ohne Leerzeichen werden nicht unterbrochen. Sequenzen von ununterbrochenen Zeichen werden in einer einzelnen Zeile angezeigt.

Wörter ohne Leerzeichen werden unterbrochen , sobald sie das Ende einer Zeile erreichen.

Der Abstand zwischen den Zeichen ist normal .

Sie können Pixelwerte verwenden.

Sie können em- Werte verwenden: Dadurch bleibt der Abstand relativ zur Schriftgröße erhalten.

Die Reihenfolge wird durch die Reihenfolge im HTML-Code definiert :

• zuerst im Code = dahinter
• zuletzt im Code = vorne

Der Z-Index-Wert ist relativ zu den anderen. Das Zielelement bewegt sich vor seinen Geschwistern.

Sie können negative Werte verwenden . Das Zielelement bewegt sich hinter seine Geschwister.