25 Jahre Erfahrung FreeCall 0800 tutegos

Neuerungen in CSS3

Die Anforderungen an gut aussehende, suchmaschinenoptimierte und benutzerfreundliche Webseiten sind in den letzten Jahren gestiegen. Cascading Style Sheets (CSS)Version 3 ist eine Aktualisierung der seit 10 Jahren bestehenden letzten CSS2-Version und bringt große Änderungen, die das CSS3-Seminar vorstellt. Zunächst lernen die Teilnehmer die neuen Module kennen, denn CSS3 wird nicht mehr in einer Spezifikation definiert, sondern in vielen kleinen Modulen. Einige Module sind noch in der Spezifikationsphase, andere werden schon vollständig von den aktuellen Browsern unterstützt. Das Seminar konzentriert sich daher auf die Module, die in der Endphase der Spezifikation sind, etwa Selektoren. So stellt der CSS3-Kurs an vielen praxisnahen Beispielen etwa die neuen Attributselektoren und Pseudoklassen vor, die Unterstützung für runde Rahmen und weitere Text-/Absatzformatierungen sowie weitere Neuerungen wie Spalten oder 2D-Transformationen.

Inhalte des Seminars

Entwicklung von CSS2 nach CSS3

Schwächen von CSS2
CSS3-Module
Fortschritt der Standards: Candidate/Proposed Recommendation, Working Draft
Wiederholung CSS-Selektoren
Gruppieren von Selektoren
Kombinatoren: Nachfahr-/Kindkombinator, direkter/indirekter Nachbarkombinator
Namensräume (CSS Namespaces)
Zusammenspiel HTML und CSS
Aktuelle Browser-Unterstützung

Hintergründe und Rahmen

Wiederholung vom Box-Modell
Mehrere Hintergrundbilder
Beschnitt von Hintergrundbildern
Überblick über alle background-Properties
Rahmentypen, Breiten, Rundungen
Rahmen mit Grafiken
Umbruch von Boxen steuern mit box-decoration-break

Das Texteffekt-Modul CSS Text

Verarbeitung von Leerraum in HTML
Wie Leerraum zusammengeführt wird: white-space-collapse
Zeilenumbruch mit word-break steuern
Textumbruch mit text-wrap steuern
Blocksatzsteuerung über text-align, Textzentrierung und text-justify
text-indent: Einrücken der ersten Zeile steuern
text-align-last: Zeilenausrichtung für letzte Zeile steuern
word-spacing für Wortabstände nutzen
Wie sieht minimaler/maximaler/optimaler Leerraum aus?
letter-spacing für Zeichenabstände
Steuerung zur Zusammenfassung von Punktionszeichen
punctuation-trim für mathematische Formeln verwenden
Kleine Symbole über text-emphasis setzen
Photoshop-ähnliche Schattierungen mit text-shadow

Die CSS3-Selektoren

Universal-Selektor
Typ-Selektor
Klassen- und ID-Selektor
Erweiterungen beim Attribut-Selektor, Teilzeichenketten erkennen
Namensräume bei CSS3-Selektoren

Pseudo-Klassen in CSS3

Aufgaben von Pseudo-Klassen
Dynamische und strukturelle Pseudo-Klassen
Elemente mit :lang aufgrund der Sprache auswählen
URI-Ziele mit :target auswählen
Ein- und Ausblenden von Inhalten mithilfe von :target
Dynamische Pseudo-Klassen :link und :visited
:hover, :active und :focus für Links
:enabled, :disabled, :checked, :indeterminate als Kriterium für Gui-Zustände
:root für HTML-Wurzelelement
Elemente ohne Kinder mit :empty selektieren
Kindselektion mit :first-child, :last-child, :nth-child …
Abwechselnd farbige Tabellenzeilen
Selektion von Typen mit :first-of-type, :last-of-type, :nth-of-type …
Logische Verneinung mit not

Pseudo-Elemente in CSS3

Unterschied Pseudo-Klassen und Pseudo-Elemente
Elemente vor/hinter einem Element über before/after
Erste Zeile über ::first-line
CSS-Formatierungsmöglichkeiten
Initialen mit ::first-letter

Spalten Modul in CSS3

Box-Modell und Spalten-Modell
Anzahl von Spalten steuern
Breite und Abstände von Spalten
Spaltenfarbe und -stil
Spaltenumbruch
Spaltenausgleich
Elemente, die über mehrere Spalten laufen
Überlauf durch zu große Elemente steuern

Vorstellung weiterer CSS3-Module

CSS3 Values and Units, calc-Funktion
CSS Ruby Modul für Betonungen oder Zusatzerklärungen
Webtypografie mit CSS Fonts (WebFonts), Fonts laden
Paginierte Ausgaben, @page-Regel, Boxen, Seitenumbrüche
CSS für 2D- und 3D-Transformationen

Termine / Kontakt

Jedes Seminar führt tutego als kundenangepasstes Inhouse-Seminar durch.

Alle unsere Seminare können zudem als Live-Online-Seminar besucht werden.

Wir helfen Ihnen gerne bei der Anmeldung und einen passenden Termin zu finden. Kontaktieren Sie uns per E-Mail oder unter 0800/tutegos (kostenlos aus allen Netzen).

Die Fakten

Empfohlene Schulungsdauer: 1 Tag, insgesamt 8 Unterrichtsstunden à 45 Minuten
Zielgruppe: Webdesigner, die alle Neuerungen von CSS3 kennenlernen möchten
Vorkenntnisse: Gute Kenntnisse in CSS2 und HTML.
Schulungsunterlagen: Umfassende Seminarunterlagen und Referenzdokumentation