Fortgeschrittene CSS-Techniken

Kursinhalt

Fortgeschrittene CSS-Techniken

Fortgeschrittene CSS-Techniken

1. Einführung

Kursübersicht Kursfokus Kursthemen Wie Man Erfolgreich Ist

2. Elementpositionierung

Was Ist Positionierung?Relative Positionierung Herausforderung: Relative Positionierung Absolute Positionierung Herausforderung: Absolute Positionierung Feste Positionierung Herausforderung: Feste Positionierung Sticky-Positionierung Herausforderung: Sticky Positionierung Stapelreihenfolge Herausforderung: Stapelreihenfolge Inhaltsüberlauf

3. Übergänge

Was Ist Eine Transition?Übergangseigenschaft Auswählen Übergangsdauer Übergangszeit Funktion Übergangszeitverzögerung Übergangskombination Herausforderung: Übergang Hinzufügen

4. Animationen

Was Ist Animation?Festlegen der Animationszeit Steuerung der Animationswiedergabemenge und -Richtung Verwaltung des Animationszustands Animationskomposition Herausforderung: Animation Hinzufügen

5. Transformationen

Was Ist Transformation?Skalierung Rotieren Herausforderung: Skalierung und Drehung Hinzufügen Übersetzen Schrägstellung Perspektive Herausforderung: Hinzufügen von Übersetzungen und Schrägstellungen

6. Adaptive/Responsive Websites und Apps

Was Ist Adaptives/Responsives Design?@media-Abfrage Adaptive - Responsive Layouts Untersuchen der Webseite Herausforderung: Überprüfung des Adaptiven/Responsiven Layouts

7. Präprozessoren

Was Ist Ein Präprozessor?Sass Syntax Sass Variables Sass Numerische Operatoren Sass-Verschachtelung @extend-Direktive Ordner-Datei-Struktur

@extend-Direktive

Die vierte hilfreiche Funktion ermöglicht es uns, voreingestellte CSS-Eigenschaften von einem Element auf ein anderes anzuwenden und so eine Beziehung zwischen Selektoren zu schaffen. Das bedeutet, dass ein Selektor die Eigenschaften eines anderen Selektors erben kann.

Schauen wir uns nun das Bild unten an, das zwei Schaltflächenelemente zeigt:

Wir haben zwei Schaltflächen: "send" und "submit". Der einzige Unterschied zwischen diesen Elementen ist der Wert der background-color-Eigenschaft. Daher können wir die Stile für die "send"-Schaltfläche definieren und die "submit"-Schaltfläche diese Stile erben lassen.

Der HTML-Code ist:

html

Sehen wir uns an, wie wir mit Hilfe von Sass Stile erben können.

css

Der .submit-button-Selektor erbt alle Stile vom .send-button-Selektor mithilfe der @extend-Direktive.

War alles klar?

Danke für Ihr Feedback!

Abschnitt 7. Kapitel 6

some-alt