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,

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,

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,

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,

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,

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,

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,

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,

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,

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,

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

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

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

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

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

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,

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,

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. 27.03.2017 Moritz, Potyka, Benhold, Kulinski,

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; ... }

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> 27.03.2017 Moritz, Potyka, Benhold, Kulinski,

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> 27.03.2017 Moritz, Potyka, Benhold, Kulinski,

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> 27.03.2017 Moritz, Potyka, Benhold, Kulinski,

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. 27.03.2017 Moritz, Potyka, Benhold, Kulinski,

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 Seite2 CSS-Datei 27.03.2017 Moritz, Potyka, Benhold, Kulinski,

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> 27.03.2017 Moritz, Potyka, Benhold, Kulinski,

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 27.03.2017 Moritz, Potyka, Benhold, Kulinski,

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

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/

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