|
|
| Zeile 1: |
Zeile 1: |
| === Lernplan für CSS ==
| | {{#mermaid:sequenceDiagram |
| | Client->>DispatcherServlet: HTTP-Anfrage |
| | DispatcherServlet->>Controller: Auswahl der Methode |
| | Controller->>Service: Geschäftslogik |
| | Service->>Repository: Datenzugriff |
| | Repository-->>Service: Daten |
| | Service-->>Controller: Daten |
| | Controller-->>DispatcherServlet: Antwort |
| | DispatcherServlet-->>Client: HTTP-Antwort |
| | }} |
|
| |
|
| === 1. Einführung in CSS ===
| | <br> |
| * Was ist CSS?
| |
| * Geschichte und Entwicklung von CSS
| |
| * Vorteile der Verwendung von CSS
| |
|
| |
|
| === 2. CSS-Syntax und -Selektoren ===
| | {{#mermaid:graphTD |
| * Grundlegende Syntax von CSS
| | A[Client: HTTP-Anfrage] --> B(DispatcherServlet: Anfrageempfang); |
| * Arten von Selektoren (Element-, Klassen-, ID-Selektoren)
| | |
| * Kombinatoren und Pseudoklassen
| | }} |
| | |
| === 3. CSS-Eigenschaften ===
| |
| * Textformatierung (Schriftarten, Schriftgrößen, Farben)
| |
| * Box-Modell (Ränder, Polsterung, Rahmen)
| |
| * Layout-Eigenschaften (Breite, Höhe, Positionierung)
| |
| | |
| === 4. Fortgeschrittene CSS-Techniken ===
| |
| * Flexbox und Grid-Layout
| |
| * Animationen und Übergänge
| |
| * Medienabfragen und Responsive Design
| |
| | |
| ==== Responsive Design ====
| |
| * Einführung in Responsive Design
| |
| * Verwendung von Medienabfragen
| |
| * Mobile-First-Ansatz
| |
| * Flexible Layouts und Bilder
| |
| * Viewport-Meta-Tag
| |
| * Praktische Beispiele und Best Practices
| |
| | |
| === 5. Komplexere CSS-Techniken ===
| |
| * CSS-Variablen und benutzerdefinierte Eigenschaften
| |
| * CSS-Grid-Layout für komplexe Layouts
| |
| * Erstellen von CSS-Animationen und Keyframes
| |
| * Verwendung von Pseudoelementen und Pseudoklassen für fortgeschrittene Effekte
| |
| * CSS-Filter und Blend-Modi
| |
| | |
| === 6. CSS-Best Practices ===
| |
| * Strukturierung und Organisation von CSS
| |
| * Vermeidung von Redundanzen
| |
| * Performance-Optimierung
| |
| | |
| === 7. CSS-Tools und -Ressourcen ===
| |
| * CSS-Frameworks (z.B. Bootstrap)
| |
| * Entwicklungswerkzeuge (z.B. Browser-Entwicklertools)
| |
| * Online-Ressourcen und Tutorials
| |
| | |
| === 8. Abschluss und Weiterführende Themen ===
| |
| * CSS-Präprozessoren (z.B. Sass, LESS)
| |
| * Zukunft von CSS (z.B. CSS-Variablen, neue Spezifikationen)
| |
| * Weiterführende Lernressourcen und Projekte
| |