Cascading Style Sheets1 Sprache zum Formatieren von HTML-Elementen Vom W3-Konsortium vorgeschlagen Einfach, aber mächtigere als Formatierungsmöglichkeiten als HTML In HTML ursprünglich nur Inhalt angegeben, für Layout Browser verantwortlich Durch font-Tag usw. diese Idee unterwandert  Trennung Inhalt und Layout kaum möglich  CSS Aktuell: Version 2.0 Was sind Cascading Style Sheets (CSS)?

Cascading Style Sheets2 Layout verschiedener Seiten auf einmal kontrollierbar Einheitliches Erscheinungsbild für gesamtes Dokument oder Projekt Speicherplatzeinsparung, geringere Übertragungszeiten größere Formatierungsmöglichkeiten als HTML Barrierefrei ins Web Motivation

Cascading Style Sheets3 Viele Styles gehen stufenförmig in neuen ein Styles in externer Datei (am besten) Definition der Styles in Textdatei mit Endung.css In HTML-Seite auf Style verweisen: Style im head der HTML-Seite... Konzept(I)

Cascading Style Sheets4 Style in HTML-Element Inhalt und Präsentation gemischt  viele Vorteile von css verloren text Mehrere oder auch alternative Styles möglich Konzept(II)

Cascading Style Sheets5 Priorität: Interpretation des Browsers Reihenfolge im head der HTML-Datei Style am HTML-Element Angefangen von der niedrigsten Priorität werden Styles in neues virtuelles Style übernommen Bei gleichen Attributen überschreibt Style mit höherer Priorität das niedrigerer Priorität Konzept(III)

Cascading Style Sheets6 Selector {property: value;} selector: zu formatierender Tag property: zu änderndes Attribut value: festgelegter Wert body{color: yellow;} Universalselektor: *{...} Typselector: p{...} Class-Selector h1.blau{...} oder.blau text Syntax (I)

Cascading Style Sheets7 Pseudoklassen: selector: pseudo-class{property: value;} Nur zentral definierbar Beispiel: a:linknormaler Link a:visitedbereits besuchter Link a:active aktiver Link a:hoverLink bei Mouseberührung Unterschiedliche Links in einem Dokument mit class-Selector Kommentar /* Kommentar */ Syntax(II)

Cascading Style Sheets8 Erben von übergeordnetem Element text Erben von allgemeineren Element em.wichtig{...} erbt von em p{...} und em{...} definiert -> p em{...} erbt davon Gruppierung von Elementen h1, h2{font-family:arial;} h1{font-size:30px;} h2{background:red; font-size:25px;} Vererbung / Gruppierung

Cascading Style Sheets9 Boxmodell

Cascading Style Sheets10 Browser setzen CSS unterschiedlich um: Netscape 4.x und IE4.x: nur teilweise Ab Netscape 6.x, IE 5.x und Opera 5.x: fast vollständig Moderne Browser setzen also Standard weitestgehend um  man sollte CSS verwenden Zusammenfassung

Cascading Style Sheets11 Quellen Mintert, St.: Ordnung muss sein. iX, 3/2003, S. 50: Web- Publishing oder Mintert, St.: Formationsflug. iX, 4/2003, S. 138: Web-Publishing oder