Schulung: CSS3 – Der komplette Einstieg in modernes Webdesign
Beschreibung:
Cascading Style Sheets (CSS) ist eine deklarative Sprache für strukturierte Dokumente und gilt als die Standard-Stylesheetsprache für Webseiten. Mit CSS beschreiben Webdesigner, wie ein ausgezeichneter Inhalt oder Element einer HTML-Seite dargestellt werden soll. Modernes Webdesign basiert auf der Verwendung von CSS.
Themen:
- CSS3 Einführung
- Was ist ein Style (Stile)?
- Was sind Cascading Style Sheets?
- Die Entwicklung von CSS
- CSS und HTML
- Die verschiedenen Arten der CSS Regeln
- Der Aufbau einer CSS Regel
- Die CSS3 Neuerungen im Überblick
- HTML5 Grundlagen
- Was ist HTML?
- Die HTML-Elemente im Überblick
- Die Entstehung von HTML5
- Was ist neu in HTML5?
- Wie funktionieren die HTML5 Strukturelemente?
- Die neuen HTML5 Strukturelemente in der Praxis
- CSS Einstieg
- Die grundlegenden CSS Selektoren
- Stile in HTML-Befehlen hinzufügen (Inline CSS)
- Stile in Webseiten hinzufügen (Embedded CSS)
- Stile in Websites hinzufügen (External CSS)
- HTML-Befehle neu definieren
- Wiederverwendbare Klassen definieren
- Eindeutige IDs definieren
- Universal Stile definieren
- Gruppierte Selektoren definieren
- CSS-Kommentare hinzufügen
- Selektives Styling
- Die Element-Baumstruktur verstehen
- Stile auf Kontextselektoren definieren
- Mit Pseudo-Klassen arbeiten
- Mit Pseudo-Elementen arbeiten
- Stile auf Basis von Element-Attributen definieren
- Neu in CSS3: Media Query
- Eltern-Eigenschaften vererben
- Deklarationen mit !important markieren
- Die Kaskadierungsreihenfolge feststellen
- Schriftarten Eigenschaften
- Typografie im Web verstehen
- Schriftenfamilien festlegen
- Alternative Schriften einsetzen
- Schriftgröße definieren
- Neu in CSS3: Schriftgröße anpassen
- Text Kursiv auszeichnen
- Text Fett auszeichnen
- Kapitälchen erstellen
- Mehrere Schrifteigenschaften einstellen
- Text Eigenschaften
- Textabstände definieren
- Groß- und Kleinbuchstaben setzen
- Neu in CSS3: Text mit Schatten versehen
- Text horizontal ausrichten
- Text vertikal ausrichten
- Absätzen einrücken
- Leerraum kontrollieren
- Text dekorieren
- Farbe und Hintergrundeigenschaften
- Farbwerte auswählen
- Neu in CSS3: Hintergrundfarbverläufe festlegen
- Auswahl eines Farbraums
- Textfarbe einstellen
- Hintergrundfarbe einstellen
- Hintergrundbild einstellen
- Mehrere Hintergrundeigenschaften einstellen
- Listen- und Tabelleneigenschaften
- Aufzählungstyp festlegen
- Eigene Aufzählungen erstellen
- Position der Aufzählungspunkte festlegen
- Mehrere Listenstile festlegen
- Tabellenlayout festlegen
- Zellenabstände festlegen
- Zellenränder festlegen
- Leere Zellen unterdrücken
- Position der Tabellenüberschrift festlegen
- Mauszeiger und dynamischer Inhalt
- Mauszeiger anpassen
- Inhalte mit CSS hinzufügen
- Nummerierung und Zähler mit CSS erstellen
- Anführungszeichen festlegen
- Box Model Eigenschaften
- Die Box-Eigenschaften eines Elements verstehen
- Elemente anzeigen und verbergen
- Größe und Höhe eines Elements festlegen
- Inhaltsüberlauf kontrollieren
- Elemente umfließen lassen
- Elementaußenabstände festlegen
- Elementkonturen festlegen
- Elementrahmen festlegen
- Neu in CSS3: Runde Rahmenecken
- Neu in CSS3: Bilder als Rahmen
- Elementinnenabstände festlegen
- Visuelle Formateigenschaften
- Fenster und Dokument verstehen
- Positionierungstyp festlegen
- Elementposition festlegen
- Elemente stapeln
- Sichtbarkeit eines Elements festlegen
- Sichtbaren Elementausschnitt festlegen
- Neu in CSS3: Elementtransparenz festlegen
- Neu in CSS3: Elementschatten festlegen
- Transformationen und Übergänge
- Neu in CSS3: Elemente transformieren
- Neu in CSS3: Elementübergänge festlegen
- CSS-Fixing: Browserfehler korrigieren
- CSS für Internet Explorer anpassen
- Internet Explorer Box Model korrigieren
- CSS Eigenschaften zurücksetzen
- Float-Fehler korrigieren
- Unverzichtbare CSS Techniken
- Mehrspaltige Layouts mit Float entwerfen
- Hyperlinks und Navigationen gestalten
- CSS Sprites verwenden
- CSS Dropdown Menüs erstellen
- Stylesheets verwalten
- Lesbare Stylesheets erstellen
- CSS Bibliotheken und Frameworks einsetzen
- Stylesheet Strategien anwenden
- Fehlerbehandlung im CSS Code
- Debugging von CSS in Firebug und Web Inspector
- CSS Code validieren
- CSS Code komprimieren
- CSS Best Practices Tipps
Zielgruppe:
Web-Designer, Web-Entwickler und Web-Worker die CSS3 verwenden wollen.
Ziel:
In dieser Grundlagenschulung erhalten Ein- und Umsteiger die Kenntnis um CSS3 konkret einzusetzen. Nach einer Einführung in CSS3 und Grundlagen von HTML5 werden die vielen Möglichkeiten von CSS systematisch vorgestellt. Dazu gehören CSS-Basiskonzepte ebenso wie neue CSS3 Merkmale. Unverzichtbare CSS Techniken wie Mehrspaltige Layouts und Navigationen werden in Beispielen gezeigt. Ein Ausblick auf CSS-Bibliotheken und Frameworks, sowie Fehleranalyse mit Debugging, sowie Best Practices Tipps runden den Inhalt ab.
Voraussetzungen und Vorkenntnisse:
Grundkenntnisse in HTML bzw. XHTML.
Teilnehmerzahl:
Mindestens 3, maximal 10 Personen
Schulungsdauer:
2 Tage