Zurück zur ersten Seite n Style Sheets sind im Prinzip Formatvorlagen für HTML-Dokumente n Über Style Sheets lassen sich zentrale Layout-Vorgaben für eine.

Präsentation zum Thema: "Zurück zur ersten Seite n Style Sheets sind im Prinzip Formatvorlagen für HTML-Dokumente n Über Style Sheets lassen sich zentrale Layout-Vorgaben für eine."—  Präsentation transkript:

1 Zurück zur ersten Seite n Style Sheets sind im Prinzip Formatvorlagen für HTML-Dokumente n Über Style Sheets lassen sich zentrale Layout-Vorgaben für eine Reihe von einzelnen HTML-Dokumenten festlegen n Durch Style Sheets können Online-Auftritte optisch wesentlich ansprechender gestaltet werden als mit statischem HTML Style Sheets in HTML 1.0 Definition Style Sheets Seminar: Internet & Co Seminaleitung: Sanda Grätz Referent: Cornelius Puschmann Thema: Style Sheets in HTML

2 Zurück zur ersten Seite n CSS steht für Cascading Style Sheets n CSS ist eine Auszeichnungssprache, genauso wie HTML n Das W3C-Konsortium hat CSS zur Standardsprache für die Definition von Style Sheets erklärt Style Sheets in HTML 1.1 Style Sheets mit CSS Seminar: Internet & Co Seminaleitung: Sanda Grätz Referent: Cornelius Puschmann Thema: Style Sheets in HTML

3 Zurück zur ersten Seite n In seiner Syntax ist CSS HTML sehr ähnlich n Es gibt CSS in zwei Schichten(Layers) n CSS Layer 1 ist 1996 festgelegt worden, Layer 2 folgte dann 1998 Style Sheets in HTML 1.2 Style Sheets mit CSS Seminar: Internet & Co Seminaleitung: Sanda Grätz Referent: Cornelius Puschmann Thema: Style Sheets in HTML

4 Zurück zur ersten Seite Style Sheets in HTML 1.3 CSS und Browser Seminar: Internet & Co Seminaleitung: Sanda Grätz Referent: Cornelius Puschmann Thema: Style Sheets in HTML 1999 Dezember Closure CSS L1 2000 März MS IE 5 CSS L1 2000 November NS 6 CSS L1+2 2000 Dezember Konquerer CSS L1+2

5 Zurück zur ersten Seite n Die derzeit beste Unterstützung für CSS L1 und L2 bietet Netscape 6 n Der Microsoft Internet Explorer 5.5 unterstützt CSS L1 nahezu vollständig und L2 teilweise n Beide Browser bieten jeweils eigene Funktionen an die außerhalb der W3C- Konventionen liegen Style Sheets in HTML 1.4 CSS und Browser Seminar: Internet & Co Seminaleitung: Sanda Grätz Referent: Cornelius Puschmann Thema: Style Sheets in HTML

6 Zurück zur ersten Seite Mit HTML definiert man das Layout eines beliebigen Tags nur für eine Nutzung. Beispiel HTML:.. (BODY-Tag ohne weitere Eigenschaften) --------------------------------.. (BODY-Tag mit dem Farbattribut Schwarz) Style Sheets in HTML 2.0 Style Sheets vs. HTML Seminar: Internet & Co Seminaleitung: Sanda Grätz Referent: Cornelius Puschmann Thema: Style Sheets in HTML

