CSS-Beispiel-Galerie

CSS-Text

• Stellen Sie die Textfarbe ein

• Textausrichtung

• Texteinzug

• Textdekoration

• Stellen Sie den Abstand zwischen den Zeichen ein

• Stellen Sie den Abstand zwischen den Wörtern ein

• Stellen Sie den Abstand zwischen den Textzeilen ein

• Behalten Sie Leerzeichen und Zeilenumbrüche bei

• Textumbruch im Element

• Vertikale Ausrichtung des Bildes im Text

CSS-Schriftarten

• Stellen Sie die Schriftart des Textes ein

• Stellen Sie die Größe der Schriftart ein

• Stellen Sie den Stil der Schriftart ein

• Stellen Sie die Variante der Schriftart ein

• Stellen Sie die Fettschrift der Schriftart ein

• Setzen Sie alle Schriftarten in einer einzigen Angabe-Kurzschreibweise für Schriftarten

CSS-Links

• Stellen Sie die Stile verschiedener Zustände der Links ein

• Entfernen Sie die Standardunterstreichung aus dem Hyperlink

• Entfernen Sie die gestrichelte Kontur aus dem Hyperlink

• Erstellen Sie einen Link-Frame

• Bilddrehen

CSS-Liste

• Geben Sie in der Liste die Aufzählungs- und Nummerierungszeichen an

• Stellen Sie die Position der Liste der Markierungen ein

• Setzen Sie das Bild als Markierung der Liste

• Erstellen Sie ein einfaches Dropdown-Menü

• Setzen Sie alle Listeattribute in einer einzigen Deklaration-Kurzschreibattribute der Liste

CSS Tabelle

• Setzen Sie die Kanten der Tabelle

• Bestimmen Sie die Größe der Tabelle

• Erstellen Sie eine bessere Tabelle durch das Falten der Tabellenkanten

• Setzen Sie die horizontale Ausrichtung des Texts in den Tabellenzellen

• Setzen Sie die vertikale Ausrichtung des Inhalts

• Bestimmen Sie, wie leere Zellen angezeigt werden sollen

• Bestimmen Sie die Füllung der Tabellenzellen

• Bestimmen Sie das Tabellenlayout-Algorithmus-Automatisch oder fest

• Setzen Sie die Position des Tabellenkopfes

CSS Hintergrund

• Setzen Sie die Hintergrundfarbe des Elements

• Setzen Sie das Bild als Hintergrund des Elements

• Horizontale oder vertikale Wiederholung des Hintergrundbilds

• Bestimmen Sie den Ort des Hintergrundbilds

• Feste Hintergrundbilder, die nicht mit den enthaltenen Elementen zusammenrollen

• Setzen Sie alle Hintergrundattribute auf einmal-Hintergrund Shorthand-Attribute

• Setzen Sie die Größe des Hintergrundbilds

• Setzen Sie den Schnitt des Hintergrunds

• Setzen Sie den Ursprung des Hintergrunds

• Fügen Sie mehreren Elementen mehrere Hintergründe hinzu

CSS Einheiten

• Verwenden Sie absolute Einheiten (z.B. px, pt, cm, etc.)

• Verwenden Sie relative Einheiten (z.B. em, ex, %, etc.)

CSS Größen

• Setzen Sie die Breite und Höhe des Elements

• Setzen Sie die Maximalbreite und -höhe des Elements

• Setzen Sie die Mindestbreite und -höhe des Elements

• Steuerung des Überflusses

CSS Ausrichten

• Ausrichten von Text und eingebetteten Elementen im Block-Element

• Verwenden Sie die Margenattribute, um Block-Elemente zentriert auszurichten

• Verwenden Sie das float-Attribut, um die Elemente horizontal auszurichten

• Verwenden Sie das position-Attribut, um die Elemente in horizontaler und vertikaler Richtung auszurichten

• Verhindern Sie, dass das Elternelement mit dem clear-Attribut kollabiert

• Erstellen Sie ein einfaches horizontales Menü

CSS Position

• Platzieren Sie das Element relativ zum Browserfenster

• Positionieren Sie das Element relativ zu seinem Elternelement

• Positionieren Sie das Element relativ zu seiner normalen Position

• Verwenden Sie z-Index-Attribut überlappende Elemente

CSS Anzeige

• Verwenden Sie das Sichtbarkeitsattribut, um das Element zu verbergen

• Verwenden Sie das display-Attribut, um das Element aus dem DOM zu löschen

• Zeigen Sie das Element als Inline-Element an

• Zeigen Sie das Element als Block-Element an

• Falten Sie die Tabellenlemente

CSS Kanten und Kontur

• Zeichnen Sie um das Element eine Kante

• Zeichnen Sie die Kanten um die Kanten des Elements

