Spezielle Formatierungen

Spezielle Formatierungen

Neben den normalen Varianten zur Formatierung, die Sie bisher kennengelernt haben, gibt es einige weitere spezielle Formatierungsarten.

Besonders in solchen Fällen, wenn Sie mehreren Elementen die gleiche Schriftart, Farbe oder Ähnliches zuweisen möchten, wäre es sehr angenehm, eine verkürzende Schreibweise verwenden zu können. Dies ist möglich, wenn Sie bei der Notation des Selektors mehrere Selektoren durch Kommata trennen.

Selektor1, Selektor2, SelektorN {
Eigenschaften;
}

Dies ist besonders bei ähnlichen Elementen wie z.B. h1 bis h6 sinnvoll. Jedem Element nun einzeln die Schriftart Arial zuzuweisen, würde den Stylesheet-Umfang versechsfachen.

h1 {
font-family:Arial,sans-serif;
}
h2 {
font-family:Arial,sans-serif;
}
h3 {
font-family:Arial,sans-serif;
}
h4 {
font-family:Arial,sans-serif;
}
h5 {
font-family:Arial,sans-serif;
}
h6 {
font-family:Arial,sans-serif;
}

Die kürzere Schreibweise lautet nun:

h1, h2, h3, h4, h5, h6 {
font-family:Arial,sans-serif;
}

Ein vollständiges Beispiel:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- Gruppenformatierungen -->
<html>
<head>
<title>Spezielle Formatierungen</title>
<style type="text/css">
h1, h2, h3, h4, h5, h6 {
font-family:Arial,sans-serif;
}
</style>
</head>
<body>
<h1>Überschrift der 1. Ordnung</h1>
<h2>Überschrift der 2. Ordnung</h2>
<h3>Überschrift der 3. Ordnung</h3>
<h4>Überschrift der 4. Ordnung</h4>
<h5>Überschrift der 5. Ordnung</h5>
<h6>Überschrift der 6. Ordnung</h6>
</body>
</html>

spezielle_formatierungen_01

Info

Dies lässt sich natürlich auch mit allen anderen Elementen durchführen. Sie können also auch h1-h6-Elemente mit p-Elementen und kbd-Elementen gruppieren.

CSS-Formatierungen lassen sich auch auf Elemente begrenzen, bei denen z.B. ein bestimmtes Attribut oder ein Attribut mit einem speziellen Parameter gesetzt wurde. Ein Textabsatz, der mit dem Attribut align ausgerichtet wurde, könnte, abhängig von seiner Ausrichtung, in einer unterschiedlichen Textfarbe dargestellt werden.

Die Formatierungsbedingung wird in eckigen Klammern direkt nach dem Selektor notiert (also noch vor der geöffneten geschweiften Klammer). Wenn eine Überschrift h1 z. B. mit dem Attribut align ausgerichtet wurde und deshalb eine andere Schriftfarbe bekommen soll, würde die Anweisung wie folgt lauten:

h1 {
color:#336699;
}
h1[align] {
color:#993366;
}

In diesem Beispiel würden alle Überschriften der 1. Ordnung die Farbe #336699 zugewiesen bekommen, es sei denn, sie wurden explizit mit dem Attribut align ausgerichtet. Dann bekommen sie die Farbe #996633.

Genauso gut ließe sich die Formatierung mit der Farbe #996633 nur auf Überschriften der 1. Ordnung anwenden, die mit dem align-Attribut zentriert (center) ausgerichtet wurden.

h1 {
color:#336699;
}
h1[align=center] {
color:#993366;
}

Der Parameter würde dann hinter dem Attributbezeichner stehen, getrennt durch das Gleichheitszeichen und ohne jegliche Anführungszeichen.

Sie können sich bei dem Parameter aber auch lediglich auf eine Zeichenkette beschränken, die innerhalb des Attributs vorkommt. Dabei müssen Sie aber unterscheiden, ob die Zeichenketten im Attribut mit Leerzeichen oder Bindestrichen getrennt werden. Dementsprechend müssen Sie eine andere Schreibweise verwenden. Bei einem Leerzeichen als Trennzeichen müssen Sie ~= und bei Bindestrichen |= verwenden.

p[name~=Text] {
background-color:#336699;
color:#FFFFFF;
}
p[name|=Absatz] {
font-variant:small-caps;
}

Möchten Sie alle HTML-Elemente zur Formatierung ansprechen, können Sie den Platzhalter * verwenden. Die Angabe

*[align=center] {
color:#996633;
}

