# Inhalt ausrichten

Definiert, wie jede Linie innerhalb eines Flexbox-Containers ausgerichtet wird. Dies gilt nur, wenn flex-wrap: wrapvorhanden und wenn mehrere Zeilen mit Flexbox-Elementen vorhanden sind.

default align-content: stretch;

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.

align-content: flex-start;

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

align-content: flex-end;

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

align-content: center;

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

align-content: space-between;

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

align-content: space-around;

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.

# Elemente ausrichten

Definiert , wie FlexBox Elemente ausgerichtet sind , entsprechend der Querachse innerhalb einer Zeile eines FlexBox Behälter.

align-items: flex-start;

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 .

align-items: flex-end;

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.

align-items: center;

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 .

align-items: baseline;

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.

align-items: stretch;

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.

# align-self

Funktioniert wie align-items, gilt jedoch nur für ein einzelnes Flexbox-Element anstelle aller .

align-self: flex-start;

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 .

align-self: flex-end;

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 .

align-self: center;

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 .

align-self: baseline;

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.

align-self: stretch;

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

# Animationsverzögerung

Legt fest, wie lange die Animation warten muss, bevor sie gestartet wird . Die Animation wird nur bei der ersten Iteration verzögert .

default animation-delay: 0s;

Die Animation wartet null Sekunden und startet somit sofort.

animation-delay: 1.2s;

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

animation-delay: 2400ms;

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

animation-delay: -500ms;

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

# Animationsrichtung

Legt fest, in welche Richtung die Animation abgespielt wird.

default animation-direction: normal;

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

animation-direction: reverse;

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

animation-direction: alternate;

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

animation-direction: alternate-reverse;

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

# Animationsdauer

Legt fest, wie lange die Animation dauert.

default animation-duration: 0s;

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

animation-duration: 1.2s;

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

animation-duration: 2400ms;

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

# Animationsfüllmodus

Definiert, was passiert, bevor eine Animation startet und nachdem sie endet. Im Füllmodus können Sie dem Browser mitteilen, ob die Stile der Animation auch außerhalb der Animation angewendet werden sollen .

default animation-fill-mode: none;

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.

animation-fill-mode: forwards;

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

animation-fill-mode: backwards;

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

animation-fill-mode: both;

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

# animation-iteration-count

Legt fest, wie oft die Animation abgespielt wird.

default animation-iteration-count: 1;

Die Animation wird nur einmal abgespielt .

animation-iteration-count: 2;

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

animation-iteration-count: infinite;

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

# Animationsname

Definiert, welche Animations-Keyframes verwendet werden sollen.

default animation-name: none;

Wenn kein Animationsname angegeben ist, wird keine Animation abgespielt.

animation-name: fadeIn;

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;
  }}
}}

animation-name: moveRight;

Ein weiteres Beispiel: die moveRightAnimation:

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

# Animation-Play-Status

Legt fest, ob eine Animation abgespielt wird oder nicht.

default animation-play-state: running;

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

animation-play-state: paused;

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);
  }}
}}

# Animation-Timing-Funktion

Definiert, wie die Werte zwischen dem Start und dem Ende der Animation berechnet werden.

default animation-timing-function: ease;

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

animation-timing-function: ease-in;

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

animation-timing-function: ease-out;

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

animation-timing-function: ease-in-out;

Wie ease, aber ausgeprägter.

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

animation-timing-function: linear;

Die Animation hat eine * konstante Geschwindigkeit .

animation-timing-function: step-start;

Die Animation springt sofort in den Endzustand .

animation-timing-function: step-end;

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

animation-timing-function: steps(4, end);

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.

# Animation

# Hintergrund-Anhang

Definiert, wie sich das Hintergrundbild beim Scrollen der Seite verhält.

default background-attachment: scroll;

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

background-attachment: fixed;

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.

# Hintergrund-Clip

Legt fest , wie weit der Hintergrund sollte verlängern innerhalb des Elements.

default background-clip: border-box;

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

background-clip: padding-box;

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

background-clip: content-box;

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

# Hintergrundfarbe

Definiert die Farbe des Hintergrunds des Elements.

default background-color: transparent;

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

background-color: red;

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

background-color: #05ffb0;

Sie können hexadezimale Farbcodes verwenden.

background-color: rgb(50, 115, 220);

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 .

background-color: rgba(50, 115, 220, 0.3);

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.

background-color: hsl(14, 100%, 53%);

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%

background-color: hsla(14, 100%, 53%, 0.6);

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.

# Hintergrundbild

Definiert ein Bild als Hintergrund des Elements.

default background-image: none;

Entfernt Hintergrundbilder.

background-image: url(/images/jt.png);

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.

background-image: linear-gradient(red, blue);

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.

background-image: linear-gradient(45deg, red, blue);

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.

background-image: radial-gradient(green, purple);

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.

background-image: radial-gradient(circle, green, purple);

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

