Was sind Cascading Style Sheets (CSS)?

1. Was sind Cascading Style Sheets (CSS)? • 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 Cascading Style Sheets

2. Motivation • 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 Cascading Style Sheets

3. Konzept(I) • 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: • <link rel=„stylesheet“ type=„text/css“ href=„dateiname.css“> • Style im head der HTML-Seite • <style type=„text/css“> ... </style> Cascading Style Sheets

4. Konzept(II) • Style in HTML-Element • Inhalt und Präsentation gemischt  viele Vorteile von css verloren • <p style=„color=red;“>text</p> • Mehrere oder auch alternative Styles möglich • <link rel=„stylesheet“ type=„text/css“ href=„dateiname.css“ title=„titel“> • <link rel=„alternate stylesheet“ type=„text/css“ href=„dateiname.css“ title=„titel“> Cascading Style Sheets

5. Konzept(III) • 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 Cascading Style Sheets

6. Syntax (I) • 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 • <h1 class=„blau“>text </h1> Cascading Style Sheets

7. Syntax(II) • Pseudoklassen: selector: pseudo-class{property: value;} • Nur zentral definierbar • Beispiel: • a:link normaler Link • a:visited bereits besuchter Link • a:active aktiver Link • a:hover Link bei Mouseberührung • Unterschiedliche Links in einem Dokument mit class-Selector • Kommentar • /* Kommentar */ Cascading Style Sheets

8. Vererbung / Gruppierung • Erben von übergeordnetem Element • <div><span>text</span></div> • 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;} Cascading Style Sheets

9. Boxmodell Cascading Style Sheets

10. Zusammenfassung • 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 Cascading Style Sheets

11. Quellen • Mintert, St.: Ordnung muss sein. iX, 3/2003, S. 50: Web-Publishing oder http://www.heise.de/ix/artikel/2003/03/050/ • Mintert, St.: Formationsflug. iX, 4/2003, S. 138: Web-Publishing oder http://www.heise.de/ix/artikel/2003/04/138/ • http://www.w3.org/Style/CSS/learning • http://www.style-sheets.de/ • http://www.css4you.pehlgrim.de/ • http://www.w3schools.com/css/default.asp • http://selfhtml.teamone.de/ Cascading Style Sheets