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

Präsentation zum Thema: "1 Seminar: Web-Engineering Cascading Style Sheets Stefan Hoferer Betreuung: Eva Giani."—  Präsentation transkript:

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

2 2 Literatur Spezifikationen: W3C Cascading Style Sheets Home page http://www.w3.org/Style/CSS/ Beispiele: Stefan Münz et.al. SELFHTML 8.1 http://de.selfhtml.org/ Webmaster Resource http://www.webmaster-resource.de/ Ulrike Häßler. Cascading Stylesheets, Springer 2003 Birgit Kloss. CSS und DHTML, Markt + Technik 2002

3 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 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 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 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 7 CSS Regeln definieren kursiver Text em { font-weight: bold; font-style: normal; color: red; } SelektorDeklarationsteil Eigenschaft Wert

8 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 1.2.1 Absatztext Überschrift 1 Überschrift 1.1 Überschrift 1.2 Überschrift 1.2.1 Absatztext

9 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 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 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 12 Einbinden von CSS in HTML Titel der Datei <!-- @import url("styles2.css") /* Hier stehen die Style-Definitionen */ -->... Beispieltext...

13 13 Ausgabemedien

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

15 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 16 Box Model

17 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 18 Box Model Fehler

19 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 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 http://css.nu/pointers/bugs.html

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

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

23 23 Fragen, Kritik, Anregungen?