background-image: radial-gradient(circle, green 0%, purple 20%, orange 100%);

Sie können festlegen , Farbstopps mit Prozentwerten.

background-image: radial-gradient(circle closest-side, green 0%, purple 20%, orange 100%);

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

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

background-image: radial-gradient(circle closest-side at 45px 45px, green 0%, purple 20%, orange 100%);

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

# Hintergrundursprung

Definiert den Ursprung des Hintergrundbildes.

default background-origin: padding-box;

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

background-origin: border-box;

Das Hintergrundbild beginnt unter dem Rand.

background-origin: content-box;

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

# Hintergrundposition

Definiert die Position des Hintergrundbildes.

default background-position: 0% 0%;

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

background-position: bottom right;

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

background-position: center center;

Das Hintergrundbild wird in der Mitte des Elements positioniert.

# Hintergrundwiederholung

Definiert, wie sich das Hintergrundbild ausgehend von der Hintergrundposition über den Hintergrund des Elements wiederholt.

default background-repeat: repeat;

Das Hintergrundbild wiederholt sich sowohl horizontal als auch vertikal .

background-repeat: repeat-x;

Das Hintergrundbild wiederholt sich nur horizontal .

background-repeat: repeat-y;

Das Hintergrundbild wiederholt sich nur vertikal .

background-repeat: no-repeat;

Das Hintergrundbild wird nur einmal angezeigt .

# Hintergrundgröße

Definiert die Größe des Hintergrundbildes.

default background-size: auto auto;

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 .

background-size: 120px 80px;

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

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

background-size: 100% 50%;

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

background-size: contain;

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

background-size: cover;

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

# Hintergrund

# border-bottom-color

Wie border-color, aber nur für den unteren Rand.

border-bottom-color: transparent;

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

border-bottom-color: red;

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

border-bottom-color: #05ffb0;

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

# Rand-unten-links-Radius

Definiert den Radius der unteren linken Ecke.

default border-bottom-left-radius: 0;

Entfernt alle Randradien.

border-bottom-left-radius: 20px;

Sie können Pixelwerte verwenden.

border-bottom-left-radius: 50%;

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.

border-bottom-left-radius: 20px 50%;

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

# Rand-unten-rechts-Radius

Definiert den Radius der unteren rechten Ecke.

default border-bottom-right-radius: 0;

Entfernt alle Randradien.

border-bottom-right-radius: 20px;

Sie können Pixelwerte verwenden.

border-bottom-right-radius: 50%;

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.

border-bottom-right-radius: 20px 50%;

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

# border-bottom-style

Wie border-style, aber nur für den unteren Rand.

default border-bottom-style: none;

Entfernt den unteren Rand.

border-bottom-style: dotted;

Verwandelt den unteren Rand in eine Folge von Punkten.

border-bottom-style: dashed;

Verwandelt den unteren Rand in eine Folge von Strichen.

border-bottom-style: solid;

Verwandelt den unteren Rand in eine durchgezogene Linie.

border-bottom-style: double;

Teilt den unteren Rand in zwei Zeilen.

border-bottom-style: groove;

Legt einen Einschubstil für den unteren Rand fest.

# border-bottom-width

Wie border-width, aber nur für den unteren Rand.

default border-bottom-width: 0;

Entfernt den unteren Rand.

border-bottom-width: 4px;

Sie können Pixelwerte verwenden.

# Rand unten

border-bottom: 4px dotted red;

Die Reihenfolge ist wichtig:

  • Breite
  • Stil
  • Farbe

border-bottom: 2px solid;

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

# Border-Collapse

Definiert, ob Tabellenränder getrennt oder reduziert werden sollen.

default border-collapse: separate;

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 .

border-collapse: collapse;

Angrenzend Tabellenzellen werden fusionieren ihre Grenzen zusammen.

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

# Rahmenfarbe

Definiert die Farbe der Rahmen des Elements.

default border-color: transparent;

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

border-color: red;

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

border-color: #05ffb0;

Sie können hexadezimale Farbcodes verwenden.

border-color: rgb(50, 115, 220);

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.

border-color: rgba(50, 115, 220, 0.3);

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).

border-color: hsl(14, 100%, 53%);

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%

border-color: hsla(14, 100%, 53%, 0.6);

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.

# Rand-links-Farbe

Wie border-color, aber nur für den linken Rand.

border-left-color: transparent;

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

border-left-color: red;

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

border-left-color: #05ffb0;

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

# border-left-style

Wie border-style, aber nur für den linken Rand.

default border-left-style: none;

Entfernt den linken Rand.

border-left-style: dotted;

Verwandelt den linken Rand in eine Folge von Punkten.

border-left-style: dashed;

Verwandelt den linken Rand in eine Folge von Strichen.

border-left-style: solid;

Verwandelt den linken Rand in eine durchgezogene Linie.

border-left-style: double;

