Klassen-Selektoren
(Auszug aus "CSS Kochbuch" von Christopher Schmitt)
Wenn Sie die gleichen CSS-Regeln häufig auf verschiedene Elemente anwenden wollen, empfiehlt sich die Verwendung eines Klassen-Selektors.
So können Sie mit Hilfe eines Klassen-Selektors Warnungen sowohl in Links wie auch in Listenelementen rot darstellen, indem Sie beiden Elementen die gleiche Klasse zuweisen, wie im Folgenden gezeigt.
Um einen Selektor für die Klasse warning zu erstellen, stellen Sie diesem einen Punkt (.) voran:
<html>
<head>
<title>CSS Kochbuch</title>
<style type="text/css">
<!--
* {
font-family: verdana, arial, sans-serif;
}
body {
}
h1 {
font-size: 120%;
}
#navigation {
border: 1px solid black;
padding: 40px;
}
li a {
text-decoration: none;
}
p {
font-size: 90%;
}
.warning {
font-weight: bold;
}
-->
</style>
</head>
<body>
<h1>Seitenüberschrift</h1>
<p>Dies ist ein Beispielabsatz mit einem <a href="http://csscookbook.com">Link</a>. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna <em class="warning">aliquam erat volutpat</em>. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<ul id="navigation">
<li><a href="http://csscookbook.com">Äpfel</a></li>
<li><a href="http://csscookbook.com">Bananen</a></li>
<li><a href="http://csscookbook.com">Kirschen</a></li>
</ul>
</body>
</html>Weisen Sie nun einem Link, einem Listeneintrag und einem em-Element das Attribut class und den entsprechenden Wert warning zu, um diese Elemente mit besonderen Stilen zu versehen (siehe nächste Abbildung):
<html>
<head>
<title>CSS Kochbuch</title>
<style type="text/css">
<!--
* {
font-family: verdana, arial, sans-serif;
}
h1 {
font-size: 120%;
}
#navigation {
border: 1px solid black;
padding: 40px;
}
li a {
text-decoration: none;
}
p {
font-size: 90%;
}
.warning {
font-weight: bold;
}
-->
</style>
</head>
<body>
<h1>Seitenüberschrift</h1>
<p>Dies ist ein Beispielabsatz mit einem <a href="http://csscookbook.com" class="warning">Link</a>. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna <em class="warning">aliquam erat volutpat</em>. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<ul id="navigation">
<li class="warning"><a href="http://csscookbook.com">Äpfel</a></li>
<li><a href="http://csscookbook.com">Bananen</a></li>
<li><a href="http://csscookbook.com">Kirschen</a></li>
</ul>
</body>
</html>
Abbildung: Die modifizierten CSS-Regeln in der Webseite.
Eine Darstellung der Selektoren in der Struktur der Webseite sehen Sie in der folgenden Abbildung.
Abbildung: Die mit Stildefinitionen versehenen Elemente innerhalb der Seitenstruktur.
(Anmerkung: Auch das em-Element sollte hervorgehoben sein.)
| << zurück | vor >> |
| Tipp der data2type-Redaktion: Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an: |
Copyright der deutschen Ausgabe © 2007 by O’Reilly Verlag GmbH & Co. KG
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS Kochbuch" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.
O’Reilly Verlag GmbH & Co. KG, Balthasarstr. 81, 50670 Köln