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

Sass Numerische Operatoren

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

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

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:

War alles klar?

Danke für Ihr Feedback!

Abschnitt 7. Kapitel 4

some-alt