Teilt den linken Rand in zwei Zeilen.

border-left-style: groove;

Legt einen Einfügungsstil am linken Rand fest.

# border-left-width

Wie border-width, aber nur für den linken Rand.

default border-left-width: 0;

Entfernt den linken Rand.

border-left-width: 4px;

Sie können Pixelwerte verwenden.

# Rand links

Kurzschrift Eigentum für border-left-width border-left-styleund border-left-color.

border-left: 4px dotted red;

Die Reihenfolge ist wichtig:

  • Breite
  • Stil
  • Farbe

border-left: 2px solid;

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

# Randradius

Definiert den Radius der Ecken des Elements.

default border-radius: 0;

Entfernt alle Randradien.

border-radius: 20px;

Sie können Pixelwerte verwenden.

border-radius: 50%;

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

border-radius: 20px 50%;

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

# border-right-color

Wie border-color, aber nur für die rechte Grenze.

border-right-color: transparent;

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

border-right-color: red;

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

border-right-color: #05ffb0;

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

# border-right-style

Wie border-style, aber nur für die rechte Grenze.

default border-right-style: none;

Entfernt den rechten Rand.

border-right-style: dotted;

Verwandelt den rechten Rand in eine Folge von Punkten.

border-right-style: dashed;

Verwandelt den rechten Rand in eine Folge von Strichen.

border-right-style: solid;

Verwandelt den rechten Rand in eine durchgezogene Linie.

border-right-style: double;

Teilt den rechten Rand in zwei Zeilen.

border-right-style: groove;

Legt einen Einschubstil auf den rechten Rand fest.

# border-right-width

Wie border-width, aber nur für die rechte Grenze.

default border-right-width: 0;

Entfernt den rechten Rand.

border-right-width: 4px;

Sie können Pixelwerte verwenden.

# Rand rechts

border-right: 4px dotted red;

Die Reihenfolge ist wichtig:

  • Breite
  • Stil
  • Farbe

border-right: 2px solid;

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

# Rahmenstil

Definiert den Stil der Rahmen des Elements.

default border-style: none;

Entfernt die Rahmen des Elements.

border-style: dotted;

Verwandelt den Rand in eine Folge von Punkten.

border-style: dashed;

Verwandelt den Rand in eine Folge von Strichen.

border-style: solid;

Verwandelt den Rand in eine durchgezogene Linie.

border-style: double;

Teilt den Rand in zwei Zeilen.

border-style: groove;

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

# border-top-color

Wie border-color, aber nur für den oberen Rand.

border-top-color: transparent;

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

border-top-color: red;

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

border-top-color: #05ffb0;

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

#border-top-left-radius

Defines the radius of the top left corner.

default border-top-left-radius: 0;

Removes any border radius.

border-top-left-radius: 20px;

You can use pixel values.

border-top-left-radius: 50%;

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

border-top-left-radius: 20px 50%;

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

#border-top-right-radius

Defines the radius of the top right corner.

default border-top-right-radius: 0;

Removes any border radius.

border-top-right-radius: 20px;

You can use pixel values.

border-top-right-radius: 50%;

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.

border-top-right-radius: 20px 50%;

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

# border-top-style

Wie border-style, aber nur für den oberen Rand.

default border-top-style: none;

Entfernt den oberen Rand.

border-top-style: dotted;

Verwandelt den oberen Rand in eine Folge von Punkten.

border-top-style: dashed;

Verwandelt den oberen Rand in eine Folge von Strichen.

border-top-style: solid;

Verwandelt den oberen Rand in eine durchgezogene Linie.

border-top-style: double;

Teilt den oberen Rand in zwei Linien.

border-top-style: groove;

Legt einen Einschubstil für den oberen Rand fest.

# border-top-width

Wie border-width, aber nur für den oberen Rand.

default border-top-width: 0;

Entfernt den oberen Rand.

border-top-width: 4px;

Sie können Pixelwerte verwenden.

# border-top

Kurzschrift Eigentum für border-top-width border-top-styleund border-top-color.

border-top: 4px dotted red;

Die Reihenfolge ist wichtig:

  • Breite
  • Stil
  • Farbe

border-top: 2px solid;

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

# Randbreite

Definiert die Breite der Elementränder.

border-width: 1px;

Definiert die Breite aller Ränder auf 1px.

border-width: 2px 0;

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

# Grenze

Kurzschrift Eigentum für border-width border-styleund border-color.

border: 4px dotted red;

Die Reihenfolge ist wichtig:

  • Breite
  • Stil
  • Farbe

border: 2px solid;

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

# unten

Definiert die Position des Elements entsprechend seiner unteren Kante.

default bottom: auto;

Das Element bleibt in seiner natürlichen Position.

bottom: 20px;

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

bottom: 0;

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

# Kastenschatten

Definiert den Schatten des Elements.

default box-shadow: none;

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

