css – cascading style sheets gliederung: 1. geschichte/ entstehung von css 2. sinn und zweck von...
TRANSCRIPT
CSS – Cascading Style SheetsGliederung:
1. Geschichte/ Entstehung von CSS2. Sinn und Zweck von CSS3. Syntax
1. Boxmodell2. Anwendung3. Selektoren4. Einbindung
4. Fazit5. Quellen
Moritz, Potyka, Benhold, Kulinski,
Geschichte des CSS1993 sogenannte Web- StylesheetsStylesheet = 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 CSS1994 Hakan Wium Lie schlägt erstmals CCS 1994 Hakan Wium Lie schlägt erstmals CCS
vor wie man es heute kenntvor wie man es heute kenntCSS ist Gemeinschaftsproduktion von Lie und CSS ist Gemeinschaftsproduktion von Lie und
Bert BosBert 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 CSSzu diesem Zeitpunkt auch andere Sprachen
für Strukturierte Dokumenteaber 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 CSSdurch 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 2CSS2 von Browsern zum größten Teil korrekt
umgesetzt doch oft unzulangende Unterstützung
Moritz, Potyka, Benhold, Kulinski,
Geschichte des CSSW3C arbeitet momentan an
Weiterentwicklung von CSS2 um bestehende Probleme zu verringern
neben Weiterentwicklung von CSS2 Neuentwicklung von CSS Level3
CSS3 Aufbau der Teiltechniken modularmodular 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-Seitendoch 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 / StylesheetsVorteil 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 / StylesheetsBrowser 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 / StylesheetsCSS 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 / StylesheetsBeispiel Wikipedia-Seite auf verschiedenen
Handymodellen
Moritz, Potyka, Benhold, Kulinski,
Sinn und Zweck von CSS / StylesheetsBeispiel Wikipedia-Seite auf verschiedenen
Handymodellen
Moritz, Potyka, Benhold, Kulinski,
Sinn und Zweck von CSS / StylesheetsBeispiel Wikipedia-Seite auf verschiedenen
Handymodellen
Moritz, Potyka, Benhold, Kulinski,
Sinn und Zweck von CSS / StylesheetsBeispiel Wikipedia-Seite auf verschiedenen
Handymodellen
Moritz, Potyka, Benhold, Kulinski,
Sinn und Zweck von CSS / StylesheetsBeispiel Wikipedia-Seite auf verschiedenen
Handymodellen
Moritz, Potyka, Benhold, Kulinski,
Sinn und Zweck von CSS / Stylesheetsauch in Zukunft weitere
Gestaltungsmöglichkeitenderzeitige 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,
BoxmodellGrundlegende Regel für Einbindung von CSSReservierung eines Rechtecks für jedes
Element einer SeiteEigenschaften variierbarUntergeordnete 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.
Moritz, Potyka, Benhold, Kulinski, 04/11/23
Was sind Selektoren?Für Aufrufung der EigenschaftenVerbindung 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; ... }
Typ-SelektorenEin 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, 04/11/23
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, 04/11/23
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, 04/11/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, 04/11/23
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>Moritz, Potyka, Benhold, Kulinski,
Seite1
Seite2CSS-Datei
04/11/23
Einbindung von CSS in HTML Als internes Stylesheet in einer HTML-Datei (style-Element)
Moritz, Potyka, Benhold, Kulinski,
<html>
<head>
<title>Dokument mit Formatierungen</title>
<style type="text/css">
body { color: purple; background-color: #d8da3d}
</style>
</head>
<body></body>
</html>
04/11/23
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>
Moritz, Potyka, Benhold, Kulinski, 04/11/23
Beispiel
FazitStylesheets unterstützen professionell die
Gestaltung des Web-Designsals 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/
Fragen zum Thema?
Vielen Dank für ihre Aufmerksamkeit!