würde allen HTML-Elementen, die mit dem align-Attribut zentriert ausgerichtet wurden, die Farbe #996633 zuweisen.

Info

Den Platzhalter * können Sie natürlich auch für andere Formatierungen verwenden, die nicht attributbedingt sind. So würde * { font-family:Arial; } allen HTML-Elementen die Schriftart Arial zuweisen. Achtung: Dies gilt auch für das pre-Element!

Attributbedingte Formatierungen gehören zum CSS 2.0-Standard.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- attributbedingte Formatierung -->
<html>
<head>
<title>Spezielle Formatierungen</title>
<style type="text/css">
*[align] {
font-family:sans-serif;
}
p[align=center] {
background-color:#00FFFF;
}
p[name~=Text] {
background-color:#336699;
color:#FFFFFF;
}
p[name|=Absatz] {
font-variant:small-caps;
}
</style>
</head>
<body>
<h1 align="center">Attributbedingte Formatierung</h1>
<p>Dies ist ein normaler Textabsatz.</p>
<p align="right">Rechtsbündig ausgerichteter Textabsatz.</p>
<p align="center">Zentrierter Textabsatz</p>
<p name="Text Absatz">Der Name dieses Absatzes lautet: <Text Absatz>.</p>
<p name="Text-Absatz">Der Name dieses Absatzes lautet etwas anders: <Text-Absatz></p>
</body>
</html>

spezielle_formatierungen_02

Klassen

In HTML gibt es das Universalattribut class, das Sie im Start-Tag eines jeden Elements notieren können. So können Sie z.B. verschiedene HTML-Elemente zu einer Klasse zusammenfassen. Diese Elemente gehören dann logisch zusammen. Auch Elemente der gleichen Sorte lassen sich zu Klassen zusammenfassen. Mit CSS können Sie nun für solche Klassen spezielle Formatierungen anwenden. Um allen p-Elementen, die zur Klasse absatz gehören, die Farbe #00FF00 zuzuweisen, müssen Sie in CSS zuerst den Selektor p notieren und dann, getrennt durch einen Punkt, die Klasse.

p.absatz {
color:#00FF00;
}

Jedes p-Element, das im Attribut class den Parameter absatz zugewiesen bekommen hat, wird mit der Textfarbe #00FF00 dargestellt.

<p class="absatz">Textabsatz der Klasse absatz</p>

Wenn zu einer solchen Klasse unterschiedliche HTML-Elemente gehören und die CSS-Formatierung für alle angewendet werden soll, lassen Sie den Selektor weg, oder Sie notieren den Platzhalter *.

.absatz {
color:#00FF00;
}
*.absatz {
color:#00FF00;
}

Zur Übersicht folgt nun noch einmal ein vollständiges Beispiel:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- Formatierung mit Klassen -->
<html>
<head>
<title>Klassen</title>
<style type="text/css">
.rot {
color:#FF0000;
}
*.gruen {
color:#00FF00;
}
p.fett {
font-weight:bold;
}
</style>
</head>
<body>
<h1 class="rot">Formatierung mit Klassen</h1>
<p class="rot">Dieser Absatz ist rot.</p>
<p class="fett">Dieser Absatz ist fett gedruckt.</p>
<p class="gruen">Dieser Absatz ist grün.</p>
</body>
</html>

spezielle_formatierungen_03

Info

Achten Sie bei der Verwendung von Klassen darauf, dass Sie z.B. nicht allen Überschriften-Elementen die gleiche Schriftgröße zuweisen. Dies würde den Sinn und Zweck von Überschriften zur Textstrukturierung zunichte machen.

Verschachtelte Elemente

Gelegentlich kann es sinnvoll sein, Formatierungen abhängig von der Verschachtelung der HTML-Elemente zu setzen, z. B. kann das em-Element sowohl im Gültigkeitsbereich des h1-Elements als auch des p-Elements notiert werden. Davon abhängig, können Sie das em-Element unterschiedlich formatieren. Während es innerhalb eines p-Elements den Text fett, kursiv und in einer blauen Schriftfarbe darstellen soll, könnte es im h1-Element den Text rot und normal darstellen. Um eine solche Formatierung in CSS zu notieren, müssen Sie zuerst den Selektor des Elternelements und anschließend den Selektor des Kindelements notieren. Beide Selektoren werden durch ein Leerzeichen voneinander getrennt.

SelektorE SelektorK {
Eigenschaften;
}

Die Syntax für das Beispiel von eben sieht dann wie folgt aus:

h1 em {
font-style:normal;
color:#FF0000;
}
p em {
font-weight:bold;
color:#0000FF;
}