box-shadow: 2px 6px;

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.

box-shadow: 2px 6px red;

Sie können eine Farbe als letzten Wert definieren.

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

box-shadow: 2px 4px 10px red;

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

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

box-shadow: 2px 4px 10px 4px red;

Der optionale vierte Wert definiert die Ausbreitung des Schattens.

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

# Box-Größe

Definiert, wie die Breite und Höhe des Elements berechnet werden: ob sie die Polsterung und die Ränder enthalten oder nicht.

default box-sizing: content-box;

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.

box-sizing: border-box;

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 .

# klar

Verschiebt das Element nach allen vorhergehenden schwebenden Elementen.

clear: none;

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 .

clear: left;

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

clear: right;

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

clear: both;

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

#color

Defines the color of the text.

color: transparent;

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

color: red;

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

color: #05ffb0;

Sie können hexadezimale Farbcodes verwenden.

color: rgb(50, 115, 220);

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 .

color: rgba(0, 0, 0, 0.5);

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.

color: hsl(14, 100%, 53%);

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%

color: hsla(14, 100%, 53%, 0.6);

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.

# Spaltenanzahl

Definiert die Anzahl der Spalten des Elements.

default column-count: auto;

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

column-count: 3;

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

# Spaltenlücke

Definiert die Lücke zwischen den Spalten des Elements.

default column-gap: normal;

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

column-gap: 2px;

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 .

# Spaltenbreite

Definiert die Anzahl der Spalten des Elements.

default column-width: auto;

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.

column-width: 10px;

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.

# Inhalt

Definiert den Textinhalt der :beforeund :afterPseudo-Elemente.

default content: normal;

Dem Element wird kein Inhalt hinzugefügt.

content: "Foo bar";

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 .

content: url(/images/jt.png);

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

content: attr(data-something);

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 .

# Cursor

Legt den Mauszeiger fest, wenn Sie den Mauszeiger über das Element bewegen.

cursor: default;

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.

cursor: auto;

Auto

cursor: pointer;

Zeiger

cursor: move;

Bewegung

cursor: crosshair;

Fadenkreuz

cursor: text;

Text

cursor: wait;

warten

cursor: helpe-resize;

Größe ändern

cursor: ne-resize;

ne-resize

cursor: nw-resize;

nw-resize

cursor: n-resize;

n-Größe ändern

cursor: se-resize;

Größe ändern

cursor: sw-resize;

sw-resize

cursor: s-resize;

S-Größe ändern

cursor: w-resize;

w-resize

# Anzeige

Legt das Anzeigeverhalten des Elements fest.

display: none;

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

display: inline;

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

Jede heightund widthangewandte hat keine Wirkung.

display: block;

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

display: inline-block;

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;
}}

display: list-item;

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

display: table;

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

Der Inhalt und die untergeordneten Elemente verhalten sich wie Tabellenzellen.

display: table-cell;

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

Der Inhalt und die untergeordneten Elemente verhalten sich wie Tabellenzellen.

display: table-row;

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

Der Inhalt und die untergeordneten Elemente verhalten sich wie Tabellenzellen.

display: flex;

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

Die untergeordneten Elemente werden in Flexbox-Elemente umgewandelt .

display: inline-flex;

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;
}}

# Flex-Basis

Definiert die Anfangsgröße eines Flexbox-Elements.

default flex-basis: auto;

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

flex-basis: 80px;

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

# Flex-Richtung

Definiert, wie Flexbox-Artikel in einem Flexbox-Container bestellt werden.

default flex-direction: row;

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

flex-direction: row-reverse;

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

flex-direction: column;

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

flex-direction: column-reverse;

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

# Flex-Flow

Kurzschrift Eigentum für flex-directionund flex-flow.

# flex-grow

Definiert, um wie viel ein Flexbox-Element wachsen soll , wenn Speicherplatz verfügbar ist.

default flex-grow: 0;

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

flex-grow: 1;

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

flex-grow: 2;

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

# Flex-Shrink

Legt fest, um wie viel ein Flexbox-Element verkleinert werden soll, wenn nicht genügend Speicherplatz verfügbar ist.

default flex-shrink: 1;

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.

flex-shrink: 0;

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 .

flex-shrink: 2;

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

# Flex-Wrap

Definiert, ob Flexbox-Elemente in einer einzelnen Zeile oder in mehreren Zeilen innerhalb eines Flexbox-Containers angezeigt werden.

default flex-wrap: nowrap;

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

flex-wrap: wrap;

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

flex-wrap: wrap-reverse;

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

# float

Schiebt das Element entweder nach links oder nach rechts . Die folgenden Geschwister wickeln sich um das schwebende Element

default float: none;

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

float: left;

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

float: right;

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.

# Schriftfamilie

font-family: "Source Sans Pro", "Arial", sans-serif;

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 .

font-family: serif;

