CSS
Werbung
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 HTMLDokument 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 StyleAngabe 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 HTMLDatei zu definieren kann das Stylesheet am
Anfang dieser Datei definiert werden:
Syntax:
Beispiel:
<html>
<head>
…
<style type="text/css">
[Stildefinitonen]
</style>
</head>
<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:
HTML-Datei:
h1 { font-size:26px; margin-bottom:18px; }
ul { color:blue; }
p,div { font-size:13px; }
…
<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 HTMLDatei 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
Klassen
In CSS können Klassen definiert werden. Dadurch kann ein HTMLElement 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; marginbottom: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-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:
<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
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.
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