Solche Anweisungen gehören zum CSS 1.0-Standard und werden vom Internet Explorer und Netscape ab Version 4 interpretiert. Die Bedingungen lassen sich nach dem CSS 2.0-Standard noch genauer festlegen, und zwar durch spezielle Zeichen, die zwischen den beiden Elementen notiert werden.

p > em {
color:#FF0000;
}

Diese Anweisung bedeutet, dass ein mit dem Element em ausgezeichneter Text nur dann rot dargestellt wird, wenn er direkt ein Kindelement des p-Elements ist, z.B.

<p>...<em>...</em>...</p>.
p * em {
color:#00FF00;
}

Der mit dem em-Element ausgezeichnete Text wird nur dann grün dargestellt, wenn das Element mindestens zwei Ebenen nach dem p-Element notiert wurde, z.B.

<p>...<i>...<em>...</em>...</i>...</p>.
p + em {
color:#0000FF;
}

Der mit em ausgezeichnete Text wird erst dann blau dargestellt, wenn das em-Element nach dem p-Element notiert wurde bzw. auf einer gleichen Ebene liegt, z.B.

<p>...</p><em>...</em>.

Info

Die Eingrenzungen, die durch die CSS 2.0-Bedingungen ">" und "*" möglich sind, werden vom IE ab Version 5 und ab dem Netscape 6 interpretiert. Die Anweisung "+" funktioniert lediglich ab dem Netscape 6.

Das folgende Listing stellt alle Bedingungen noch einmal in einem vollständigen Beispiel dar.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- Formatierungen mit Bedingung -->
<html>
<head>
<title>Verschachtelte Elemente</title>
<style type="text/css">
h1 em {
font-style:normal;
color:#FF0000;
}
p em {
font-weight:bold;
color:#0000FF;
}
p > em {
color:#FF0000;
}
p * em {
color:#00FF00;
}
p + em {
color:#0000FF;
}
</style>
</head>
<body>
<h1>Formatierungen mit <em>Bedingung</em></h1>
<p>Dieser Textabsatz stellt die Anweisung <em>p > em</em> dar.</p>
<p>Dieser Textabsatz stellt <i>die Anweisung <em>p * em</em> dar.</i></p>
<p>Dieser Textabsatz stellt die Anweisung p + em dar.</p><em>blau</em>
</body>
</html>

spezielle_formatierungen_04

Das Beispiel aus dem Code stellt die unterschiedlichen Formatierungsmöglichkeiten von verschachtelten Elementen dar.

Individuelle Formate

Mit individuellen Formaten können Sie Formatierungen festlegen, die nur auf ein spezielles Element angewendet werden dürfen. Mit dem Universalattribut id können Sie einem HTML-Element eine Identifikation (ID) zuweisen. Da der Parameter, der dem Attribut id zugewiesen worden ist, nur einmal vorkommen darf bzw. sollte, können Sie anhand dieser ID ein Individualformat definieren.

Die ID müssen Sie in CSS mit dem Präfix # als Selektor notieren, in geschweiften Klammern dahinter die Eigenschaften.

#id {
Eigenschaften;
}

Für das Element p mit dem Parameter ersterAbsatz im id-Attribut würde der Selektor #ersterAbsatz lauten. Außerdem können Sie festlegen, dass ein Individualformat nur dann zugewiesen wird, wenn die ID zu einem bestimmten Element gehört.

h1#nummerEins {
color:#FF0000;
}

Dieses Individualformat wird nur dann zugewiesen, wenn das Element mit der ID nummerEins ein h1-Element ist. Ansonsten würde z.B. ein p-Element mit der ID nummerEins von dieser Formatierung ausgenommen werden.

Solche Formate werden vom IE ab Version 3 und von Netscape ab Version 6 unterstützt.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- Individualformat -->
<html>
<head>
<title>Individuelle Formate</title>
<style type="text/css">
h1#eins {
color:#800000;
}
#zwei {
color:#008000;
}
#drei {
color:#000080;
}
</style>
</head>
<body>
<h1 id="eins">Roter Text</h1>
<p id="zwei">Grüner Text</p>
<p id="drei">Blauer Text</p>
</body>
</html>

spezielle_formatierungen_05

Testen Sie einmal Folgendes: Ersetzen Sie in der Stylesheet-Definition den Selektor #zwei durch den Selektor h1#zwei, und testen Sie das Listing erneut im Browser. Sie werden feststellen, dass der Text des p-Elements mit der ID zwei nun nicht mehr in einer grünen Schriftfarbe dargestellt wird.