• Setzen Sie verschiedene Styles für die Kanten

• Setzen Sie alle Kantenattribute auf einmal-Kante Shorthand-Attribute

• Erstellen Sie um das Element runde Ecken

• Verwenden Sie ein Bild, um die Kante zu erstellen

• Zeichnen Sie um das Element eine Kontur

• Zeichnen Sie um das Element eine Kante ohne den umgebenden Elementen zu beeinflussen

CSS Margen und Füllung

• Setzen Sie die Margen der Kanten des Elements

• Setzen Sie alle Margenattribute in einer einzigen Deklaration-Margin Shorthand-Attribute

• Setzen Sie die Füllung der Kanten des Elements

• Setzen Sie alle Füllungsattribute auf einmal-Füllen Sie die Shorthand-Attribute

CSS Undurchsichtigkeit

• Setzen Sie die Transparenz des Elements

• Effekt der Bildwende und Transparenz

• Text in transparenten Kästen

Generierter Content von CSS

• Bestimmen Sie die Anführungszeichen

• Teile und Kategorien der automatischen Nummerierung

• Verwenden Sie CSS, um generiertes Content einzufügen

CSS Pseudo-Klassen

• Stellen Sie das Style für verschiedene Zustände der Hyperlinks ein

• Verwenden Sie :focus Pseudo-Klasse, um das Style der fokussierten Formularelemente zu setzen

• Verwenden Sie: first-child Pseudo-Klasse für das erste Kind des Elements Style setzen

• Verwenden Sie: first-child Pseudo-Klasse für den letzten Kind des Elements Stile einstellen

• Verwenden Sie: nth-child Pseudo-Klasse für das nth Kind des Elements-child Stile einstellen

• Verwenden Sie: lang() Pseudo-Klasse um Stile für eine bestimmte Sprache zu setzen

• Verwenden Sie Pseudo-Klassen mit Selectoren

CSS Pseudo-Elemente

• Verwenden Sie:: first-letter Pseudo-Element um den ersten Buchstaben nach unten zu setzen

• Verwenden Sie:: first-line Pseudo-Element um die erste Zeile des Textes auf verschiedene Weise zu setzen

• Verwenden Sie:: before oder:: after Pseudo-Elemente um Inhalte vor oder nach dem Element einzufügen

• Pseudo-Elemente in der Klasse verwenden

CSS3Verlauf

• Linearen Verlauf von oben nach unten erstellen

• Linearen Verlauf von links nach rechts erstellen

• Linearen Verlauf entlang der Diagonale erstellen

• Verwenden Sie Winkel um die Richtung des linearen Verlaufs zu setzen

• Verwenden Sie mehrere Farbstopps um linearen Verlauf zu erstellen

• Position der Farbstopp bei der Erstellung des Verlaufs einstellen

• Linearen Verlauf wiederholen

• Radialen Verlauf erstellen

• Form des radialen Verlaufs einstellen

• Größe des radialen Verlaufs einstellen

• Radialen Verlauf wiederholen

• Transparenz für Verläufe verwenden

CSS3Schatten

• Rahmenschatten Effekt erstellen

• Mehrere RahmenSchatten zu dem Rahmen des Elements hinzufügen

• Textschatteneffekt erstellen

CSS3 2D-Transformation

• Verwenden Sie translate() Methode Elemente bewegen

• Verwenden Sie Rotate() Methode Elemente drehen

• Verwenden Sie scale() Methode die Größe des Elements vergrößern oder verkleinern

• Verwenden Sie matrix() Methode anwenden2D-Transformationen

• Mehrere Transformationen auf Elemente anwenden

CSS3 3D-Transformation

• Verwenden Sie translate3d() Methode Elemente im dreidimensionalen Raum bewegen

• Verwenden Sie rotate3d() Methode Elemente im dreidimensionalen Raum drehen

• Verwenden Sie scale3d() Methode Elemente im dreidimensionalen Raum skalieren

• Verwenden Sie matrix3d() Methode anwenden3D-Transformationen

• Mehrere3D-Transformationen auf Elemente anwenden

CSS3Übergang

• Übergangseffekte auf die Hintergrundfarbe anwenden

• Übergangseffekte auf mehrere Attribute anwenden

• Alle Übergangseigenschaften auf einmal einstellen-Übergang Kurzschreibweise Eigenschaften

CSS3Animation

• Animationselemente auf der Webseite

• Kframes beim Erstellen der Animation definieren

• Alle Animationseigenschaften auf einmal einstellen-Animation Kurzschreibweise Eigenschaften

CSS3Mehrfachspaltenlayout

• Mehrfachspaltenlayout erstellen

• Anzahl der Spalten oder Breite einstellen

• Abstand zwischen den Spalten einstellen

• Regeln oder vertikale Linien zwischen den Spalten hinzufügen