CSS – Cascading Style Sheets

1. CSS – Cascading Style Sheets Gliederung: Geschichte/ Entstehung von CSS Sinn und Zweck von CSS Syntax Boxmodell Anwendung Selektoren Einbindung Fazit Quellen Moritz, Potyka, Benhold, Kulinski,

2. Geschichte des CSS • 1993 sogenannte Web- Stylesheets • Stylesheet = Art Formatvorlage welche auf Trennung von Informationen und eigentlichen Darstellung basiert • zugewiesenen Daten werden vom Stylesheet interpretiert und für Bildschirmausgabe formatiert  Ziel ist Aufwertung von Webseiten Moritz, Potyka, Benhold, Kulinski,

3. Geschichte des CSS • 1994 Hakan Wium Lie schlägt erstmals CCS vor wie man es heute kennt • CSS ist Gemeinschaftsproduktion von Lie und Bert Bos • Bos arbeitete vorher an Implementierung (lateinisch implere, „anfüllen“, „erfüllen“) eines Browsers namens Argo und benutzte dabei eigene Stylesheets Moritz, Potyka, Benhold, Kulinski,

4. Geschichte des CSS • zu diesem Zeitpunkt auch andere Sprachen für Strukturierte Dokumente • aber CSS erstes Programm um Regeln zu definieren die über mehrere Stylesheets vererbt werden konnten • setzte damit einen wichtigen Standard für die weitere Entwicklung von Stylesheet- Sprachen Moritz, Potyka, Benhold, Kulinski,

5. Geschichte des CSS • durch 2 Präsentationen von CSS wurde World Wide Web Consortium (W3C) auf CSS aufmerksam  weiter entwickelt und bearbeitet • Resultat: 1996 - CSS Level 1 • Erweiterungen folgten dann 1998 mit CSS Level 2 • CSS2 von Browsern zum größten Teil korrekt umgesetzt doch oft unzulangende Unterstützung Moritz, Potyka, Benhold, Kulinski,

6. Geschichte des CSS • W3C arbeitet momentan an Weiterentwicklung von CSS2 um bestehende Probleme zu verringern • neben Weiterentwicklung von CSS2 Neuentwicklung von CSS Level3 • CSS3  Aufbau der Teiltechniken modular • modular heißt in diesem Zusammenhang das die Steuerung der Sprachausgabe ihren eigenen Entwicklungsrhythmus und Versionsschritte haben Moritz, Potyka, Benhold, Kulinski,

7. Sinn und Zweck von CSS / Stylesheets • Sprache zum Formatieren von HTML/XHTML-Elementen auf Web-Seiten • doch CSS erlaubt größeres Spektrum an Möglichkeiten der Formatierung durch interne und externe Einbindung •  Stylesheet wird inmitten des Dokumentes, also im Head- Bereich deklariert oder in externe Datei ausgelagert Moritz, Potyka, Benhold, Kulinski,

8. Sinn und Zweck von CSS / Stylesheets • Vorteil der externen Auslagerung  jedes Format muss nur einmal festgelegt werden dann über gesamtes Projekt gültig • Formateigenschaften werden also auf alle HTML Dateien überschrieben • durch Einbinden externer Stylesheets Dateien wesentlich kleiner und Darstellung der Seiten schneller Moritz, Potyka, Benhold, Kulinski,

9. Sinn und Zweck von CSS / Stylesheets • Browser wie Firefox, Internet Explorer oder Opera zeigen oft verschiedene Darstellungen von einer Seite • immernoch Irritationen wodurch Darstellung entweder nicht gleich oder nur teilweise erfolgen kann • Elemente im Anzeigefenster des Browsers können positioniert und Abstände definiert werden Moritz, Potyka, Benhold, Kulinski,

10. Sinn und Zweck von CSS / Stylesheets • CSS macht es möglich auf unterschiedlichen Ausgabemedien, wie Bildschirm, Papier, Projektion differenzierte Darstellungen anzuzeigen • kann von Nutzen sein wenn derartige Implementierung durch Verwenden von Geräten mit Unterschiedlichen Auflösungen wie PDA’s oder Mobiltelefonen • W3C Ergänzung für Handy - CSS Mobile Profile 2.0 Moritz, Potyka, Benhold, Kulinski,

11. Sinn und Zweck von CSS / Stylesheets • Beispiel Wikipedia-Seite auf verschiedenen Handymodellen Moritz, Potyka, Benhold, Kulinski,

12. Sinn und Zweck von CSS / Stylesheets • Beispiel Wikipedia-Seite auf verschiedenen Handymodellen Moritz, Potyka, Benhold, Kulinski,

13. Sinn und Zweck von CSS / Stylesheets • Beispiel Wikipedia-Seite auf verschiedenen Handymodellen Moritz, Potyka, Benhold, Kulinski,

14. Sinn und Zweck von CSS / Stylesheets • Beispiel Wikipedia-Seite auf verschiedenen Handymodellen Moritz, Potyka, Benhold, Kulinski,

15. Sinn und Zweck von CSS / Stylesheets • Beispiel Wikipedia-Seite auf verschiedenen Handymodellen Moritz, Potyka, Benhold, Kulinski,

