Schriften und CSS

(Auszug aus "CSS − Anspruchsvolle Websites mit Cascading Stylesheets" von Rachel Andrew & Dan Shafer)

Unter Teile einer CSS-Regel haben wir uns einige Beispiele von Stilregeln für Schriften angesehen. Sie sind also bereits damit vertraut, wie Schriften in ganzen Textabsätzen und Überschriften verschiedener Ordnung definiert werden.

Sie können die Darstellung von Schriften auch für kleinere Textmengen festlegen. Zeichnen Sie dafür eine ausgewählte Textpassage in <span>-Tags aus (Näheres dazu unter Das span-Element), und definieren Sie dann die Eigenschaften in dem <span>-Tag. Mit dieser Methode können Sie zum Beispiel einen Satz in einem Textabschnitt hervorheben (siehe folgende Abbildung).

Wichtige Texte hervorheben

Abbildung: Wichtige Texte hervorheben.

Um diesen Satz farbig hervorzuheben, schließen wir ihn in <span>-Tags ein und definieren eine Stilregel für dieses neue span-Element. Beachten Sie bitte, dass span-Elemente sparsam verwendet werden sollten und dass Sie eine ganze Reihe von Punkten beachten müssen, bevor Sie solche Techniken anwenden. Die Einzelheiten dazu lesen Sie unter Schriften einsetzen mit CSS und Texteffekte und Kaskadierung. Hier folgt der HTML-Code, der den obigen Effekt erzeugt.

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua <span class="important">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

Sie können auch ein ganz bestimmtes span-Element auswählen, indem Sie ein id- oder class-Attribut benutzen (dies werden wir uns unter Blick hinter die Kulissen in allen Einzelheiten anschauen) und dann dem Selektor diesen Identifikator oder diese Klasse zuweisen, wie hier:

.important {
font-weight: bold;
background-color: yellow;
color: red;
}

Auch Listen sind HTML-Elemente, bei denen sich der Einsatz von Schriftregeln oftmals lohnt. Normalerweise verwendet man Listen, um auf bestimmte in einer Verbindung stehende Inhalte besonders hinzuweisen. Die folgende Abbildung zeigt ein Beispiel, in dem die HTML-Liste mit einem auffälligen Schriftstil zusätzlich hervorgehoben wird. Sie setzt sich durch ihre Darstellung in einer anderen Farbe, alternativem Schrifttyp und breiterem Schriftschnitt vom restlichen Text der Seite ab. Sie tritt deutlich hervor und sorgt für Aufmerksamkeit.

Eine Liste wird besonders hervorgehoben

Abbildung: Eine Liste wird besonders hervorgehoben.

Nachdem wir die Liste im HTML-Code mit einem id-Attribut benannt haben, können wir sie gestalten, indem wir eine Stilregel in unsere CSS-Datei einfügen.

<ul id="liste">
  <li>Mehrspaltige Seiten-Layouts</li>
  <li>Interaktive Navigationsmen&uuml;s</li>
  <li>Fest fixierte Hintergrundbilder</li>
</ul>

Die Stilregel dafür sieht so aus:

#liste {
font-family: 'Comic Sans MS', Arial, Helvetica, sans-serif;
font-weight: bold;
color: yellow;
background-color: black;
}

  

<< 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