Die Präsentation wird geladen. Bitte warten

Die Präsentation wird geladen. Bitte warten

Christof Lutz, 2005 Cascading Style Sheets CSS Einführung und Grundkonzepte.

Ähnliche Präsentationen


Präsentation zum Thema: "Christof Lutz, 2005 Cascading Style Sheets CSS Einführung und Grundkonzepte."—  Präsentation transkript:

1 Christof Lutz, 2005 Cascading Style Sheets CSS Einführung und Grundkonzepte

2 Christof Lutz, 2005 Was sind Stylesheets? Stylesheets… wurden als Ergänzung zu HTML entwickelt. stellen eine Sprache zur Formatierung einzelner HTML-Elemente dar. wurden aus der Idee geboren – Inhalt und Design bei Webseiten voneinander zu trennen. bieten die Möglichkeit Formatangaben zentral zu definieren womit der Stil im gesamten HTML- Dokument einheitlich wird. werden, wie HTML, vom W3C verwaltet und weiterentwickelt

3 Christof Lutz, 2005 Was sind Stylesheets? Vorteile gegenüber herkömmlichem HTML: –Vergrößerte Gestaltungsvielfalt –Trennung von Inhalt und Layout möglich –Zentrale Definition von Stilen schneller Veränderbar –Keine Tricks mit Tabellenlayouts mehr nötig –Suchmaschinenfreundlicher

4 Christof Lutz, 2005 Was sind Stylesheets? Neben den Cascading Style Sheets (CSS), die für HTML entwickelt wurden existieren noch weitere Stylesheetsprachen: –die Document Style Semantics and Specification Language" (DSSSL), wurde für SGML konzipiert –"Extensible Stylesheet Language" (XSL), ist eine Entwicklung für XML

5 Christof Lutz, 2005 Historie CSS 1.0 existiert seit 1996 (1999 nochmals überarbeitet) –beinhaltete schon die meisten heute geläufigen Styleangaben CSS 2.0 seit 1998 –weitere Elemente hinzugefügt und vorhandene um zusätzliche Eigenschaften erweitert CSS 2.1 und CSS 3.0 sind derzeit in Bearbeitung

6 Christof Lutz, 2005 Syntax von CSS Allgemein wird eine CSS-Eigenschaft nach folgendem Muster deklariert: Selektor { Eigenschaft:Wert;} Der Selektor gibt an, welchem HTML-Tag die Formatierung zugewiesen wird Die Eigenschaft bestimmt, was im Tag geändert werden soll Der Wert gibt an, auf welchen Wert die Eigenschaft geändert wird

7 Christof Lutz, 2005 CSS in ein Dokument einbinden Es gibt 3 Möglichkeiten ein Stylesheet in HTML einzubinden: 1.Innerhalb eines HTML-Elements 2.Zentral am Anfang einer HTML-Datei 3.In einer externen CSS-Datei

8 Christof Lutz, 2005 Einbinden innerhalb eines Tags Wenn einzelne HTML-Elemente eine spezielle Formatierung erlangen sollen kann die Style- Angabe direkt im Tag angegeben werden:... Beispiel: Titel

9 Christof Lutz, 2005 Einbinden am Anfang der Datei Um zentrale Formate innerhalb einer HTML- Datei zu definieren kann das Stylesheet am Anfang dieser Datei definiert werden: Syntax: … [Stildefinitonen] Beispiel:

10 Christof Lutz, 2005 Externe CSS-Dateien Externe CSS-Dateien bieten den Vorteil, dass mehrere HTML-Dateien mit gleichen Stilvorlagen definiert werden können: Es wird eine Datei mit der Endung.css erstellt, in der die Styles definiert werden. Im HTML Dokument wird die CSS-Datei über ein Link-Tag eingebunden. abc.css: h1 { font-size:26px; margin-bottom:18px; } ul { color:blue; } p,div { font-size:13px; } … HTML-Datei: …

11 Christof Lutz, 2005 Unterschiedliche Medien Eine weitere Stärke von CSS ist die Möglichkeit verschiedene Stildefinitionen für unterschiedliche Ausgabemedien festzulegen. Somit kann eine HTML- Datei für z.B. PC-Bildschirm, PDA, Drucker und andere Medien verwendet werden. Dazu werden verschieden CSS-Dateien eingebunden: …

12 Christof Lutz, 2005 Klassen In CSS können Klassen definiert werden. Dadurch kann ein HTML- Element mit verschiedenen Eigenschaften belegt werden: … H1 ohne Klasse H1 mit Klasse hinterlegt H2 mit Klasse extra …

