Christof Lutz, 2005
Cascading Style SheetsCSS
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 schneller
Veränderbar– 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:
<tag style="[element-spezifische Formate]">...</tag>
Beispiel:
<h1 style="font-family:'Century Schoolbook',serif; font-size:4em; ">Titel</h1>
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:<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>
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:<html>
<head>
…
<link rel="stylesheet" type="text/css“ href=“abc.css">
</head>
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:
<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>…
Christof Lutz, 2005
KlassenIn 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>…
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:
<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>…
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:
<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>
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-StylesheetBenutzer-StylesheetBrowser-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:<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
Christof Lutz, 2005
KaskadierungBeispiele (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.
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
Top Related