layout: true
--- class: title-slide, center, middle
--- # Chronologische Übersicht über die Themen
--- # .darkblue[Ziele] von Cascading Style Sheets (CSS) - .darkblue[Trennung zwischen Inhalt und Darstellung] von HTML-Dokumenten - leistungsfähige .darkblue[Layout-Definition] für HTML-Dokumente - .darkblue[Anpassung an] verschiedene .darkblue[Ausgabegeräte/-medien] - zentrales .darkblue[Layout-Management] --- # .darkblue[Historie von HTML und CSS] .more-more-condensed.no-margin[ - Entwicklung von CSS in „.darkblue[Level]n“ .darkgray[(.bold[nicht] in Versionen)] - .darkblue[Level bauen aufeinander auf]: .em[Features](CSS $x$) $\subseteq$ .em[Features](CSS ($x$+1)) ]
gantt title Timeline dateFormat YYYY-MM-DD section HTML HTML 2.0 :1993-06-01 , 1995-11-24 HTML 3.0 (cancelled) :1995-03-01, 1995-09-28 HTML 3.2 :1996-01-01 , 1997-01-14 HTML 4.0 :1997-01-15 , 1997-12-18 HTML 5.0 :2008-01-01 , 2014-10-28 HTML 5.1 :2014-10-29 , 2016-11-01 HTML 5.2 :2016-11-02 , 2017-12-14 section CSS CSS 1 :1994-10-10 , 1996-12-17 CSS 2 :1996-12-18 , 1998-05-01 CSS 2.1 :2002-01-01 , 2011-06-07 CSS 2.2 :2016-04-12 , ###today### CSS 3 (aufgeteilt in über 50 Module, wenige bereits Recommendations, u.a. Media Queries, Selectors):1998-05-01 , ###today### CSS 4 (einige als Working Drafts):2011-09-29 , ###today###
--- # .darkblue[„Cascading“] .more-condensed[ - .darkblue[kombinierte Auswertung] unterschiedlicher Arten .darkblue[von Stylesheets] - .darkblue[Lösung von Konflikten] zwischen anwendbaren Layout-Vorgaben .darkblue[mit Rücksicht auf Ursprung, Gewichtung und Spezialisierungsgrad] - .darkgray[(vom Browser-Hersteller vorgegebenes)] .darkblue[Browser-Stylesheet] + definiert das
Standard-Layout
eines Browsers für die Elementinstanzen +
zum W3C-Vorschlag für dieses Stylesheet
- .darkblue[Benutzer-Stylesheet] +
definiert
die
Präferenzen eines Benutzers
+ Spezifikation über einen Browser-Dialog - .darkblue[Autoren-Stylesheet(s)] +
höchste Priorität
bei der Darstellung +
vom Autor entwickelte(s) Stylesheet(s)
zum Layouten seines HTML Dokumentes ] --- # .darkblue[Einbindung bzw. Deklaration] von CSS .more-condensed.no-margin[ 1. In eigener .darkblue[CSS-Datei]: .small-font.smaller-margin-bottom[```html
```] - .inline-code.no-text-indent.small-font28[```html
```]-Element darf nur im .inline-code.no-text-indent.small-font28[```html ```]-Element verwendet werden 2. .darkblue[Im HTML-Dokument]: .small-font.smaller-margin-bottom[```html ```] - .inline-code.no-text-indent.small-font28[```html
Mein Titelstil
bla…