Transcript Cascading Style Sheets CSS
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:
Titel
Christof Lutz, 2005Einbinden 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, 2005Die 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: …
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: …
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, 2005Kaskadierung
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