Kursinhalt

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

Sass Numerische Operatoren

Wir können mathematische Berechnungen mit Zahlen durchführen. Sass unterstützt alle grundlegenden Arithmetiken wie Addition (+), Subtraktion (-), Multiplikation (*) und Division (/).

css

Für Addition und Subtraktion ist es wichtig, Werte mit denselben Einheiten zu haben (z.B. %, px).

css

Für Multiplikation und Division ist es entscheidend, einen wertlosen Wert zu haben. Sass kann die Division von Pixeln oder Prozenten nicht berechnen.

Mathematische Operationen mit Variablen

Wir können leicht Variablen in die Berechnungen einbeziehen, wenn die Variable einen gültigen Wert hat.

Stellen wir uns vor, dass wir einen doppelten Rand zum Element hinzufügen müssen:

css

War alles klar?

Danke für Ihr Feedback!

Abschnitt 7. Kapitel 4

Fragen Sie AI

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen