Das span-Element
(Auszug aus "CSS − Anspruchsvolle Websites mit Cascading Stylesheets" von Rachel Andrew & Dan Shafer)
Manchmal ist es wichtig, die Bedeutung spezieller Textteile innerhalb eines Absatzes oder einer Überschrift gestalterisch hervorzuheben. Dafür reicht es schon aus, die Schriftart oder -farbe zu ändern oder die Schriftgröße mitten im Absatz zu wechseln. Es liegt auf der Hand, dass Sie hierfür keinen neuen Absatz definieren können, ohne Ihr Layout zu ruinieren.
Für solche Fälle umschließt man den gewünschten Text einfach mit <span>-Tags und wendet eine normale Stilregel darauf an. span ähnelt damit dem div-Element, das ebenfalls dazu eingesetzt wird, einzelne Bereiche auf einer Seite auszuzeichnen. Im Gegensatz zu dem Blockelement div ist span jedoch ein Inline-Element und kann somit direkt im Fließtext eingesetzt werden.
Das span-Element ist äußerst nützlich, um spezielle Schrifteigenschaften oder andere geheimnisvolle Textauszeichnungen zuzuweisen. Die nächste Abbildung zeigt ein Beispiel, in dem der Designer einen Satz innerhalb eines Absatzes besonders hervorheben wollte und dazu eine Hintergrundfarbe und eine andere Schrift gewählt hat.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Demonstration des <span> Elements</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
.change {
background-color: yellow;
color: maroon;
font-weight: bold;
}
</style>
</head>
<body>
<p>Das ist ganz normaler Fließtext, aber genau an dieser Stelle hat die Designerin beschlossen, das Aussehen des Textes zu ändern. <span class="change">Sie benutzt dazu das <code>span</code>-Element und eine Stilregel, die diesen Satz hervorhebt.</span></p>
</body>
</html>
Abbildung: Hervorhebung eines Satzes im Fließtext mit span.
Wir werden dem <span>-Tag noch einige Male in diesem Kapitel begegnen. Es eignet sich hervorragend dafür, ausgewählte Stellen im Fließtext auszuzeichnen und mit CSS-Eigenschaften zu formatieren. Wenn Ihr HTML-Code jedoch bereits ein anderes Tag enthält, dem Sie eine Stilregel zuweisen könnten, um den gewünschten Effekt zu erzielen, dann sollten Sie das vorhandene Tag nutzen und nicht noch extra ein span-Element hinzufügen.
Im Beispiel oben haben wir das Tag <code> eingesetzt, um deutlich zu machen, dass das Wort span ein Codefragment ist. Normalerweise stellt der Browser Text zwischen diesen Tags in einer Monospace-Schrift dar. Mit CSS können wir diese Standardeinstellung beliebig ändern. Wenn wir Textteile fett oder kursiv darstellen wollten, hätten wir ein strong- oder em-Element benutzen können und diesem eine CSS-Regel zugewiesen.
| << zurück | vor >> |
| Tipp der data2type-Redaktion: Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an: |
Copyright © 2006 der deutschen Übersetzung dpunkt.verlag GmbH
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS − Anspruchsvolle Websites mit Cascading Stylesheets" 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.
dpunkt.verlag GmbH, Ringstraße 19, 69115 Heidelberg