css cascading style sheets n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
CSS – Cascading Style Sheets PowerPoint Presentation
Download Presentation
CSS – Cascading Style Sheets

Loading in 2 Seconds...

play fullscreen
1 / 29

CSS – Cascading Style Sheets - PowerPoint PPT Presentation


  • 90 Views
  • Uploaded on

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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'CSS – Cascading Style Sheets' - saxton


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
css cascading style sheets

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
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 css1
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 css2
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 css3
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 css4
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
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 stylesheets1
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 stylesheets2
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 stylesheets3
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 stylesheets4
Sinn und Zweck von CSS / Stylesheets
  • Beispiel Wikipedia-Seite auf verschiedenen Handymodellen

Moritz, Potyka, Benhold, Kulinski,

sinn und zweck von css stylesheets5
Sinn und Zweck von CSS / Stylesheets
  • Beispiel Wikipedia-Seite auf verschiedenen Handymodellen

Moritz, Potyka, Benhold, Kulinski,

sinn und zweck von css stylesheets6
Sinn und Zweck von CSS / Stylesheets
  • Beispiel Wikipedia-Seite auf verschiedenen Handymodellen

Moritz, Potyka, Benhold, Kulinski,

sinn und zweck von css stylesheets7
Sinn und Zweck von CSS / Stylesheets
  • Beispiel Wikipedia-Seite auf verschiedenen Handymodellen

Moritz, Potyka, Benhold, Kulinski,

sinn und zweck von css stylesheets8
Sinn und Zweck von CSS / Stylesheets
  • Beispiel Wikipedia-Seite auf verschiedenen Handymodellen

Moritz, Potyka, Benhold, Kulinski,

sinn und zweck von css stylesheets9
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
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
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,

was sind selektoren
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;

...

}

typ selektoren
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,

klassen selektoren
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,

id selektoren
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,

attribut selektoren
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,

einbindung von css in html
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

einbindung von css in html1
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,

einbindung von css in html2
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,

fazit
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
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
Fragen zum Thema?

Vielen Dank für ihre Aufmerksamkeit!