CSS – Cascading Style Sheets Gliederung: 1. Geschichte/ Entstehung von CSS 2. Sinn und Zweck von...

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


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


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


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


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


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


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


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


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


Sinn und Zweck von CSS / StylesheetsBeispiel Wikipedia-Seite auf verschiedenen

Handymodellen


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


BoxmodellGrundlegende Regel für Einbindung von CSSReservierung eines Rechtecks für jedes

Element einer SeiteEigenschaften variierbarUntergeordnete Boxen


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>


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>


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>


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.


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)


<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>


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!

CSS – Cascading Style Sheets Gliederung: 1. Geschichte/ Entstehung von CSS 2. Sinn und Zweck von...

Documents

Transcript of CSS – Cascading Style Sheets Gliederung: 1. Geschichte/ Entstehung von CSS 2. Sinn und Zweck von...