Webkrauts

Wir haben noch nicht alle älteren Artikel nachbearbeitet. Das bezieht sich in der Regel nur auf die Codebeispiele, die noch nicht optimal dargestellt werden.

Klassen & IDs

Um HTML-Elemente nicht auf der gesamten Seite einheitlich optisch zu verändern, sondern auch Unterschiede zwischen gleichen Elementen machen zu können, wurden in HTML die Attribute “class” und “id” festgelegt. Beide Attribute dienen außerdem dazu, die allgemeine Struktur eines Dokumentes zu verfeinern, indem die Seite z.B. in einzelne Bereiche wie Header, Navigation und Footer eingeteilt wird.

IDs

Für die Einteilung des Dokuments in verschiedene Bereiche verwendet man das Attribut “id”. Der vergebene Name darf jeweils nur einmal im gesamten Dokument vorkommen, sich also auf keinen Fall wiederholen. Folgendes wäre z.B. eine typische Verwendungsart für IDs:

<div id="header">Seitenkopf</div>
<div id="navigation">Navigationsmenü</div>
<div id="content">Seiteninhalt</div> 

Nun kann man anhand der IDs jedem Teil der Seite Position, Farbe, Ränder usw. zuweisen. In der CSS-Datei werden IDs mit einer Raute vor dem Namen angesprochen:

#header { ... }
#navigation { ... }
#content { ... }

Klassen

Für sich wiederholende Elemente innerhalb der IDs verwendet man nun das Attribut “class”. Möchte man z.B. in einer Tabelle den einzelnen Zeilen zur besseren Lesbarkeit abwechselnd eine andere Hintergrundfarbe geben, so könnte man ihnen folgende Klassen zuweisen:

<table>
 <tr class="ungerade"><td></td></tr>
 <tr class="gerade"><td></td></tr>
 <tr class="ungerade"><td></td></tr>
 ...
</table>

…und selbige im CSS dann mit einem Punkt vor dem Namen anscodechen…

td.ungerade { background: #FFF }
td.gerade { background: #EEE }

Die Tabellenzeilen erscheinen nun abwechselnd mit weißem und grauem Hintergrund.

Semantik

Gerade bei der Einteilung der Klassen sollte man unbedingt auch auf die Semantik achten, damit die Dokumentstruktur so weit es geht vom Layout getrennt ist. Auf keinen Fall sollte man z.B. für obiges Beispiel die Klassennamen “weiss” und “grau” verwenden, da diese bei einer Änderung des Layouts nicht mehr gültig wären. Aussagekräftige und v.a. funktionsbeschreibende Bezeichner sind das A und O gut strukturierter Dokumente und CSS-Dateien. Ein einfacher Merksatz könnte lauten: “Immer so wenig IDs und Klassen wie möglich einsetzen!” Hält man sich an diese Vorgabe, so ist der Lohn ein sauberer, logischer und für alle lesbarer Code.

Verschachtelung

Grundsätzlich geht man in CSS einfach mit Leerzeichen getrennt linear von den übergeordneten zu den untergeordneten Elementen vor. Für viele Situationen braucht man dabei weniger Klassen und IDs als häufig angenommen, wie das folgende Beispiel einer verschachtelten Liste zeigt, welche oft für vertikale Navigationsmenüs gebraucht wird:

<ul id="navigation">
  <li>Punkt 1</li>
  <li>Punkt 2
    <ul>
      <li>Punkt 2.1</li>
      <li>Punkt 2.2</li>
    </ul>
  </li>
  <li>Punkt 3</li>
</ul>

Wenn wir nun die Listenpunkte der untergeordneten Liste formatieren wollen, so können wir diese so anscodechen:

#navigation ul ul li { margin-left: 30px; }

Auf diese Weise würden wir den Listenpunkten einen linken Abstand von 30 Pixeln geben, damit diese etwas eingerückt werden. Um dem gerade ausgewählten Punkt ein anderes Aussehen zu verpassen, setzt man nun eine Klasse ein:

<ul id="navigation">
  <li>Punkt 1</li>
  <li>Punkt 2
    <ul>
      <li class="current">Punkt 2.1</li>
      <li>Punkt 2.2</li>
    </ul>
  </li>
  <li>Punkt 3</li>
</ul>

Nun kann man dem Punkt mit der Klasse "current" z.B. eine andere Hintergrundfarbe geben:

#navigation ul ul li.current { background: #EEE; }

Verwendet man in seinem Dokument, z.B. im Inhalt, nun weitere Listen, so bleiben selbige von diesen Anweisungen unberührt, da diese nur für die Liste mit der ID "navigation" gelten.

Weitere Informationen, Workshops und Artikel zum Thema finden Sie bei den weiterführenden Links.

Weiterführende Links

• CSS4YOU – Workshop CSS: Teil 3 – Selektoren
• <dciwam/> – Klassennamen und id-Bezeichner
• zdnet.de – Standardisierung von Klassen- und ID-Namen unter CSS