Index
Was ist CSS?
CSS, kurz für Cascading Stylesheets, stellt eine Möglichkeit dar, dem Webbrowser Formatierungsanweisungen zu übermitteln, und damit das Assehen einer Webseite zu bestimmen. Mit dem HTML 4.01 Standard wird die Trennung zwischen Inhalt und Layout mehr dennje eingefordert. CSS bietet sich als sehr gute Alternative zur bisherigen Herangehensweise, da es dem Benutzer sogar mehr Möglichkeiten eröffnet, als mit reinem HTML Code je zu erreichen sind.
Einbinden von Cascading Stylesheets
Es stehen verschiedene Möglichkeiten zur Verfügung, Style-Anweisungen zu verwenden. Es ist möglich, die Styleanweisungen in einer externen Styledatei einzubinden, einen größeren Style-Block in den Header des HTML Dokumentes zu setzen, oder auch an einen HTML Tag direkt an eine Styleanweisung anzuhängen. In gleicher Reihenfolge wird auch die Wichtigkeit ausgewertet, wenn Sie dem gleichen Element mehrere Anweisungen zuweisen. Es ist also möglich, in einer externen Datei einen Stiel für alle <p>-Elemente festzulegen, diesen jedoch für einzelne Elemente nochmals zu überschreiben.
1. In einer externen CSS Datei
Das link Element muss sich im HTML Kopf befinden.
2. Im Header der HTML Datei
Wenn Sie CSS Code im Kopf der HTML Datei einbinden, sollten Sie diesen wie im Beispiel auskommentieren (), um zu verhindern, dass Browser, die keine Styles interpretieren können, diesen als Text anzeigen. (Der CSS Syntax wird im folgenden beschrieben.)
3. Direkt an einen HTML-Tag angehängt
1. In einer externen CSS Datei
Das link Element muss sich im HTML Kopf befinden.
<link rel="stylesheet" type="text/css" href="style.css" />
2. Im Header der HTML Datei
Wenn Sie CSS Code im Kopf der HTML Datei einbinden, sollten Sie diesen wie im Beispiel auskommentieren (), um zu verhindern, dass Browser, die keine Styles interpretieren können, diesen als Text anzeigen. (Der CSS Syntax wird im folgenden beschrieben.)
<head>
<style type="text/css">
<--
div {
font-family: Verdana;
font-size: 10px;
}
-->
</style>
</head>
<style type="text/css">
<--
div {
font-family: Verdana;
font-size: 10px;
}
-->
</style>
</head>
3. Direkt an einen HTML-Tag angehängt
<div style="font-family: Verdana; font-size: 10px;">
. . . Inhalt des Bereichs . . .
</div>
. . . Inhalt des Bereichs . . .
</div>
CSS Syntax
Die CSS Syntax besteht aus den drei Teilen Selector, Attribut und Wert. Der Selector legt fest, auf welches HTML-Element sich die Anweisung bezieht. Im folgenden ist es dann möglich, verschiedenen Attributen dieses Elementes einen oder mehrere Werte zuzuweisen. Das Beispiel zeigt den grundsätzlichen Aufbau von Styleanweisungen in einer externen Datei bzw. im HTML Kopf.
Weiterhin ist es möglich, mehreren HTML Elementen die selbe Styleanweisung zuzuordnen, oder sich nur auf Elemente an einer bestimmten Stelle (Beispielsweise auf ein <span> Element, das sich innerhalb eines <div> Elementes befindet) zu beziehen. Im folgenden Beispiel sind diese Anwendungen veranschaulicht.
Selector { Attribut: Wert; }
body {
color: #cbcbcb;
font-family: Verdana, Georgia, sans-serif;
}
/* Diese Zeile ist ein Kommentar in CSS */
body {
color: #cbcbcb;
font-family: Verdana, Georgia, sans-serif;
}
/* Diese Zeile ist ein Kommentar in CSS */
Weiterhin ist es möglich, mehreren HTML Elementen die selbe Styleanweisung zuzuordnen, oder sich nur auf Elemente an einer bestimmten Stelle (Beispielsweise auf ein <span> Element, das sich innerhalb eines <div> Elementes befindet) zu beziehen. Im folgenden Beispiel sind diese Anwendungen veranschaulicht.
h1, h2, div {
font-family: Verdana, Georgia;
font-size: 10pt;
color: #cd55bf;
}
div span {
font-family: Verdana, Georgia;
font-size: 10pt;
}
font-family: Verdana, Georgia;
font-size: 10pt;
color: #cd55bf;
}
div span {
font-family: Verdana, Georgia;
font-size: 10pt;
}
Klassen in CSS
Oftmals ist es nicht sinvoll, jedem HTML Element einer Sorte die selben Styleanweisungen zuzuordnen. Im CSS Syntax ist die Definition von Klassen vorgesehen, um die Möglichkeit der Gruppierung von Elementen zu bieten. Es können Klassen erstellt werden, die sich auf ein bestimmtes Element beziehen, jedoch müssen die Elemente einer Klasse nicht zwangsläuffig vom gleichen Typ sein. Es ist durchaus möglich einem <div> Element und einem <p> Element die selbe Klasse zuzuweisen. Auch Elemente ohne Klasse sind selbstverständlich weiterhin möglich.
Bei der Verwendung von Klassen gilt: Wenn Sie einem Element eine Styleanweisung zuordnen (wie im oben gezeigten Falle), dieses Element jedoch gleichzeitig noch einer Klasse angehört, für die ebenfalls eine Styleanweisung existiert, dann überschreibt die Anweisung der Klasse die des Elementes.
Die folgenden Beispiele verdeutlichen die Anwendung von Klassen
Wenn Sie eine Klasse unabhängig vom Elementtyp definieren wollen, ist dies folgendermassen möglich.
Bei der Verwendung von Klassen gilt: Wenn Sie einem Element eine Styleanweisung zuordnen (wie im oben gezeigten Falle), dieses Element jedoch gleichzeitig noch einer Klasse angehört, für die ebenfalls eine Styleanweisung existiert, dann überschreibt die Anweisung der Klasse die des Elementes.
Die folgenden Beispiele verdeutlichen die Anwendung von Klassen
|
/* Zuerst beziehen wir uns nur auf alle <p> Elemente */
p { font-family: Verdana, Georgia; font-size: 12px; color: #000000; } /* Nun erstellen wir zusätzlich die Klassen gr und kl */ p.gr { font-size: 16px; font-weight: bold; } p.kl { font-size: 8px; } |
Wie Sie erkennen können wird anfangs allen <p> Elementen ein Style zugewiesen
(die Schriftart, Schriftgröße und Textfarbe). Zusätzlich wurden zwei Klassen erstellt, die
sich jedoch ausschliesslich auf Elemente des Typs <p> beziehen. Beide Klassen
überschreiben die ursprünglich zugewiesene Schriftgröße. Die Klasse .gr fügt
außerdem noch ein zusätzliches Attribut hinzu. |
|
<!-- Und im HTML Code -->
<p>Formatierung festgelegt durch Styles für alle p-Elemente</p> <p class="kl">kleiner dargestellt</p> <p class="gr">größer und fett dargestellt</p> |
Nebenstehend erkennen Sie die Verwendung von Klassen in HTML. Der Klassenname wird
einem Element durch das Attribut class hinzugefügt. |
Wenn Sie eine Klasse unabhängig vom Elementtyp definieren wollen, ist dies folgendermassen möglich.
.topic {
font-family: Verdana, Georgia;
font-size: 16px;
}
.fett {
font-weight: bold;
}
Die Anwendung im HTML Code:
<div class="fett">Beliebiger Inhalt</div>
<p class="fett">Beliebiger Inhalt</p>
<p class="topic">Inhalt</p>
font-family: Verdana, Georgia;
font-size: 16px;
}
.fett {
font-weight: bold;
}
Die Anwendung im HTML Code:
<div class="fett">Beliebiger Inhalt</div>
<p class="fett">Beliebiger Inhalt</p>
<p class="topic">Inhalt</p>
CSS Anweisungen auf ID's beziehen
Neben dem Gruppieren von Elementen durch die Verwendung von Klassen ist es möglich, ganz bestimmten Elementen anhand deren ID anzusprechen. Wie bei den Klassen ist es auch hier möglich, die ID an ein bestimmtes HTML Element zu binden, oder diese für sich stehen zu lassen.
Das Beispiel verdeutlicht die Anwendung
In der HTML Datei werden ID's über das Attribut id zugewiesen.
Das Beispiel verdeutlicht die Anwendung
p#blue {
color: #149;
}
#dark {
color: #031209;
}
color: #149;
}
#dark {
color: #031209;
}
In der HTML Datei werden ID's über das Attribut id zugewiesen.
<p id="blue">blauer Text</p>
<div id="dark">Text</div>
<div id="dark">Text</div>
Pseudoklassen und Pseudoelemente
Mittels Pseudoklassen bzw. Pseudoelementen ist es möglich, bestimmte HTML Bestandteile Ihrer Webseite anzusprechen, die sich nicht eindeutig durch ein HTML Element ausdrücken lassen. Beispiele für solche Bestandteile sind etwa die Unterscheidung zwischen einem besuchten Link und einem unbesuchtem Link, oder der erste Buchstabe eines Absatzes.
Die CSS Syntax kennt eine Reihe vordefinierter Pseudoklassen, die folgendermassen benutzt werden.
1. Pseudoklassen für Verweise (Links)
2. Pseudoklassen und -elemente für Absätze
Beachten Sie, dass es zu Problemen bei der Verwendung ältere Versionen des Internet Explorer kommen kann.
3. Pseudoklasse zur Sprachauszeichnung
Wenn sich in Ihren HTML Code Elemente befinden, die das Attribut lang enthalten, ist es möglich diesen Elementen, abhängig von der angegebenen Sprache, Styleanweisungen zuzuweisen. Ein Anwendungsbeispiel ist das Austauschen der Anführungszeichen auf einer Webseite je nach Sprache. Hierzu wird die Pseudoklasse :lang verwendet.
4. Pseudoelemente für automatisch eingefügten Inhalt
Diese Pseudoklassen erlauben das einfügen von Inhalt vor bzw. nach einem HTML Element. Die Inhalte werden mit dem Attribut content: festgelegt.
Diese Beispiele verdeutlichen die Anwendung. Im ersten Fall wird die Grafik bullet.gif vor jeder <h1>-Überschrift ausgegeben, während die zweite Zeile dafür sorgt, dass die Element-Id an Überschriften des Typs <h2> in Klammern angehängt wird.
Die CSS Syntax kennt eine Reihe vordefinierter Pseudoklassen, die folgendermassen benutzt werden.
Element:Pseudoklasse {
/* Anweisungen */
}
/* Anweisungen */
}
1. Pseudoklassen für Verweise (Links)
a:link /* Ein unbesuchter Link */
a:visited /* Ein bereits besuchter Link */
a:focus /* Ein Link, der den Focus (z.B. durch TAB-Taste) erhält */
a:hover /* Ein Link, während sich der Mauszeiger darüber befindet */
a:active /* Ein Link, der gerade aktiviert (angeklickt) wird */
a:visited /* Ein bereits besuchter Link */
a:focus /* Ein Link, der den Focus (z.B. durch TAB-Taste) erhält */
a:hover /* Ein Link, während sich der Mauszeiger darüber befindet */
a:active /* Ein Link, der gerade aktiviert (angeklickt) wird */
2. Pseudoklassen und -elemente für Absätze
:first-child /* Das erste Kindelement des angegebenen Elementes erhält die Styleanweisung */
:first-line /* Die erste Zeile des Elementes erhält die Styleanweisung */
:first-letter /* Der Erste Buchstabe innerhalb des Elementes erhält die Styleanweisung */
:first-line /* Die erste Zeile des Elementes erhält die Styleanweisung */
:first-letter /* Der Erste Buchstabe innerhalb des Elementes erhält die Styleanweisung */
Beachten Sie, dass es zu Problemen bei der Verwendung ältere Versionen des Internet Explorer kommen kann.
3. Pseudoklasse zur Sprachauszeichnung
Wenn sich in Ihren HTML Code Elemente befinden, die das Attribut lang enthalten, ist es möglich diesen Elementen, abhängig von der angegebenen Sprache, Styleanweisungen zuzuweisen. Ein Anwendungsbeispiel ist das Austauschen der Anführungszeichen auf einer Webseite je nach Sprache. Hierzu wird die Pseudoklasse :lang verwendet.
:lang(de) { color: #000; }
:lang(en) { color: #005; }
:lang(en) { color: #005; }
4. Pseudoelemente für automatisch eingefügten Inhalt
Diese Pseudoklassen erlauben das einfügen von Inhalt vor bzw. nach einem HTML Element. Die Inhalte werden mit dem Attribut content: festgelegt.
:before /* Inhalt, der vor dem Element eingefügt werden soll */
:after /* Inhalt, der nach dem Element eingefügt werden soll */
:after /* Inhalt, der nach dem Element eingefügt werden soll */
Diese Beispiele verdeutlichen die Anwendung. Im ersten Fall wird die Grafik bullet.gif vor jeder <h1>-Überschrift ausgegeben, während die zweite Zeile dafür sorgt, dass die Element-Id an Überschriften des Typs <h2> in Klammern angehängt wird.
h1:before { content:url(bullet..gif)" "; }
h2:after { content:" ("attr(id)")"; }
h2:after { content:" ("attr(id)")"; }
Validation Info
Dieses Dokument entspricht den aktuellen HTML / CSS Standards.
