Stil mit {stil}

Aug 2007

Raffinierte CSS-Selektoren: Stile für die Schriftgestaltung

Das CSS-Layout ist pures Schubladendenken: ein Kasten für die Navigation, einer für die Inhalte, einer für die Fussleiste, einer für die obere Leiste. Das Schöne an diesen Schubladen ist die Beschriftung, mit der Stile für Links, Überschriften, Bilder und Texte aufgebaut werden, die vollautomatisch für ein konsistentes Bild der Seite sorgen.

Ein komfortables Design sorgt dafür, dass eine unterschiedliche Gestaltung der Elemente in den einzelnen Boxen die Inhalte visuell unterscheidet: Überschriften und Links im Inhalt sollen sich von Überschriften und Links in der Navigationsleiste abheben – und zwar vollautomatisch.

CSS-Selektoren stellen raffinierte Techniken zur Verfügung, die den Formatierungsaufwand beim Anlegen und Pflegen von Seiten reduzieren. Sie fischen HTML-Elemente wie Textabsätze, Links und Überschriften aus der Seite und verleihen ihnen einen Stil, der von der Umgebung des jeweiligen HTML-Elements abhängt.

Stile für die Navigationsleiste

Eine Navigationsleiste findet der Surfer auch ohne die typische Unterstreichung. Stattdessen bieten wir ihm Pseudolinks:

#navigation a { font: bold 0.9em/120% Arial, Helvetica, sans-serif; 
	display: block; margin: 0.2em 0em; padding-left: 9px; 
	text-decoration: none;  }
#navigation a:link { color: darkslategray;
	border-bottom: 1px solid wheat;}
#navigation a:visited { color: lightslategray;
	border-bottom: 1px solid linen; }
#navigation a:hover { background: wheat; color: indianred; 
	border-bottom: 1px solid khaki; }

#navigation a ist der Grundstil, damit eine Reihe von Eigenschaften nicht mehr für jeden Zustand von a angegeben werden muss. display: block; erspart den Zeilenumbruch <br> oder die Notwendigkeit, jeden Link in <p>-Tags zu packen. Die Eigenschaft macht aus dem Inlineelement a ein Blockelement mit Zeilenumbruch. In Netscape 4 und anderen älteren Browsern sorgt die Eigenschaft dafür, dass die Links der Navigationsleiste kompakter dargestellt werden.

#navigation h2 { font: bold 1.1em/120% Arial, Verdana, sans-serif; 
  background: #A6535C; padding: 3px 4px 1px 4px; color: #FFFFFF; }

#navigation h2 bringt Struktur in die Links der Navigationsleiste.

Stile für die Inhalte

In der Navigationsleiste spart die schmallaufende Arial Platz, die Box für die Inhalte nutzt Verdana als Standardschrift.

#inhalt p { font: 0.9em/136% Verdana, Helvetica, Arial, sans-serif; }
#inhalt h1 { font: 1.2em/136% Verdana, Helvetica, Arial, sans-serif; color: #A6535C; }
#inhalt h2 { font: 1.1em/136% Verdana, Helvetica, Arial, sans-serif; color: #A6535C; }

Die Überschrift h2 wird jetzt in der Box für den Inhalt anders aussehen als in der Navigationsleiste – und zwar ohne jede weitere Maßnahme. Die Deklaration der beiden Stile #navigation h2 und #inhalt h2 sorgt dafür, dass die Formatierung automatisch funktioniert, je nachdem, in welcher Box oder Ebene die <h2>-Tags auftreten.

Tabellen für tabellarische Inhalte erhalten eine Rahmen

table { border: 1px solid #CCCCCC; }

Wer sich die Mühe sparen möchte, die Zellen der ersten Zeile einer Tabelle mit <th> statt <td> zu setzen, hebt die erste Zeile durch das Stylesheet hervor:

tr:first-child { background: #A68589; font-weight: bold }
td:first-child { background: #A68589; font-weight: bold }

Die Inhalte von Tabellenzellen werden an der oberen Kante der Zelle ausgerichtet. padding hält die Inhalte der Tabellenzelle auf Abstand und border-bottom trennt die Zellen visuell:

td { font: 0.9em Arial, Helvetica, sans-serif;
	color: #333333;	vertical-align: top;
	margin: auto; padding: 3px;
	border-bottom: 1px solid #999999;}

CSS-Layout • Stylesheet