CSS-Styling:

Tools, die Seiteninhalte gestalten

• Breite: width } auto/ initial

• heigt: height } min/ max

• inherit: behält die bereits definierte Kennzahl bei

• Rand: oben/links/rechts/unten

• padding: Abstand zwischen internem und externem Inhalt

• Box-Größe: Bringt das Element auf vordefinierte Größen zurück

Farben in CSS

• RGB: Werte zwischen 0 und 255 zur Definition der Rot-, Grün- und Blautöne, durch Komma getrennt. Beispiel:

#rgb{
   color: rgb(250, 30, 70);
}

Der Wert 250 steht für Rot, 30 steht für Grün und 70 steht für Blau, was in diesem Fall zu etwas Ähnlichem führen würde:

• RGBA: Sehr ähnlich zu RGB, jedoch wird der Transparenzfaktor hinzugefügt, der zwischen 0 und 1 variiert;
• HEX: Hexadezimal, definiert zwischen 0 und 9 und A bis F, wobei F der höchste Wert ist und einem RGB-ähnlichen Muster folgt. Beispiel:

00FF00 -> Grün
FF0000 -> Rot
0000FF -> Blau

#hex{
  color: #03BB76;
}

Es würde zu etwas führen wie:

• HSL (Farbton, Sättigung, Helligkeit): Definieren der Farbe durch ihren Farbton (0 Rot, 120 Grün, 240 Blau), Sättigung (0 % Grauton, 100 % Vollfarbe), Leuchtkraft (0 % Schwarz). , 100 % Weiß) – Es gibt auch HSLA, das auf dem Alpha-Faktor (0 bis 1) basiert, um den Grad der Transparenz zu messen. Beispiel:

#hsl{
  color: hsla(120, 100%, 50%, 1.0);
}

Diese Programmierung würde zu einer vollständig grünen Farbe führen, Sie können jedoch mithilfe des HSL-Farbkreises nach anderen Tönen suchen.

Mittel

• Hintergrundfarbe: einfarbige Hintergrundfarbe
• Hintergrundbild: Referenzbild im Hintergrund
• linearer Gradient: linearer Gradient
• radialer Gradient: kreisförmiger Gradient
• Wiederholen: Wiederholungseffekt

Hintergrundgröße: Definiert die Größe des Hintergrunds des Elements, zusammen mit den Einstellungen:

• auto: automatische Anpassung
• Abdeckung: Decken Sie den gesamten Raum des Elements ab
• enthalten: Größe des Inhalts ändern, sodass das vollständige/nicht zugeschnittene Bild angezeigt wird
• Wert: Legen Sie die Größe des Bildes innerhalb des Elements fest

Wiederholung Hintergrundwiederholung: definiert die Achse, auf der sich das Bild wiederholt:

• wiederholen: maximal mögliche Wiederholungen
• wiederholen-x: nur Wiederholungen auf der x-Achse (horizontal)
• wiederholen-y: nur Wiederholungen auf der y-Achse (vertikal)
• Leerzeichen: Wiederholt sich auf beiden Achsen, ohne durch Leerzeichen abgeschnitten zu werden
• rund: wird in alle Richtungen wiederholt, ohne dass es abgeschnitten wird, nur die Größe wird geändert
• no-repeat: keine Wiederholungen

Hintergrundposition: Positionierung von Hintergrundbildern
Mitte, links, rechts, x%,y%

Hintergrundanhang: Wie sich das Bild je nach Browserfenster verhält

• behoben: bewegt sich nicht
• scrollen: Es ist an ein Objekt gebunden
• local: „scrollt“ neben dem Inhalt

background-origin: Definiert den Bildpositionierungsbereich

• padding-box: Ursprungsecke neben padding
• border-box: Das Bild beginnt neben dem äußeren Bereich des Randes
• content-box: niedriger als padding, ausgerichtet auf Elementinhalt

background-flip: Definiert, ob die Farbe des Elements die Kanten abdeckt oder nicht

• padding-box: ausgerichtet auf padding
• border-box: border-aligned
• content-box: füllt den Inhaltsbereich
• Clip-Text: Hintergrund im Text (die Farbe muss transparent sein)

background-bland-mode: Auswirkungen auf den Hintergrund von Elementen

Kanten

• Rahmenbreite: Größe, die der Rahmen haben wird
• border-style: Rahmentyp
• Rahmenfarbe: Rahmenfarbe
• border-radius: Rundet den Rand ab

Rahmenbild

• Quelle: Legen Sie den Bildpfad fest
• width: Breite des Randbildes
• wiederholen: steuern, ob das Bild wiederholt wird oder nicht
• Anfang: Abstand vom Rand des Elements
• Slice: in Regionen aufteilen

Inhalt (Bild oder Video)

object-fit : Wie sich der Inhalt eines Elements in der festgelegten Box verhält

• füllen: den gesamten Raum füllen und verzerren
• enthalten: Es wird nicht verzerrt, passt aber in die festgelegten Maße
• Cover: Füllen Sie den gesamten Raum aus, ohne ihn zu verzerren.
• keine: ignoriert die Maße des übergeordneten Objekts und verwendet dessen Originalmaße
• Verkleinerung: kleinste Bildeinstellung ohne Verzerrung

Objektposition: Bild zentrieren

• x-Achse und y-Achse
• links, rechts, in der Mitte, oben, unten