13 Christof Lutz, 2005 Die Elemente div und span In HTML gibt es 2 Tags, welche keine eigene Formatierungseigenschaft besitzen. Die Elemente div und span. Sie dienen dazu Bereiche zu definieren, die per CSS-Klassen mit Eigenschaften gefüllt werden. Das div-Element bildet einen Block, während span als Inline-Element benutzt wird.

14 Christof Lutz, 2005 Die Elemente div und span Beispiel: … Hier wird ein Block gestaltet mit roten Inline-Element Ein weiterer Block mit zusätzlicher Größe und wieder kleiner … …

15 Christof Lutz, 2005 Individualformate So wie Formate für Klassen definieren können, mit dem Universalattribut class angesprochen werden, können auch Formate definiert werden, die über das Universalattribut id angesprochen werden. Der Bezeichner für ein id-Attribut sollte ein dokumentweit eindeutiger Name sein, da es sich um eine zentrale Formatdefinition handelt. In CSS werden die id-Namen allerdings nicht nur wie beispielsweise in JavaScript als dokumentweit eindeutige Bezeichner betrachtet, sondern auch als elementtypweit eindeutige Bezeichner.

16 Christof Lutz, 2005 Individualformate Id-Attribute werden in der Style-Definition mit # und einem Namen erstellt. In der HTML-Datei wird das id-Attribut mit id=idname aufgerufen: #roterBereich { position:absolute; top:130px; left:30px; width:320px; border:4px solid #EE0000; } … Der rote Bereich

17 Christof Lutz, 2005 Kaskadierung Wird in einem HTML-Dokument kein Stylesheet definiert, so bestimmt der Browser die Darstellung der Elemente. Der Browser liefert ein eigenes Stylesheet (Browser-Stylesheet). Aber auch der Benutzer des Browsers kann über die Browsereinstellung oder Zusatzprogramme festlegen, wie ein Dokument angezeigt werden soll (Benutzer-Stylesheet). Erst wenn im Programmcode ein Stil explizit festgelegt wird werden die voreingestellten Styles überschrieben.

18 Christof Lutz, 2005 Kaskadierung Selbst innerhalb einer Styledefinition können widersprüchliche Anweisungen definiert sein. Der Browser folgt darum festgelegten Regeln, welche Anweisung befolgt werden soll. Diese Regeln sollten bekannt sein und beachtet werden, damit auch das gewünschte Ergebnis erscheint Auch kann aus dieser Eigenart ein Nutzen gezogen werden – in dem gezielt einzelne Anweisungen überschrieben werden.

19 Christof Lutz, 2005 Kaskadierung Existieren verschiedene Style-Angaben für ein Element wird die nach Ursprung und Priorität ermittelt, welche Angabe verwendet wird. Reihenfolge in absteigender Wichtigkeit: Benutzer-Stylesheet mit !important* Autoren-Stylesheet mit !important* Autoren-Stylesheet Benutzer-Stylesheet Browser-Stylesheet *!important: Selektor { Eigenschaft:Wert !important; }

20 Christof Lutz, 2005 Kaskadierung weitere Regeln: –#id-Elemente vor –Klassen vor –Elementen –Direktformatierung vor –Stildefinition im Header vor –Stildefinition aus CSS-Datei –zuletzt definierte Angabe überschreibt vorherige Angaben

21 Christof Lutz, 2005 Kaskadierung Beispiele: CSS-Datei: h1 {color:red; font-size:48px;} HTML-Datei: h1 {color:blue; font-size:24px;} … Titel Hier wird der Titel in grün mit 36 Pixel ausgegeben

22 Christof Lutz, 2005 Kaskadierung Beispiele (2): a { color:blue; text-decoration:underline; }.xy { color:green; text-decoration:line-through; } li a { color:red; text-decoration:none; } … Listenpunkt: Verweis Die Klasse hat vor den anderen Eigenschaften Vorrang der Verweis wird grün und durchgestrichen.

23 Christof Lutz, 2005 Quellen: Daniel G. Shafer & Kevin Yank, Cascading Stylesheets, dpunkt-Verlag, 1.Aufl. Kai Laborenz, CSS-Praxis, Galileo Press, 2.Aufl. HTML-World eBook, CSS,


Herunterladen ppt "Christof Lutz, 2005 Cascading Style Sheets CSS Einführung und Grundkonzepte."

Ähnliche Präsentationen


Google-Anzeigen