Die Präsentation wird geladen. Bitte warten

Die Präsentation wird geladen. Bitte warten

CSS – Cascading Style Sheets Gliederung: 1. Geschichte/ Entstehung von CSS 2. Sinn und Zweck von CSS 3. Syntax 1. Boxmodell 2. Anwendung 3. Selektoren.

Ähnliche Präsentationen


Präsentation zum Thema: "CSS – Cascading Style Sheets Gliederung: 1. Geschichte/ Entstehung von CSS 2. Sinn und Zweck von CSS 3. Syntax 1. Boxmodell 2. Anwendung 3. Selektoren."—  Präsentation transkript:

1 CSS – Cascading Style Sheets Gliederung: 1. Geschichte/ Entstehung von CSS 2. Sinn und Zweck von CSS 3. Syntax 1. Boxmodell 2. Anwendung 3. Selektoren 4. Einbindung 4. Fazit 5. 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 1994 Hakan Wium Lie schlägt erstmals CCS vor wie man es heute kennt CSS ist Gemeinschaftsproduktion von Lie und Bert Bos 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: 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 PDAs 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 ist vom Typ h1. Klasse: Selektion nach dem class-Attribut des Elementes. Beispiel: Ein HTML-Element hat die Klasse rot. ID: Selektion nach dem id-Attribut des Elementes. Beispiel: Ein HTML-Element 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;... }

20 Typ-Selektoren Ein HTML-Elementname als Selektor gilt für alle HTML-Elemente des bezeichneten Typs. Beispiel: h1 { color: blue; font-weight: bold; } Dies ist eine Überschrift 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; } Dies wird rot dargestellt. Dies auch! Dies auch! 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; } Die Navigation ist auf dieser Site rechts. 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) Cascading Style Sheets Moritz, Potyka, Benhold, Kulinski, Seite1 Seite2 CSS-Datei

25 Einbindung von CSS in HTML Als internes Stylesheet in einer HTML-Datei (style-Element) Moritz, Potyka, Benhold, Kulinski, Dokument mit Formatierungen body { color: purple; background-color: #d8da3d}

26 Einbindung von CSS in HTML Innerhalb von HTML-Tags (style-Attribut) Text BMW Moritz, Potyka, Benhold, Kulinski, Beispiel

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 Selektoren

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


Herunterladen ppt "CSS – Cascading Style Sheets Gliederung: 1. Geschichte/ Entstehung von CSS 2. Sinn und Zweck von CSS 3. Syntax 1. Boxmodell 2. Anwendung 3. Selektoren."

Ähnliche Präsentationen


Google-Anzeigen