1 Seminar: Web-Engineering Cascading Style Sheets Stefan Hoferer Betreuung: Eva Giani

2 Literatur Spezifikationen: W3C Cascading Style Sheets Home page Beispiele: Stefan Münz et.al. SELFHTML Webmaster Resource Ulrike Häßler. Cascading Stylesheets, Springer 2003 Birgit Kloss. CSS und DHTML, Markt + Technik 2002

3 Einführung Cascading Style Sheets (CSS) Unmittelbare Ergänzung zu HTML Vermeidung zusätzlicher HTML-Elemente Trennung von Design und Struktur / Inhalt Spezifikation CSS Level 1 bereits 1996 veröffentlicht

4 Grundlagen HTML Überschrift 1 Überschrift 1.1 erster Absatz Überschrift 1.2 zweiter Absatz Überschrift 1 Überschrift 1.1 erster Absatz Überschrift 1.2 zweiter Absatz

5 Grundlagen HTML Überschrift 1 Überschrift 1.1 erster Absatz Überschrift 1.2 zweiter Absatz Überschrift 1 Überschrift 1.1 erster Absatz Überschrift 1.2 zweiter Absatz

6 Warum Cascading Style Sheets? <!-- p{ font-weight: bold; font-style: italic; } h1{ color: red; } h2{ text-decoration: underline; } --> … Überschrift 1 Überschrift 1.1 erster Absatz Überschrift 1.2 zweiter Absatz Überschrift 1 Überschrift 1.1 erster Absatz Überschrift 1.2 zweiter Absatz

7 CSS Regeln definieren kursiver Text em { font-weight: bold; font-style: normal; color: red; } SelektorDeklarationsteil Eigenschaft Wert

8 CSS Regeln definieren - Selektor HTML-Elemente: h1{color: red;} h2, div {color: blue;} div h2{color: green;} Überschrift 1 Überschrift 1.1 Überschrift 1.2 Überschrift Absatztext Überschrift 1 Überschrift 1.1 Überschrift 1.2 Überschrift Absatztext

9 Klassen + IDs: body{font-size: 12pt;} #navigationszeile{background-color: red;}.navigation{font-size: 16pt;}.text{font-size: 12pt; text-decoration: none;} Link1 Normaler Text mit einem Link CSS Regeln definieren - Selektor Link1 Link2 Normaler Text mit einem Link

10 Pseudoelemente: p:first-letter{font-size: 16pt; font-style: italic;} p:first-line{font-size: 14pt;} Gallia est omnis divisa in partes tres, quarum unam incolunt Belgae, aliam Aquitani, tertiam qui ipsorum lingua Celtae, nostra Galli appellantur. Hi omnes lingua, institutis, legibus inter se differunt. Gallos ab Aquitanis Garumna flumen CSS Regeln definieren - Selektor G allia est omnis divisa in partes tres, quarum unam incolunt Belgae, aliam Aquitani, tertiam qui ipsorum lingua Celtae, nostra Galli appellantur. Hi omnes lingua, institutis, legibus inter se differunt. Gallos ab Aquitanis Garumna flumen

11 CSS Regeln definieren - Werte Farben: RGB-Werte Hexadezimal: color: #00ff80; RGB-Werte Dezimal:color: rgb(0,256,128) RGB-Werte Prozentual:color: rgb(0%, 100%, 50%) Farbnamen:color: red [blue, green, white,…] Größenangaben: absolut: pt, pc, in, cm, mm, relativ: px, em, ex

12 Einbinden von CSS in HTML Titel der Datei url("styles2.css") /* Hier stehen die Style-Definitionen */ -->... Beispieltext...

13 Ausgabemedien

14 handheld { /* Deklarationen für die Ausgabe auf einem Handheld */ tv, projection { /* Deklarationen für TV- und Projektorausgabe */ url(styles_print.css) url(styles_print_tv_braille.css) print, tv, braille <link rel= “stylesheet“ href= “styles.css“ type= “text/css“ media= “print, tv, braille“>

15 Kaskade 1.Finden aller in Frage kommender Deklarationen 2.Sortiere nach Herkunft 3.Sortiere nach Spezifität des Selektors 4.Sortiere nach Reihenfolge CSS Level 1CSS Level 2 Browser BenutzerAutor Benutzer

16 Box Model

17 Box Model Fehler.boxmodel { padding: 10px; border-left: solid 5px #444444; border-right: solid 5px #888888; border-top: solid 5px #222222; border-bottom: solid 5px #FFFFFF; margin: 20px 40px 10px 80px; width: 100px; height: 100px; background-color: #EEEEEE;} … Inhalt des Absatzes

18 Box Model Fehler

19 Box Model Fehler - Workaround.boxmodel { padding: 10px; border-left: solid 5px #444444; … border-bottom: solid 5px #FFFFFF; margin: 20px 40px 10px 80px; width: 130px; height: 130px; background-color: #EEEEEE; voice-family: "\"}\""; voice-family:inherit; width: 100px; height: 100px;} html>body.boxmodel { width: 100px; height: 100px;}

20 Falsch interpretierte Eigenschaften position: fixed;Internet Explorer color: ff00ff;Internet Explorer paddingOpera 3.5 float: center;Netscape Communicator text-alignNetscape Communicator text-decoration: none;Opera 3.5 CSS Pointers Group

21 Größenberechnungen Berechnungsgrundlage: –Windows: 96dpi –Linux, Macintosh 72dpi

22 Fazit Pro Trennung von Struktur/Inhalt und Layout neue Gestaltungsmöglichkeiten Anpassung an das Ausgabemedium Contra unvollständige Umsetzung

23 Fragen, Kritik, Anregungen?