Cascading Style Sheets CSS

Einführung und Grundkonzepte 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 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  Veränderbar schneller – Keine „Tricks“ mit Tabellenlayouts mehr nötig – „Suchmaschinenfreundlicher“ 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 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 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 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 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

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: … Beispiel: 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: … 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: … 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

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

Christof Lutz, 2005

Die Elemente „div“ und „span“

Beispiel: …

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

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

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.

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.

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; } 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 Christof Lutz, 2005

Kaskadierung

Beispiele: CSS-Datei: h1 {color:red; font-size:48px;} HTML-Datei: …

Titel

Hier wird der Titel in grün mit 36 Pixel ausgegeben Christof Lutz, 2005

Kaskadierung

Beispiele (2): …

• Listenpunkt: Verweis
Die Klasse hat vor den anderen Eigenschaften Vorrang  Verweis wird grün und durchgestrichen.

der Christof Lutz, 2005

Quellen:

• http://www.selfhtml.org

• Daniel G. Shafer & Kevin Yank,

Cascading Stylesheets

, dpunkt-Verlag, 1.Aufl.

• Kai Laborenz,

CSS-Praxis

, Galileo Press, 2.Aufl.

• HTML-World eBook,

CSS

, http://www.html-world.de

Christof Lutz, 2005