Der Browser verwendet eine Serifenschriftfamilie : Alle Zeichen haben Strichenden .

font-family: sans-serif;

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

font-family: monospace;

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

font-family: cursive;

Der Browser verwendet eine kursive Schriftfamilie.

font-family: fantasy;

Der Browser verwendet eine Fantasy- Schriftfamilie.

# Schriftgröße

Definiert die Größe des Textes.

default font-size: medium;

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

font-size: 20px;

Sie können Pixelwerte verwenden.

font-size: 1.2em;

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.

font-size: 1.2rem;

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.

font-size: 90%;

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.

font-size: smaller;

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

Folgendes ist verfügbar:

  • larger
  • smaller

font-size: x-large;

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

# Schriftstil

Definiert, wie stark der Text geneigt ist.

default font-style: normal;

Der Text ist nicht geneigt.

font-style: italic;

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

font-style: oblique;

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

# Schriftvariante

Definiert, welche Glyphe für jeden Buchstaben verwendet werden soll.

default font-variant: normal;

Jeder Buchstabe verwendet seine normale Glyphe.

font-variant: small-caps;

Jeder Buchstabe verwendet seine kleinformatige Version.

# Schriftgröße

Definiert die Gewichtung des Textes.

default font-weight: normal;

Der Text ist normalgewichtig .

font-weight: bold;

Der Text wird fett .

font-weight: 600;

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.

font-weight: lighter;

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

# Schriftart

# Höhe

Definiert die Höhe des Elements.

default height: auto;

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

height: 100px;

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 .

# Inhalt rechtfertigen

Definiert , wie FlexBox Elemente ausgerichtet sind , entsprechend der Hauptachse innerhalb eines FlexBox Behälter.

default justify-content: flex-start;

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

justify-content: flex-end;

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

justify-content: center;

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

justify-content: space-between;

Der verbleibende Raum verteilt zwischen dem Flexbox Artikel.

justify-content: space-around;

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

# links

Definiert die Position des Elements entsprechend seiner linken Kante.

default left: auto;

Das Element bleibt in seiner natürlichen Position.

left: 80px;

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

left: -20px;

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

# Buchstabenabstand

Definiert den Abstand zwischen den Zeichen eines Textblocks.

default letter-spacing: normal;

Der Abstand zwischen den Zeichen ist normal .

letter-spacing: 2px;

Sie können Pixelwerte verwenden.

letter-spacing: 0.1em;

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

# Zeilenhöhe

Definiert die Höhe einer einzelnen Textzeile.

default line-height: normal;

Stellt den Standardwert des Browsers wieder her.

recommended line-height: 1.6;

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

line-height: 30px;

Sie können Pixelwerte verwenden.

line-height: 0.8em;

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

# list-style-image

Definiert das Bild , das als Aufzählungspunkt eines Listenelements verwendet werden soll .

default list-style-image: none;

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

list-style-image: url(/images/list-style-image.png);

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

# Listenstil-Position

Definiert die Position der Aufzählungspunkte einer Liste.

default list-style-position: outside;

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.

list-style-position: inside;

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.

# list-style-type

Definiert den Typ eines der Listenpunkt Aufzählungspunkt .

default list-style-type: disc;

Die Listenelemente verwenden eine Disc als Aufzählungspunkt.

list-style-type: circle;

Die Listenelemente verwenden einen Kreis als Aufzählungspunkt.

list-style-type: square;

Die Listenelemente verwenden ein Quadrat als Aufzählungspunkt.

list-style-type: decimal;

Die Listenelemente verwenden eine Dezimalstelle als Aufzählungszeichen.

list-style-type: none;

Die Listenelemente haben keinen Aufzählungspunkt.

# Listenstil

Kurzschrift Eigentum für list-style-type list-style-imageund list-style-position.

# Rand-unten

Definiert den Raum außerhalb des Elements auf der Unterseite .

default margin-bottom: 0;

Entfernt alle Ränder am unteren Rand.

margin-bottom: 30px;

Sie können Pixelwerte verwenden.

margin-bottom: 2em;

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

margin-bottom: 10%;

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

# Rand links

Definiert den Raum außerhalb des Elements auf der linken Seite.

default margin-left: 0;

Entfernt alle Ränder links.

margin-left: 50px;

Sie können Pixelwerte verwenden.

margin-left: 7em;

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

margin-left: 30%;

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

margin-left: auto;

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.

# Rand rechts

Definiert den Raum außerhalb des Elements auf der rechten Seite.

default margin-right: 0;

Entfernt alle Ränder rechts.

margin-right: 50px;

Sie können Pixelwerte verwenden.

margin-right: 7em;

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

margin-right: 30%;

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

margin-right: auto;

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.

# Rand oben

Definiert den Raum außerhalb des Elements auf der Oberseite .

default margin-top: 0;

Entfernt alle Ränder oben.

margin-top: 30px;

Sie können Pixelwerte verwenden.

