Cascading Style Sheets CSS Einführung und Grundkonzepte
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
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“
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
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
Selektor { Eigenschaft:Wert;} 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
CSS in ein Dokument einbinden Es gibt 3 Möglichkeiten ein Stylesheet in HTML einzubinden: Innerhalb eines HTML-Elements Zentral am Anfang einer HTML-Datei In einer externen CSS-Datei
Einbinden innerhalb eines Tags Wenn einzelne HTML-Elemente eine spezielle Formatierung erlangen sollen kann die Style-Angabe direkt im Tag angegeben werden: <tag style="[element-spezifische Formate]">...</tag> Beispiel: <h1 style="font-family:'Century Schoolbook',serif; font-size:4em; ">Titel</h1> ! Hochkommata statt Anführungszeichen!
Einbinden am Anfang der Datei Um zentrale Formate innerhalb einer HTML-Datei zu definieren kann das Stylesheet am Anfang dieser Datei definiert werden: Syntax: <html> <head> … <style type="text/css"> [Stildefinitonen] </style> </head> Beispiel: <html> <head> <style type="text/css"> <!-- h1 { color:red; font-size:48px; } p { font-size:110%; } //--> </style> </head>
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: <html> <head> … <link rel="stylesheet" type="text/css“ href=“abc.css"> </head>
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: <html> <head> <link rel="stylesheet" media="screen" href="website.css"> <link rel="stylesheet" media="print, embossed" href="druck.css"> <link rel="stylesheet" media="aural" href="speaker.css"> </head> …
Klassen In CSS können Klassen definiert werden. Dadurch kann ein HTML-Element mit verschiedenen Eigenschaften belegt werden: <style type="text/css" > <!-- h1 { font-family:Arial,sans-serif; font-size:2em;} h1.hinterlegt { background-color:#FFFF00;} .extra { background-color:#FF99FF; } //--> </style> … <body> <h1>H1 ohne Klasse</h1> <h1 class="hinterlegt">H1 mit Klasse hinterlegt</h1> <h2 class="extra">H2 mit Klasse extra</h1> …
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.
Die Elemente „div“ und „span“ Beispiel: <style type="text/css"> <!-- .p { font-family:Arial,sans-serif; font-size:105%; color:black; margin-top:6px; margin-bottom:6px; } .red { color:red; } .bold { font-weight:bold; } .big { font-size:140%; } // --> </style> … <body> <div class="p"> Hier wird ein Block gestaltet <span class="red"> mit roten Inline-Element </span></div> <div class="bold"> Ein weiterer Block <span class="big"> mit zusätzlicher Größe</span> und wieder kleiner …</div>
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.
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: <style type="text/css"> #roterBereich { position:absolute; top:130px; left:30px; width:320px; border:4px solid #EE0000; } </style> … <body> <div id="roterBereich">Der rote Bereich</div>
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.
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.
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; }
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
Kaskadierung Beispiele: CSS-Datei: h1 {color:red; font-size:48px;} HTML-Datei: <style type="text/css"> h1 {color:blue; font-size:24px;} </style> … <body> <h1 style="color:green; font-size:36px; ">Titel</h1> Hier wird der Titel in grün mit 36 Pixel ausgegeben
Kaskadierung Beispiele (2): <style type="text/css"> a { color:blue; text-decoration:underline; } .xy { color:green; text-decoration:line-through; } li a { color:red; text-decoration:none; } </style> … <body> <ul> <li>Listenpunkt: <a class="xy" href="ziel.htm"> Verweis</a> </li> Die Klasse hat vor den anderen Eigenschaften Vorrang der Verweis wird grün und durchgestrichen.
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