16. Sinn und Zweck von CSS / Stylesheets • auch in Zukunft weitere Gestaltungsmöglichkeiten • derzeitige Weiterentwicklung von CSS Level 2 und Neuentwicklung von Level 3 versprechen neue Features • CSS ermöglicht akustische Wiedergabe auf Web-Seiten • Aussehen des Cursors in verschiedenen Browsern kann unterschiedlich dargestellt •  Einflussnahme auf die Anzeigefenster möglich Moritz, Potyka, Benhold, Kulinski,

17. Boxmodell • Grundlegende Regel für Einbindung von CSS • Reservierung eines Rechtecks für jedes Element einer Seite • Eigenschaften variierbar • Untergeordnete Boxen Moritz, Potyka, Benhold, Kulinski,

18. Anwendung von CSS • Typ: Selektion nach dem HTML-Elementnamen. Beispiel: Ein HTML-Element <h1> ist vom Typ h1. • Klasse: Selektion nach dem class-Attribut des Elementes. Beispiel: Ein HTML-Element <span class="rot"> hat die Klasse rot. • ID: Selektion nach dem id-Attribut des Elementes. Beispiel: Ein HTML-Element <div id="footer"> hat die id footer. • Attribut: Selektion nach beliebigen Attributen, nicht nur class oder id. Moritz, Potyka, Benhold, Kulinski,

19. Was sind Selektoren? • Für Aufrufung der Eigenschaften • Verbindung zwischen einzelnen Elemenen der Seite (welche formatiert werden sollen) und der externen Datei (auf welche Zugegriffen werden soll) • Struktur: Selektor { Stylesheet- Angabe;} Selektor { Stylesheet-Angabe; Stylesheet-Angabe; ... }

20. Typ-Selektoren Ein HTML-Elementname als Selektor gilt für alle HTML-Elemente des bezeichneten Typs. Beispiel: h1 { color: blue; font-weight: bold; } <h1>Dies ist eine Überschrift</h1> Moritz, Potyka, Benhold, Kulinski,

21. Klassen-Selektoren • Mit einem Punkt gefolgt von einem Klassennamen schränken Sie die Auswahl der Elemente auf eine bestimmte Klasse ein. Beispiel: .rot { color: red; } <span class="rot"> Dies wird rot dargestellt.</span> <div class="rot"> Dies auch! </div> <h1 class="rot"> Dies auch! </h1> Moritz, Potyka, Benhold, Kulinski,

22. ID-Selektoren • Mit einer Raute gefolgt von einem Identifikator selektieren Sie das Element mit der angegebenen id. Beispiel: #navigation { float: right; } <div id="navigation"> Die Navigation ist auf dieser Site rechts. </div> Moritz, Potyka, Benhold, Kulinski,

23. Attribut-Selektoren • Mit Attribut-Selektoren können Sie Elemente abhängig vom Wert ihrer Attribute auswählen. a[href ^="mailto:"] { background-image: url(mail_icon.png);} a[href $=".wav"] { background-image: url(audio_icon.png);} Die erste Formatdefinition fügt jedem mailto-Link ein Icon hinzu. Auch das zweite Beispiel erzeugt ein automatisches Icon. Hier wird jeder Link auf eine WAV-Datei mit einem Icon versehen. Moritz, Potyka, Benhold, Kulinski,

24. Einbindung von CSS in HTML • Als externes Stylesheet für eine HTML-Datei (link-Element) <html> <head> <link rel="stylesheet" media="all" type="text/css„ href="css.css"> <title>Cascading Style Sheets</title> </head> <body> </body> </html> Seite1 CSS-Datei Moritz, Potyka, Benhold, Kulinski, Seite2

25. Einbindung von CSS in HTML • Als internes Stylesheet in einer HTML-Datei (style-Element) • <html> • <head> • <title>Dokument mit Formatierungen</title> • <style type="text/css"> • body { color: purple; background-color: #d8da3d} • </style> • </head> • <body></body> • </html> Moritz, Potyka, Benhold, Kulinski,

26. Einbindung von CSS in HTML • Innerhalb von HTML-Tags (style-Attribut) <span style="font-size: small;">Text</span> <p align="center" style="font-size:100px" > BMW </p> Beispiel Moritz, Potyka, Benhold, Kulinski,

27. Fazit • Stylesheets unterstützen professionell die Gestaltung des Web-Designs • als wichtiger Faktor in der Darstellung unternehmensspezifischer Layouts nicht mehr wegzudenken • sichern Corporate Design (Unternehmenserscheinungsbild) im Online- Bereich ab • im heutigen Web-Design gilt CSS als Standart für die Programmierung von Web-Seiten

28. Quellen • http://4webmaster.de/wiki/CSS-Selektoren#Typ-Selektoren • http://de.wikipedia.org/wiki/Cascading_Style_Sheets • http://www.css4you.de/wscss/css03.html • http://www.css4you.de/wsboxmodell/box1.gif • http://de.selfhtml.org/css/ • www.html-world.de/program/css_ov.ph • http://www.css4you.de/

29. Fragen zum Thema? Vielen Dank für ihre Aufmerksamkeit!