7 Zurück zur ersten Seite Mit CSS definiert man das Layout eines beliebigen Tags global. Beispiel CSS: [..] body.MeineKlasse { background-color : #000000; } (BODY-Tag wird durch eine CSS-Angabe definiert) --------------------------------.. (BODY-Tag vom Typ MeineKlasse wird aufgerufen) Style Sheets in HTML 2.1 Style Sheets vs. HTML Seminar: Internet & Co Seminaleitung: Sanda Grätz Referent: Cornelius Puschmann Thema: Style Sheets in HTML

8 Zurück zur ersten Seite HTML einmalige Format- angabe in jedem Tag CSS Globale Formatdefinitionen in MeinStyleSheet.css Style Sheets in HTML 2.2 Style Sheets vs. HTML Seminar: Internet & Co Seminaleitung: Sanda Grätz Referent: Cornelius Puschmann Thema: Style Sheets in HTML HTML a.html CSS a.html b.html c.html d.html e.html..usw.

9 Zurück zur ersten Seite Beispiel für CSS innerhalb eines HTML-Dokumentes: Datei Beispiel1.html: HTML mit CSS <!-- body.MeineKlasse { background-color : #000000; } //--> In diesem HTML-Dokument ist der Hintergrund schwarz, weil das über ein StyleSheet so definiert wurde!! Style Sheets in HTML 3.0 CSS in der Praxis Seminar: Internet & Co Seminaleitung: Sanda Grätz Referent: Cornelius Puschmann Thema: Style Sheets in HTML

10 Zurück zur ersten Seite Beispiel für CSS in einer separaten Datei: Datei MeinStyleSheet.css: <!-- body.MeinBodyTag { background-color : Black; text-align : right; color : White; } p { font-family : Arial, Helvetica, sans-serif; font-size : 18pt; font-weight : bold; color : Blue; }.gruen { color : Green; } --> Style Sheets in HTML 3.1 CSS in der Praxis Seminar: Internet & Co Seminaleitung: Sanda Grätz Referent: Cornelius Puschmann Thema: Style Sheets in HTML

11 Zurück zur ersten Seite Beispiel für CSS in einer separaten Datei: Datei Beispiel2.html: HTML-Dokument mit einer separaten CSS-Datei Ist es nicht toll, was man mit Style Sheets so alles machen kann?...jetzt ist der Text blau..und nun ist er grün! Style Sheets in HTML 3.2 CSS in der Praxis Seminar: Internet & Co Seminaleitung: Sanda Grätz Referent: Cornelius Puschmann Thema: Style Sheets in HTML

12 Zurück zur ersten Seite n Eingeleitet wird ein CSS-Abschnitt immer mit dem Tag n Die Kommentarzeichen werden verwendet, um Browser die CSS nicht unterstützen von Fehlinterpretationen der Befehle abzuhalten n Diese Sprachkonventionen gelten sowohl bei separaten CSS-Dateien als auch bei CSS innerhalb von HTML-Dokumenten Style Sheets in HTML 4.0 CSS-Konventionen Seminar: Internet & Co Seminaleitung: Sanda Grätz Referent: Cornelius Puschmann Thema: Style Sheets in HTML

13 Zurück zur ersten Seite CSS-Definitionen haben im Allgemeinen das Format [TAG].[KLASSE] { [ATTRIBUT] : [ATTRIBUTSWERT] } Beispiel:p.meineklasse { color : Black } Style Sheets in HTML 4.1 CSS-Konventionen Seminar: Internet & Co Seminaleitung: Sanda Grätz Referent: Cornelius Puschmann Thema: Style Sheets in HTML

14 Zurück zur ersten Seite n CSS-Spezifikationen, Layer 1 (W3C) http://www.w3.org/pub/WWW/TR/REC-CSS1/ n CSS-Spezifikationen, Layer 2 (W3C) http://www.w3.org/TR/REC-CSS2/ n CSS-Kapitel in SelfHTML http://www.teamone.de/selfhtml/tda.htm n Artikel zur effektiven Nutzung von CSS (von Jakob Nielsen) http://www.useit.com/alertbox/9707a.html Style Sheets in HTML 5.0 Hintergrundinfos zu CSS Seminar: Internet & Co Seminaleitung: Sanda Grätz Referent: Cornelius Puschmann Thema: Style Sheets in HTML

15 Zurück zur ersten Seite n Beispieldateien zum download unter: http://cornelius.port5.com/referat_css.html Style Sheets in HTML 6.0 CSS zum selber basteln.. Seminar: Internet & Co Seminaleitung: Sanda Grätz Referent: Cornelius Puschmann Thema: Style Sheets in HTML