margin-top: 2em;

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

margin-top: 10%;

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

# Rand

Kurzschrift Eigentum für margin-top margin-right margin-bottomund margin-left.

default margin: 0;

Entfernt alle Ränder.

margin: 30px;

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

margin: 30px 60px;

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.

margin: 30px 60px 45px;

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.

margin: 30px 60px 45px 85px;

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 .

# maximale Höhe

Definiert die maximale Höhe des Elements.

default max-height: none;

Das Element hat keine Höhenbeschränkung.

max-height: 2000px;

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 .

max-height: 100px;

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 .

# max-width

Definiert die maximale Breite des Elements.

default max-width: none;

Das Element hat keine Begrenzung in Bezug auf die Breite.

max-width: 2000px;

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 .

max-width: 150px;

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

# min-Höhe

Definiert die Mindesthöhe des Elements.

default min-height: 0;

Das Element hat keine Mindesthöhe .

min-height: 200px;

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.

min-height: 5px;

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

# min-width

Definiert die Mindestbreite des Elements.

default min-width: 0;

Das Element hat keine Mindestbreite .

min-width: 300px;

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.

min-width: 5px;

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

# mix-blend-mode

Legt fest , wie das Element sollte verschmelzen mit dem Hintergrund.

default mix-blend-mode: normal;

Das Element wird nicht gemischt.

mix-blend-mode: multiply;

Das Element verwendet den Multiplikationsmischmodus .

mix-blend-mode: screen;

Das Element verwendet den Bildschirmüberblendungsmodus .

mix-blend-mode: overlay;

Das Element verwendet den Overlay- Mischmodus.

mix-blend-mode: darken;

Das Element verwendet den Verdunkelungsmodus zum Abdunkeln.

mix-blend-mode: lighten;

Das Element verwendet den Aufhellungsmodus .

mix-blend-mode: color-dodge;

Das Element verwendet den Farbausweich-Mischmodus .

mix-blend-mode: color-burn;

Das Element verwendet den Farbbrenn- Mischmodus.

mix-blend-mode: hard-light;

Das Element verwendet den Hard-Light- Mischmodus.

mix-blend-mode: soft-light;

Das Element verwendet den Soft-Light- Mischmodus.

mix-blend-mode: difference;

Das Element verwendet den Differenzmischmodus .

mix-blend-mode: exclusion;

Das Element verwendet den Ausschlussmischmodus .

mix-blend-mode: hue;

Das Element verwendet den Farbtonmischmodus .

mix-blend-mode: saturation;

Das Element verwendet den Sättigungsmischmodus .

mix-blend-mode: color;

Das Element verwendet den Farbmischmodus .

mix-blend-mode: luminosity;

Das Element verwendet den Helligkeitsmischmodus .

# Deckkraft

Definiert, wie undurchsichtig das Element ist.

default opacity: 1;

Das Element ist vollständig undurchsichtig .

opacity: 0;

Das Element ist vollständig transparent .

opacity: 0.3;

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

# bestellen

Definiert die Reihenfolge eines Flexbox-Elements.

default order: 0;

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

order: 1;

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.

order: -1;

Sie können negative Werte verwenden.

order: 9;

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

# Umrissfarbe

Definiert die Farbe der Umrisse des Elements.

default outline-color: transparent;

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

outline-color: red;

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

outline-color: #05ffb0;

Sie können hexadezimale Farbcodes verwenden.

outline-color: rgb(50, 115, 220);

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 .

outline-color: rgba(50, 115, 220, 0.3);

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.

outline-color: hsl(14, 100%, 53%);

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%

outline-color: hsla(14, 100%, 53%, 0.6);

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.

# Gliederungsstil

Definiert den Stil der Umrisse des Elements.

default outline-style: none;

Entfernt die Umrisse des Elements.

outline-style: dotted;

Verwandelt den Umriss in eine Folge von Punkten.

outline-style: dashed;

Verwandelt den Umriss in eine Folge von Strichen.

outline-style: solid;

Verwandelt den Umriss in eine durchgezogene Linie.

outline-style: double;

Teilt den Umriss in zwei Linien.

outline-style: groove;

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

# Umrissbreite

Definiert die Breite der Umrisse des Elements.

default outline-width: medium;

Definiert die Breite aller Konturen bis mittel .

outline-width: 1px;

Definiert die Breite aller Konturen auf 1 Pixel .

# Gliederung

Kurzschrift Eigentum für outline-width outline-styleund outline-color.

outline: 4px dotted red;

Die Reihenfolge ist wichtig:

  • Breite
  • Stil
  • Farbe

outline: 2px solid;

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

# Überlaufverpackung

Definiert, ob Wörter am Ende einer Zeile unterbrochen werden sollen.

default overflow-wrap: normal;

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

overflow-wrap: break-word;

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

# overflow-x

Definiert, wie überlaufender Inhalt auf der horizontalen Achse angezeigt wird.

