Sie befinden sich hier: Home » Seminare » Web » CSS3

Neuerungen in CSS 3

Empfohlene Schulungsdauer: 1 Tag, insgesamt 8 Unterrichtsstunden à 45 Minuten

Kursziele

Die Anforderungen an gut aussehende, suchmaschinenoptimierte und benutzerfreundliche Webseiten sind in den letzten Jahren gestiegen. Cascading Style Sheets (CSS) 3 ist eine Aktualisierung der seit 10 Jahren bestehenden letzten CSS 2-Version und bringt große Änderungen, die das CSS 3-Semiar vorstellt. Zunächst lernen die Teilnehmer die neuen Module kennen, denn CSS 3 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 CSS 3-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.

Seminarinhalte

• Entwicklung von CSS 2 nach CSS 3

  - Schwächen von CSS 2
  - CSS 3-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 5 und CSS 3
  - 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 CSS 3-Selektoren

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

• Pseudo-Klassen in CSS 3

  - 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 mit Hilfe 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 CSS 3

  - 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 CSS 3

  - 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 CSS 3-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
  

Schlagwörter

• CSS
• HTML

Weiterführende Seminare

JavaScript und DOM für dynamische Webseiten, Sichere Web-Anwendungen entwickeln