default overflow-x: visible;

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

overflow-x: hidden;

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

overflow-x: scroll;

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

overflow-x: auto;

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

# Überlauf-y

Definiert, wie überlaufender Inhalt auf der vertikalen Achse angezeigt wird.

default overflow-y: visible;

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

overflow-y: hidden;

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

overflow-y: scroll;

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

overflow-y: auto;

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

# Überlauf

Definiert, wie überlaufender Inhalt auf der horizontalen und vertikalen Achse angezeigt wird.

default overflow: visible;

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

overflow: hidden;

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

overflow: scroll;

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

overflow: auto;

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

# Polsterung unten

Definiert den Raum innerhalb des Elements auf der Unterseite .

default padding-bottom: 0;

Entfernt alle Polsterungen an der Unterseite.

padding-bottom: 50px;

Sie können Pixelwerte verwenden.

padding-bottom: 7em;

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

padding-bottom: 30%;

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

# links auffüllen

Definiert den Raum innerhalb des Elements auf der linken Seite.

default padding-left: 0;

Entfernt alle Polster auf der linken Seite.

padding-left: 50px;

Sie können Pixelwerte verwenden.

padding-left: 7em;

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

padding-left: 30%;

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

# Polsterung rechts

Definiert den Raum innerhalb des Elements auf der rechten Seite.

default padding-right: 0;

Entfernt alle Polster auf der rechten Seite.

padding-right: 50px;

Sie können Pixelwerte verwenden.

padding-right: 7em;

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

padding-right: 30%;

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

# Polsterung

Definiert den Raum innerhalb des Elements auf der Oberseite .

default padding-top: 0;

Entfernt alle Polster auf der Oberseite.

padding-top: 50px;

Sie können Pixelwerte verwenden.

padding-top: 7em;

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

padding-top: 30%;

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

# Polsterung

Kurzschrift Eigentum für padding-top padding-right padding-bottomund padding-left.

default padding: 0;

Entfernt alle Polster.

padding: 30px;

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

padding: 30px 60px;

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.

padding: 30px 60px 45px;

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.

padding: 30px 60px 45px 85px;

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 .

# Zeigerereignisse

Definiert, ob das Element auf Zeigerereignisse reagiert oder nicht.

default pointer-events: auto;

Das Element reagiert auf Zeigerereignisse wie :hoveroder click.

pointer-events: none;

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

# Position

Definiert das Positionsverhalten des Elements.

default position: static;

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

position: relative;

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

position: absolute;

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

position: fixed;

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

# Größe ändern

Definiert, ob die Größe des Textbereichs geändert werden kann oder nicht.

default resize: none;

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

resize: horizontal;

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

resize: vertical;

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

resize: both;

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

# Text ausrichten

Definiert, wie der Textinhalt des Elements horizontal ausgerichtet wird.

text-align: left;

Der Textinhalt ist nach links ausgerichtet .

text-align: right;

Der Textinhalt ist rechts ausgerichtet .

text-align: center;

Der Textinhalt ist zentriert .

text-align: justify;

Der Textinhalt ist gerechtfertigt .

# Textdekoration

Definiert, wie der Textinhalt des Elements dekoriert wird.

default text-decoration: none;

Entfernt jegliche Textdekoration.

text-decoration: underline;

Unterstreicht den Textinhalt.

# Text-Einzug

Definiert den Einzug der ersten Textzeile des Elements.

default text-indent: 0;

Der Text wird nicht eingerückt.

text-indent: 40px;

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

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

text-indent: -2em;

Sie können auch negative Werte verwenden.

# Textüberlauf

Definiert, wie sich der verborgene Textinhalt verhält, wenn er überläuft.

default text-overflow: clip;

Der Textinhalt ist abgeschnitten und nicht zugänglich.

text-overflow: ellipsis;

Der überlaufende Inhalt wird durch ein Auslassungszeichen ersetzt :…

# Textschatten

Definiert den Schatten des Textinhalts.

default text-shadow: none;

Der Textinhalt hat keinen Schatten .

text-shadow: 2px 6px;

Sie brauchen wenigstens zwei Werte :

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

Die Schattenfarbe wird von der Textfarbe übernommen.

text-shadow: 2px 6px red;

Sie können eine Farbe als letzten Wert definieren.

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

text-shadow: 2px 4px 10px red;

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

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

# Texttransformation

Definiert, wie der Textinhalt transformiert werden soll.

default text-transform: none;

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

text-transform: capitalize;

Schaltet den ersten Buchstaben jedes Wortes in einen Kapital Brief.

text-transform: uppercase;

Schaltet alle Buchstaben in der Hauptstadt Buchstaben.

text-transform: lowercase;

Verwandelt alle Buchstaben in Kleinbuchstaben .

# top

Definiert die Position des Elements entsprechend seiner Oberkante.

default top: auto;

Das Element bleibt in seiner natürlichen Position.

top: 20px;

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

top: 0;

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

# transform-origin

Definiert den Ursprung für Transformationen, die von der transformEigenschaft definiert werden .

default transform-origin: 50% 50% 0;

Der Transformationsursprung befindet sich in der Mitte des Elements.

transform-origin: 20px 70%;

Sie können 2 Werte verwenden :

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

transform-origin: top right;

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

transform-origin: center bottom;

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

# transformieren

Definiert, wie das Element transformiert wird.

default transform: none;

Entfernt alle Transformationen.

transform: translateX(40px);

Bewegen Sie das Element auf der horizontalen Achse.

transform: translateY(20px);

Bewegen Sie das Element auf der vertikalen Achse.

transform: translateY(100%);

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

transform: translate(20px, -10%);

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

transform: scaleX(1.5);

Skalieren Sie das Element auf der horizontalen Achse.

transform: scaleY(0.4);

Skalieren Sie das Element auf der vertikalen Achse.

transform: scaleY(-2);

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

transform: scale(0.8, 0.8);

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 .

transform: rotate(45deg);

Drehen Sie das Element.

Sie können verwenden:

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

transform: skewX(15deg);

Neigen Sie das Element auf der horizontalen Achse.

transform: skewY(45deg);

Neigen Sie das Element auf der vertikalen Achse.

transform: skew(10deg, -20deg);

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

transform: rotate(5deg) scale(1.1, 1.1) translate(-20%, 30px);

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

# Übergangsverzögerung

Legt fest, wie lange der Übergang warten muss, bevor er gestartet wird .

default transition-delay: 0s;

Der Übergang wartet null Sekunden und beginnt somit sofort.

transition-delay: 1.2s;

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

transition-delay: 2400ms;

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

transition-delay: -500ms;

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

# Übergangsdauer

Legt fest, wie lange der Übergang dauert.

default transition-duration: 0s;

Der Übergang dauert null Sekunden und ist somit sofort .

transition-duration: 1.2s;

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

transition-duration: 2400ms;

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

# Übergangseigenschaft

Definiert, welche Eigenschaften übergehen.

default transition-property: all;

Das Element übergibt alle Eigenschaften:

transition-property: none;

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

transition-property: background;

Das Element transtioniert nur die Hintergrundeigenschaft .

transition-property: color;

Das Element transtioniert nur die Farbeigenschaft .

transition-property: transform;

Das Element transtioniert nur die Transformationseigenschaft .

# Transition-Timing-Funktion

Definiert, wie die Werte zwischen dem Beginn und dem Ende des Übergangs berechnet werden.

default transition-timing-function: ease;

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

transition-timing-function: ease-in;

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

transition-timing-function: ease-out;

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

transition-timing-function: ease-in-out;

Mögen ease, aber ausgeprägter.

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

transition-timing-function: linear;

Der Übergang hat eine * konstante Geschwindigkeit .

transition-timing-function: step-start;

Der Übergang springt sofort in den Endzustand .

transition-timing-function: step-end;

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

transition-timing-function: steps(4, end);

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.

# Übergang

Kurzschrift Eigentum für transition-property transition-duration transition-timing-functionund transition-delay.

Nur transition-durationist erforderlich .

transition: 1s;

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

transition: 1s linear;

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

transition: background 1s linear;

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

transition: background 1s linear 500ms;

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

transition: background 4s, transform 1s;

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

# Leerraum

Definiert, wie der Leerraum des Elements behandelt wird.

default white-space: normal;

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

white-space: nowrap;

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

white-space: pre;

Der Leerraum bleibt exakt erhalten .

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

white-space: pre-wrap;

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

white-space: pre-line;

Es bleiben nur neue Zeilen erhalten.

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

# width

Definiert die Breite des Elements.

default width: auto;

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

width: 240px;

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

width: 50%;

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

# wird sich ändern

Definiert, welche Eigenschaften sich in Zukunft voraussichtlich ändern werden (entweder über CSS oder JavaScript).

default will-change: auto;

Weist den Browser nicht an, eine Eigenschaft zu optimieren .

will-change: scroll-position;

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

will-change: contents;

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

will-change: box-shadow;

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.

# Wortumbruch

Definiert, wie Wörter am Ende einer Zeile unterbrochen werden sollen.

default word-break: normal;

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

word-break: break-all;

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

# Wortabstand

Definiert den Abstand zwischen Wörtern eines Textblocks.

default word-spacing: normal;

Der Abstand zwischen den Zeichen ist normal .

word-spacing: 5px;

Sie können Pixelwerte verwenden.

word-spacing: 2em;

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

# z-index

Definiert die Reihenfolge der Elemente auf der z-Achse * 8. Es funktioniert nur bei positionierten ** Elementen (außer static).

default z-index: auto;

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

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

z-index: 1;

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

z-index: -1;

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