Stylesheets

Inhaltsverzeichnis

CSS Grundlagen

HTML ist die Basis für Webseiten; allerdings war das ursprünglich schon Anfang der 90er Jahre entstandene HTML nicht mehr allen Anforderungen gewachsen. HTML bietet zwar Formatierungsmöglichkeiten für Text und Ähnliches, allerdings lassen sich diese nur spezifisch für jedes Element vornehmen. Es gab kaum Möglichkeiten, den Inhalt vom Layout zu trennen und Formatierungen zentral vorzunehmen. Der zweite Nachteil von HTML wirkt genauso schwer: Die Formatierungsmöglichkeiten sind ausgesprochen begrenzt. Beispielsweise gibt es in HTML Schriftgrößen nur in sieben festgelegten Schritten. Einem Designer, der im Printbereich punktgenaue Angaben macht, ist das zu wenig.

Die Lösung für diese Probleme heißt Cascading Style Sheets oder kurz CSS. Diese Technologie ist wie HTML vom W3C standardisiert und besteht aus vielen Befehlen. Die Syntax ist immer gleich: Sie schreiben zuerst den Befehl und dann nach einem Doppelpunkt den Wert. Das Ganze schließen Sie mit einem Strichpunkt ab:

Befehl: Wert;  

Info

Bei nur einem Befehl oder beim letzten Befehl ist der Strichpunkt nicht erforderlich, kann aber gesetzt werden.

Ein Beispiel für einen CSS-Befehl ist z.B. font-size für die Schriftgröße. Dort können Sie nicht nur relative Angaben vergeben, sondern auch absolute Schriftgrößen mit verschiedenen Maßeinheiten wie Punkt (pt) oder Zentimeter (cm).

font-size: 12pt;  

Info

Bei der Schriftgröße ist sich die Webdesigner-Riege uneins, welche Maßeinheit zu bevorzugen wäre. Pixel und Punkt haben Nachteile, da der Internet Explorer dann nicht mehr auf Nutzereingabe die Schriftgröße verändert, Punkt ist bildschirmrespektive auflösungsabhängig. Und relative Schriftgrößen wie em sind aus Designersicht wenig genau. In diesem Artikel verwenden wir pt.

Nun ist nur noch die Frage, wie CSS in HTML eingebunden wird? Dafür gibt es drei Möglichkeiten:

  • Als Inline-Stil in einem HTML-Tag.
  • Im Kopf der HTML-Seite. Die CSS-Befehle gelten dann für ein oder mehrere Tags.
  • In einer externen Datei. So ist zentrales Layout für mehrere HTML-Seiten möglich.

Alle drei Optionen finden Sie in den nächsten Abschnitten erläutert. Wenn Sie ein CSS im Kopf der HTML-Seite oder in einer externen Datei platzieren, müssen Sie außerdem noch die Befehle bestimmten Tags zuweisen. Dafür sind die so genannten Selektoren verantwortlich, denen wir ebenfalls einen eigenen Abschnitt widmen.

Inline-Stile

Ein Inline-Stil ist die einfachste Form, einen oder mehrere CSS-Befehle zuzuweisen. Sie fügen diese einfach im style-Attribut für das Tag ein, das Sie formatieren möchten. Hier ein Beispiel – Ausgangspunkt ist ein HTML-Grundgerüst:

  • 1. Erstellen Sie einen Absatz in Ihrer Seite.
<p>Absatz mit Formatierung</p>  
  • 2. Fügen Sie dann im öffnenden <p>-Tag das Attribut style hinzu.
  • 3. Vergeben Sie als Wert für das Attribut die gewünschten CSS-Befehle durch Strichpunkte getrennt:
<p style="font-size: 10pt; font-weight: bold;">Absatz mit Formatierung</p>  

Den Befehl font-weight kennen Sie noch nicht. Er bestimmt die Dicke der Schrift. Der Wert bold besagt, dass die Schrift im Fettdruck dargestellt wird.

css_einführung_01

Info

Inline-Stile kommen immer dann zum Einsatz, wenn Sie die Formatierung wirklich nur lokal auf das eine HTML-Element begrenzen möchten. Soll eine Formatierung für mehrere Elemente gelten, sind CSS-Befehle im Kopf der HTML-Seite oder in einer externen Datei vorzuziehen.

Im Kopf der Seite

CSS-Befehle im Kopf der Seite sind sehr praktisch: Sie legen die Befehle einmal im <head>-Abschnitt der Seite an und weisen sie dann mit Selektoren den Tags zu.

Auch hier ein Beispiel – Ausgangspunkt ist wieder ein HTML-Grundgerüst.

  • 1. Fügen Sie zuerst einen Block mit <style>– und </style>-Tags innerhalb der <head>-Tags ein. Also so:
<head>  <title>CSS im Kopf der Seite</title>  <style></style>  
  • 2. Schreiben Sie in das öffnende <style>-Tag, dass es sich um CSS handelt:
<style type="text/css">  
  • 3. Fügen Sie HTML-Kommentare innerhalb des <style>-Blocks ein.
<style type="text/css"><!--  --></style>  

Diese Maßnahme verhindert bei Browsern, die mit CSS nicht klarkommen, dass die CSS-Befehle einfach ausgegeben oder interpretiert werden.

  • 4. Schreiben Sie anschließend den Namen des Tags, für das Sie einen Stil anlegen möchten, z.B.:
<style type="text/css"><!--  p {  }  --></style>  

Dies ist bereits ein Selektor, und zwar ein Selektor für alle <p>-Tags, d.h. alle Absätze.

  • 5. Danach fügen Sie in geschweiften Klammern alle CSS-Befehle für diesen Selektor ein.
<style type="text/css"><!--  p {  font-size: 16pt;  font-weight: bold;  }  --></style>  
  • 6. Zum Schluss fügen Sie im Körper der HTML-Seite noch einen oder mehrere Absätze ohne eigene Formatierungen ein.

Hier der komplette Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <!-- css_kopf.html -->  <html>  <head>  <title>CSS im Kopf der Seite</title>  <style type="text/css"><!--  p {  font-size: 16pt;  font-weight: bold;  }  --></style>  </head>  <body>  <p>Absatz mit Formatierung</p>  <p>Noch ein Absatz</p>  </body>  </html>  
css_einführung_02

Externe Datei

CSS-Befehle in einer externen Datei bedeuten das Maximum an Zentralisierung. Die externe CSS-Datei kann von beliebig vielen HTML-Dateien verwendet werden. Es steht Ihnen außerdem völlig frei, die CSS-Datei in ein eigenes Verzeichnis zu packen oder sie im gleichen Verzeichnis wie Ihre HTML-Dateien zu belassen. Für die vorliegenden Beispiele legen Sie die CSS-Datei in den gleichen Ordner wie die HTML-Datei.

Eine CSS-Datei hat im Allgemeinen die Dateiendung .css. Absolut notwendig ist das zwar nicht, empfehlenswert aber auf jeden Fall. Eine .css-Datei ist per se eine einfache Textdatei. Sie enthält ausschließlich die CSS-Selektoren mit den zugehörigen Befehlen, sonst nichts, also keine <style>-Tags oder Ähnliches.

Und so erstellen Sie eine externe CSS-Datei:

  • 1. Erstellen Sie in Ihrem Editor eine neue Datei und speichern Sie diese mit der Dateiendung .css.

Als Name kommt hier style.css zum Einsatz – nicht sehr einfallsreich, aber häufig gebraucht. Sie sollten hier nur dieselben Regeln beachten wie bei HTML-Dateinamen, also idealerweise acht Zeichen und Unterscheidung zwischen Groß- und Kleinschreibung.

  • 2. Schreiben Sie nun einen Selektor in die externe Datei:
p {  }  

p enthält, wie oben schon gesehen, CSS-Befehle für alle <p>-Tags.

  • 3. Fügen Sie dann noch CSS-Befehle in den geschweiften Klammern hinzu.
p {  font-size: 16pt;  font-weight: bold;  }  

Nun müssen Sie die externe CSS-Datei in jeder HTML-Seite einbinden, in der Sie sie verwenden möchten.

  • 1. Fügen Sie dazu das <link>-Tag in den <head>-Bereich der Seite ein:
<head>  <title>Externes CSS</title>  <link />  </head>  

Dieses Tag gehört zu den Tags ohne Inhalt und wird deswegen mit einem Schrägstrich am Ende XHTML-konform geschlossen.

  • 2. Ergänzen Sie im <link>-Tag das rel-Attribut mit der Angabe stylesheet:
<link rel="stylesheet" />  
  • 3. Anschließend geben Sie das href-Attribut mit dem Link auf die externe CSS-Datei an:
<link rel="stylesheet" href="style.css" />  

Der oben gezeigte Link verweist auf die Datei style.css im gleichen Ordner. Wollten Sie z.B. auf eine CSS-Datei im Unterordner css verweisen, ginge das mit css/style.css. Die Verlinkung folgt hier den Regeln für Links.

  • 4. Zum Schluss geben Sie noch den Typ des verlinkten CSS an. Dieser ist immer text/css.
<link rel="stylesheet" href="style.css" type="text/css" />  

Info

Die Reihenfolge der hier erwähnten Parameter ist nicht von Bedeutung. HTML erlaubt alle Attribute eines Tags in beliebiger Reihenfolge. Der Entwickler versucht natürlich wie auch wir hier eine logische Reihenfolge einzuhalten.

Es gibt noch eine zweite Möglichkeit, externe CSS-Dateien einzubinden, nämlich den Befehl @import. Er hat den Nachteil, dass er nicht im Netscape Navigator 4.x und älteren Browsern funktioniert. Wenn Sie diesen allerdings ausschließen möchten, ist auch dieser Befehl einsetzbar. Hier ein Beispiel:

<style type="text/css">  <!--  @import url("style.css")  --></style>  

info_button 128

Selektoren

Wenn Sie CSS-Befehle nicht direkt als Inline-Stil in das style-Attribut für ein Tag schreiben, müssen Sie deutlich machen, für welche Tags die Befehle gelten sollen. Genau diese Aufgabe übernehmen die Selektoren. CSS kennt eine Menge an Selektoren, wobei wir uns hier auf die wichtigsten beschränken, die auch in allen relevanten Browsern funktionieren.

Die erste Gruppe, die Tag-Selektoren, haben Sie bereits kennen gelernt. Sie schreiben den Namen des Tags als Selektor. Dann werden alle Tags dieser Art formatiert:

p {  font-size: 16pt;  font-weight: bold;  }  

Mehrere Tags lassen sich mit einer Komma-separierten Liste von Tag-Selektoren gemeinsam formatieren. Das heißt, die CSS-Befehle gelten für alle Tags in der Liste. Im folgenden Beispiel gelten die Befehle für Absätze (<p>-Tags) und Elemente von Listen (<li>).

p, li {  font-size: 16pt;  font-weight: bold;  }  

Selektoren für verschachtelte Tags erlauben Ihnen, ineinander verschachtelte Tags zielgenau zu formatieren. Die verschachtelten Tags werden dabei einfach durch Leerzeichen getrennt eingegeben. Der folgende Selektor formatiert alle Listenelemente, die in einer nummerierten Liste (<ol>-Tag) liegen, die wiederum innerhalb einer zweiten nummerierten Liste liegt:

ol ol li {  font-size: 12pt;  font-style: italic  }  

Info

Wir haben es hier allerdings dennoch gewählt, da es in der Praxis bei weitem das häufigste ist. Hier ein vollständiges Beispiel, bei dem zuerst die erste nummerierte Liste formatiert wird, dann die darunter verschachtelte:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <!-- css_verschachtelt.html -->  <html>  <head>  <title>Verschachtelte Selektoren</title>  <style type="text/css"><!--  ol li {  font-size: 16pt;  font-weight: bold;  }  ol ol li {  font-size: 12pt;  font-weight: normal;  font-style: italic;  }  --></style>  </head>  <body>  <ol>  <li>Element 1</li>  <li>Element 2</li>  <li>  <ol>  <li>Element 2.1</li>  <li>Element 2.2</li>  </ol>  </li>  <li>Element 3</li>  </ol>  </body>  </html>  
css_einführung_03

Info

Wichtig ist in diesem Beispiel, dass in der verschachtelten Liste die Schriftstärke mit font-weight wieder auf normal gesetzt wird. Ansonsten würden die Listenelemente der verschachtelten Liste die Eigenschaft bold der übergeordneten Liste erben. Siehe hierzu auch den Abschnitt „Präferenzreihenfolge“.

Die Selektoren, die Sie bisher kennen gelernt haben, sind speziell auf ein oder mehrere Tags beschränkt. Wenn Sie aber ganz bestimmte Elemente Ihrer HTML-Seite mit CSS-Befehlen versehen wollen, sollten Sie zu Klassen greifen. Eine Klasse definieren Sie einmal und können Sie dann beliebig vielen Elementen zuweisen.

Und so geht es:

  • 1. Zuerst definieren Sie die Klasse mit einem beliebig von Ihnen wählbaren Namen ohne Sonderzeichen.
.hervorgehoben {  }  

Eine Klasse erkennen Sie immer am vorangestellten Punkt vor dem Namen.

  • 2. Anschließend legen Sie die CSS-Befehle fest.
.hervorgehoben {  font-size: 16pt;  font-weight: bold;  color: red;  }  

color färbt den entsprechenden Text. Die anderen Befehle kennen Sie schon.

  • 3. Nun fügen Sie jedem Tag, das die Klasse verwenden soll, das Attribut class hinzu.
  • 4. Als Wert des Attributs geben Sie den Klassennamen ohne vorangehenden Punkt an:
<p class="hervorgehoben">Absatz</p>  

Hier ein vollständiges Beispiel, bei dem zwei HTML-Elemente mit der Klasse formatiert werden und zwei nicht. Zu den formatierten Elementen gehören auch Überschriften (<h1> und <h2>).

css_einführung_04

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html>  <head>  <title>Klassen</title>  <style type="text/css"><!--  .hervorgehoben {  font-size: 16pt;  font-weight: bold;  color: red;  }  --></style>  </head>  <body>  <h1>Überschrift</h1>  <p class="hervorgehoben">Absatz mit Inhalt</p>  <h2 class="hervorgehoben">Überschrift</h2>  <p>Zweiter Absatz mit Inhalt</p>  </body>  </html>  

Klassen können Sie auch mit Tag-Selektoren kombinieren. Dazu schreiben Sie einfach vor den Punkt das entsprechende Tag, für das die Klasse gelten soll. Wird die Klasse für ein anderes Tag verwendet, ist sie unwirksam. Im folgenden Beispiel ließen sich mit der Klasse hervorgehoben also nur Absätze, nicht aber z.B. Überschriften formatieren:

p.hervorgehoben {  font-size: 16pt;  font-weight: bold;  color: red;  }  

Info

Es gibt neben den normalen Klassen noch so genannte Pseudoklassen. Sie stehen z.B. bei Links für einen bestimmten Zustand.

Die letzte Selektorenart, die hier zur Sprache kommen soll, sind IDs. ID steht dabei für Identifier. IDs funktionieren im Prinzip wie Klassen. Man definiert im Kopf der Seite oder in einem externen CSS eine ID. Statt bei Klassen der Punkt kommt hier das Doppelkreuz (#, auch Hash) zum Einsatz.

#navigation {  color: blue;  }  

Beim Tag wird statt dem class-Attribut das id-Attribut verwendet.

<p id="navigation">Navigationselemente</p>  

Info

Einen gewaltigen Unterschied gibt es zwischen Klassen und IDs. Eine ID kennzeichnet genau ein Element innerhalb eines Dokuments, ist also eindeutig. Klassen können dagegen auf beliebig viele Elemente angewendet werden. Zwar kommen Browser auch mit einer mehrfach vergebenen ID zurecht, da dies aber unter Umständen Probleme bei der JavaScript- oder serverseitigen Programmierung hervorrufen kann, sollten Sie eine ID immer pro Dokument nur einmal vergeben.

In der Praxis werden IDs hauptsächlich für eindeutig auf einer Seite nur einmal vorhandene Elemente wie Navigationsleiste, Kopfzeile, Copyright-Vermerk etc. verwendet. Wie auch Klassen, so lassen sich IDs an bestimmte Tags koppeln. Da die ID allerdings sowieso Tag-übergreifend eindeutig sein sollte, ist das eher eine Spielerei.

Präferenzreihenfolge

Sie haben mehrere Arten kennen gelernt, CSS-Befehle auf HTML-Tags anzuwenden. Diese lassen sich beliebig mischen. Daraus ergibt sich die Frage, was passiert, wenn zwei sich widersprechende CSS-Befehle einem Tag zugewiesen werden. CSS kennt hierfür eine eindeutige Reihenfolge. Diese ließe sich auch berechnen, allerdings reichen in der Praxis vier Regeln:

Einige CSS-Befehle beispielsweise zu Schriftart und Schriftfarbe werden vererbt. Ein Beispiel: Wenn Sie einem <p>-Tag eine Formatierung zuweisen, gilt die Formatierung auch für darin eingeschlossene <b>-Tags.

Vererbte CSS-Befehle werden immer von speziell dem einzelnen Tag zugewiesenen überschrieben. Bei einem Tag selbst gilt die folgende Präferenzreihenfolge:

  • Klasse vor Tag-Selektor
  • ID vor Klasse
  • Inline-Stil vor ID

Bei gleichwertigen Stilanweisungen, die z.B. im Kopf der Seite und in einer externen CSS-Datei jeweils als Klasse festgelegt werden, entscheidet die Reihenfolge des Auftauchens im Quellcode. Immer das zuunterst im <head>-Bereich eingebundene CSS – egal ob intern oder extern – setzt sich durch.

Mit dem Nachsatz !important gekennzeichnete CSS-Befehle sind allen nicht damit gekennzeichneten vorzuziehen. Untereinander gelten bei !important-Befehlen die oben genannten drei Regeln.

color: blue !important;  

barcode 128

<div> und <span>

Im CSS-Kontext gibt es zwei HTML-Tags, die auf jeden Fall noch vorgestellt werden sollten: <div> und <span>. <div> ist ein Blockelement, ähnlich wie ein Absatz (<p>). Allerdings besitzt <div> keinerlei Eigenleben, also keine eigenen Formate, wohingegen ein Absatz vor- und nachgelagert einen Abstand besitzt. <div>-Elemente kommen z.B. zum Positionieren mit CSS zum Einsatz.

<div>Text im div-Block mit <span>nicht erkennbarem span-Bereich</span>.</div>  

Das zweite besondere Tag ist <span>. Hierbei handelt es sich um ein Inline-Tag, es definiert also keinen Block, sondern nur einen Bereich. Dieser Bereich ist ebenfalls nicht vordefiniert. In der Praxis wird <span> hauptsächlich dazu verwendet, CSS-Formatierungen für einen bestimmten Textbereich vorzunehmen.

Medienspezifische CSS

Der CSS-Standard bietet einige Möglichkeiten, die mit Fug und Recht als fortschrittlich zu bezeichnen sind. Dazu gehört, Stile nur bei bestimmten Medien anzuwenden. Das heißt, Sie definieren CSS-Befehle, die dann z.B. ausschließlich zum Ausdrucken benutzt werden. Das ist z.B. praktisch, wenn Sie dem Nutzer eine Druckversion Ihrer Seite angeben möchten.

Es gibt drei Möglichkeiten, einen Medientyp für Stylesheets oder einzelne CSS-Befehle anzugeben:

  • Für externe CSS-Dateien im <link>-Tag mit dem Attribut media.
<link href="style_print.css" rel="stylesheet" type="text/css" media="print" />  
  • Für externe Stylesheets mit @import. Hier schreiben Sie die Medientypen einfach hinter dem URL des CSS. Mehrere Medientypen werden per Kommata getrennt:
@import url("style_print.css") print, braille;  
  • Mittels des @media-Befehls direkt im Stylesheet. Dies klappt allerdings erst mit Internet Explorer 5.5 und nicht mit 5.0. Mehrere Medientypen werden auch hier per Kommata aneinander gehängt.
@media print {  CSS-Befehle  }  

Tabelle zeigt einige der wichtigsten Medientypen. Heute am meisten in der Praxis im Einsatz ist print für die Druckerausgabe.

MedientypBeschreibung
allFür alle Medien. Das ist die Standardeinstellung, wenn kein Medientyp festgelegt ist.
auralStylesheet für die Sprachausgabe mit Sprachbrowsern.
brailleFür die Ausgabe mit Braille-Geräten (Blindenschrift).
handheldFür mobile Endgeräte.
printFür die Druckerausgabe.
projectionFür Präsentationen auf Beamern.
screenFür die Ausgabe auf dem Bildschirm.
speechFür die Ausgabe mit Sprachsoftware. Dieser Medientyp ist neu und ergänzt ab CSS 2.1 aural.

Für die Arbeit mit Cascading Style Sheets ist die Kenntnis einer großen Zahl von CSS-Eigenschaften notwendig, die das Aussehen von Text, Bildern, Tabellen und Formularen steuern. Um Ihnen bei Ihrer Arbeit zu helfen, finden Sie in diesem Anhang eine Zusammenfassung der Eigenschaften und ihrer Werte, mit denen Sie Ihre eigenen Stile erstellen können. Diese Liste enthält die Standardeigenschaften von CSS 2.1, die von den meisten aktuellen Browsern unterstützt werden.

Info

barcode 128

CSS-Werte

Jede CSS-Eigenschaft besitzt einen oder mehrere passende Werte. So benötigt die Eigenschaft color zur Definition der Schriftfarbe beispielsweise einen Farbwert. Die Werte können je nach Verwendungszweck der Eigenschaft natürlich unterschiedlich sein. Allgemein lassen sich diese jedoch in vier Kategorien einteilen: Farben, Längenangaben, Schlüsselwörter und URLs.

Farben

Farben können für verschiedene Eigenschaften als Wert verwendet werden, beispielsweise für Schriftfarben, Hintergründe und Begrenzungslinien (Rahmen).

Schlüsselwörter

Farbwerte

Computermonitore verwenden eine Mischung aus rotem, grünem und blauem Licht, um daraus Farben zu erzeugen. Auf diese Weise lässt sich (fast) das gesamte Farbspektrum darstellen. So gut wie jedes Design-, Illustrations- und Grafikprogramm bietet die Möglichkeit, Farben als RGB-(Rot, Grün, Blau) oder Hexadezimalwert anzugeben, den Sie direkt für die CSS-Eigenschaften übernehmen können. In CSS gibt es neben den Schlüsselwörtern verschiedene Möglichkeiten, eine Farbe zu beschreiben:

  • Hexadezimalwerte. Am häufigsten werden im Web hexadezimale (base 16) Werte wie #FF0033 verwendet, um Farben anzugeben. Diese bestehen aus drei Paaren mit jeweils zwei Zeichen, die den Anteil der Farben Rot, Grün und Blau wiedergeben. Diesen sechs Zeichen wird ein Doppelkreuz vorangestellt, damit der Webbrowser den Wert korrekt interpretieren kann.

Info

Bestehen alle drei Teilwerte aus doppelten Zeichen, können Sie den Wert auch in einer verkürzten Schreibweise angeben. #361 und #336611 sind gleichbedeutend.

  • RGB-Prozentwerte. Sie können die Farbe ebenfalls in Form von Prozentwerten angeben, z.B. rgb(100%, 0%, 33%). In den meisten Bildbearbeitungsprogrammen ist es möglich, Farben als Prozentwerte zu definieren, die Sie dann für die CSS-Eigenschaft übernehmen können.
  • Dezimalwerte. Außerdem können Sie Farben als dezimale RGB-Werte ausdrücken. Das Format ähnelt den Prozentwerten. Allerdings verwenden Sie diesmal Zahlen zwischen 0 und 255, um die Anteile von Rot, Grün und Blau anzugeben, z.B. rgb(255, 0, 33).

Info

In vielen Mac-Programmen wie TextEdit können Sie den Farbwähler mit dem Tastatulbefehl cmd-Shift-C öffnen.

font 128

Längenangaben

Pixelwerte

Ein Pixel ist ein einzelner Bildpunkt auf dem Computerbildschirm. Dadurch besitzen Sie mit Pixeln eine konsistente Methode, Längen und Schriftgrößen unabhängig vom Computer oder Browser anzugeben. 72 Pixel sind immer 72 Pixel. Das heißt allerdings nicht, dass die tatsächliche Länge auch immer gleich ist. Da die Monitore unterschiedliche Auflösungen haben (800 x 600, 1024 x 768, 1600 x 1200 usw.), können 72 Pixel manchmal 3 Zentimetern entsprechen, manchmal auch 5 Zentimetern. Trotzdem geben Ihnen Pixelwerte die konsistenteste Kontrolle über eine Präsentation.

Info

em-Einheiten

Die em-Einheit stammt ursprünglich aus der Welt der Typografie, wo sie der Höhe des großgeschriebenen Buchstabens M der verwendeten Schrift entspricht. In Webseiten entspricht eine em-Einheit der Höhe der Standardschriftgröße des Browsers, das sind normalerweise 16 Pixel. Allerdings lässt sich die Standardgröße leicht anpassen, sodass 1em für den einen Benutzer 16 Pixeln entspricht, in einem anderen Browser sind es dagegen 24 Pixel. Daher bezeichnet man em-Einheiten auch als relative Maßeinheit.

Zusätzlich zur Standardschriftgröße des Browsers können em-Einheiten Größeninformationen auch von umgebenden Tags erben. Eine Schriftgröße von 0,9 em-Einheiten (0.9em) entspricht 14 Pixeln, wenn der Browser eine Standardschriftgröße von 16 Pixeln hat. Enthält allerdings ein <p>-Tag mit 0.9em ein <strong>-Tag, für das ebenfalls eine Größe von 0.9em definiert wurde, ist die berechnete Schriftgröße für das <strong>-Tag nicht 14 Pixel, sondern nur 12 Pixel (16 x 0,9 x 0,9). Sie sollten daher bei der Verwendung von em-Einheiten die Vererbung nicht vergessen.

Prozentwerte

In CSS werden Prozentwerte zur Definition vieler Dinge eingesetzt: Textgrößen, Breite und Höhe von Elementen oder die Platzierung von Hintergrundbildern, um nur ein paar zu nennen. Auf welcher Grundlage dieser Prozentwert berechnet wird, ist abhängig von der Eigenschaft. Für Schriftgrößen wird der Prozentwert basierend auf dem vererbten Wert berechnet. Angenommen, die Standardschriftgröße beträgt 16 Pixel. Wenn Sie eine spezielle Regel erstellt haben, in der die Schrift 200 Prozent groß sein soll, wird der Text mit einer tatsächlichen Höhe von 32 Pixeln dargestellt. Prozentwerte für Breitenangaben werden dagegen basierend auf der Breite des Ansichtsbereichs oder eines anderen Vorfahren-Elements mit einer definierten Breite berechnet. Prozentwerte werden als Zahl gefolgt von einem Prozentzeichen angegeben: 100%.

catalog open green 128

Schlüsselwörter

Anstelle von Farbe oder Größe besitzen viele Eigenschaften eigene spezielle Werte, die festlegen, wie ein Element dargestellt wird. Diese Werte werden anhand von Schlüsselwörtern ausgedrückt. Mit der Eigenschaft text-align können Sie beispielsweise festlegen, wie Text ausgerichtet werden soll. Hierfür kann eines der vier Schlüsselwörter right, left, center und justify verwendet werden. Da sich die Schlüsselwörter von Eigenschaft zu Eigenschaft unterscheiden, müssen Sie in der Beschreibung der jeweiligen Eigenschaft nachsehen, welche Begriffe tatsächlich verwendet werden können.

Ein Schlüsselwort ist aber für alle Eigenschaften gültig: inherit. Hiermit können Sie festlegen, dass ein Wert auf jeden Fall vom Eltern-Element geerbt werden soll. Mit diesem Schlüsselwort können Sie selbst vererbungsresistente Eigenschaften dazu bewegen, den Wert eines Vorfahren-Elements zu übernehmen. Wurde für einen Absatz per text-decoration eine Unterstreichung definiert, wird diese standardmäßig auch unter enthaltenen Kind-Elementen angezeigt. Manche Browser haben allerdings Probleme mit der durchgehenden Darstellung. Daher kann es sinnvoll sein, enthaltene Kind-Elemente die Unterstreichung mithilfe des Schlüsselworts inherit ausdrücklich erben zu lassen, wie hier:

p em, p strong {  em, strong {  text-decoration: inherit;  }  

Auf diese Weise erhalten <em> und <strong> ausdrücklich den gleichen Wert für text-decoration wie das umgebende <p>-Tag. Dadurch kann es passieren, dass hervorgehobene Elemente nun doppelt unterstrichen werden (ein guter Grund dafür, dass der Wert dieser Eigenschaft normalerweise nicht vererbt werden sollte). Ändern Sie den text-decoration-Wert für das <p>-Tag in overline, würden die <em>– und <strong>-Tags diesen Wert automatisch übernehmen und ebenfalls durchgestrichen erscheinen.

Info

Unter- und Überstreichungen sind kein besonders nützliches Beispiel. Das liegt hauptsächlich daran, dass inherit kein besonders nützlicher Wert ist. Aber diese Webseite wäre kein HTML-Info, wenn wir Ihnen irgendwelche Tatsachen vorenthahen würden.

URLs

In CSS geben Sie eine URL so an: url(bilder/kachel.gif). Mit der folgenden Regel wird ein Bild namens title.gif für den Hintergrund einer Seite definiert:

body {  background-image: url(bilder/kachel.gif);  }  

Im Gegensatz zu HTML sind in CSS die Anführungszeichen um die URL optional. Das heißt, url("bilder/kachel.gif"), url('bilder/kachel.gif') und url(bilder/kachel.gif) funktionieren gleichermaßen.

Info

page edit 128

Texteigenschaften

Mit den folgenden Eigenschaften können Sie bestimmen, wie der Text einer Webseite formatiert wird. Die meisten Eigenschaften in dieser Kategorie werden vererbt, sodass es in der Regel ausreicht, sie einem umgebenden Tag (z.B. <body> zuzuweisen. Alle enthaltenen Elemente (z.B. <p> übernehmen den definierten Wert automatisch. Auf diese Weise lassen sich schnell die GrundeinsteIlungen für Textfarbe, Schrifttyp und ähnliche Dinge in einer Seite festlegen.

color (vererbt)

Legt die Textfarbe fest, Da der Wert vererbt wird, reicht es aus, ihn für das <body>-Tag zu definieren. Um den Text auf der gesamten Seite rot einzufärben, genügt es in der Regel, den color-Wert für das <body>-Tag entsprechend festzulegen. Der Text in den enthaltenen Elementen wird nun ebenfalls rot dargestellt.

  • Werte: Ein beliebiger Farbwert.
color: #FFFFB;  

Info

font (vererbt)

Dies ist eine Kurzschrift-Eigenschaft, mit der Sie die folgenden Einzeleigenschaften in einer gemeinsamen Deklaration mit Werten versorgen können: font-style, font-variant, font-weight, font-size, line-height und font-family. (Die einzelnen Eigenschaften werden im Folgenden beschrieben.)

Die einzelnen Werte werden durch ein Leerzeichen voneinander getrennt. Es muss mindestens ein Wert für font-size und font-family angegeben werden. Werden weitere Werte angegeben, müssen die Werte für font-size und font-family am Schluss der Deklaration stehen. Wird für eine Einzeleigenschaft kein Wert angegeben, verwendet der Browser seinen Standardwert, wodurch zuvor vorgenommene Einstellungen möglicherweise überschrieben werden.

  • Werte: Siehe die einzelnen Eigenschaften. Wenn Sie einen Wert für line-height angeben, trennen Sie diesen durch einen Schrägstrich vom Wert für die Schriftgröße, z.B. 1.25em/150%.
font: italic small-caps bold 1.25em/150% Arial, Helvetica, sans-serif;  

font-family (vererbt)

  • Werte: Eine durch Kommata getrennten Liste mit Schriftnamen. Enthält der Name einer Schrift selbst Leerzeichen, muss der Name mit Anführungszeichen umgeben werden. Meistens wird als letzte Option der Liste eine allgemeine Schrift angegeben, wodurch der Browser zumindest etwas ungefähr Passendes auswählen kann, falls keine der anderen Schriften gefunden werden konnte. Mögliche Angaben für die allgemeine Schrift sind: serif (Serifenschrift, z.B. Times), sans-serif (serifenlose Schrift, z.B. Arial), monotype (Festbreitenschrift, z.B. Courier) cursive (Schrift mit geneigten Buchstaben) und fantasy.
font-family: "Lucida Grande", Arial, sans-serif;  

font-size (vererbt)

Definiert die Schriftgröße. Diese Eigenschaft wird vererbt, was besonders bei relativen Längeneinheiten wie Prozentwerten oder em-Einheiten zu verwirrenden Ergebnissen führen kann.

  • Werte: Eine beliebige, in CSS gültige Maßeinheit sowie die folgenden Schlüsselwörter: xx-small, x-small, small, medium, large, x-large, xx-large, larger und smaller. Der Wert medium steht hierbei für die im Webbrowser definierte Standardschriftgröße. Die tatsächlichen Werte der anderen Schlüsselwörter werden anhand dieses Werts berechnet. Der genaue Faktor, um den eine Schrift vergrößert oder verkleinert wird, ist browserabhängig, beträgt aber in der Regel 1,2. So ist large 1,2-mal größer als medium. Aufgrund der Unsicherheit in der tatsächlichen Behandlung durch den Browser bevorzugen viele Designer die Verwendung von Pixeln, em-Einheiten oder Prozentwerten.
font-size: 1.25em;  

Info

Wird der Wert der Eigenschaft font-size von einem anderen Tag geerbt, beziehen sich die Schlüsselwörter auf den tatsachlich geerbten Wert und nicht etwa auf die Standardschriftgröße des Browsers. Immerhin wird für die Skalierung der gleiche Multiplikationsfaktor wie für die vererbte Größe verwendet (in den meisten Browsern 1,2).

font-style (vererbt)

Bestimmt, ob Text geneigt (schräg) dargestellt wird. Der Wert normal sorgt dafür, dass als kursiv definierter Text wieder gerade dargestellt wird. Die Optionen italic und oblique funktionieren in den meisten Fällen gleich.

  • Werte: italic, oblique, normal.
font-style: italic;  

font-variant (vererbt)

Sorgt dafür, dass Text in sogenannten Kapitälchen dargestellt wird, wie hier: SONNENSCHEIN UND BADESTRAND. Der Wert normal legt fest, dass in Kapitälchen dargestellter Text wieder in Normalschrift angezeigt werden soll.

  • Werte: small-caps, normal.
font-variant: small-caps;  

font-weight (vererbt)

Ändert das Schriftgewicht Ihres Texts. Am häufigsten wird font-weight verwendet, um Textteile fett darzustellen – oder um genau das zu verhindern.

  • Werte: Insgesamt gibt es in CSS 14 verschiedene Schlüsselwörter für font-weight. Allerdings werden nur ein paar tatsächlich von den aktuellen Browsern unterstützt. In der Regel beschränkt sich die Verwendung auf hold und normal.
font-weight: bold;  

letter-spacing (vererbt)

Vergrößert oder verringert den Buchstabenabstand durch Entfernen oder Hinzufügen von Leerraum zwischen den Buchstaben.

  • Werte: Eine beliebige CSS-Maßeinheit, wobei em-Einheiten und Pixelwerte am häufigsten verwendet werden. In den meisten Browsern funktionieren Prozentwerte nicht. Mit einem positiven Wert wird der Abstand zwischen den Buchstaben vergrößert, mit einem negativen Wert verkleinert (die Buchstaben „kuscheln“). Mit dem Wert normal können Sie die Einstellung für letter-spacing auf den Standardwert des Browsers (0) zurücksetzen.
letter-spacing: -1px; letter-spacing: 2em;  

line-height (vererbt)

  • Werte: Die meisten in CSS gültigen Maßeinheiten. Allerdings werden Pixel und em-Einheiten am häufigsten verwendet.
line-height : 200%;  

text-align (vererbt)

Steuert die Textausrichtung. Der Text wird linksbündig, rechtsbündig, zentriert oder im Blocksatz (wie dieser Absatz) am umgebenden Element ausgerichtet.

  • Werte: left (links), center (zentriert), right (rechts), justify (Blocksatz). Bei Verwendung der Option justify kann es zu Problemen mit der Leserlichkeit des Texts auf dem Monitor kommen.
text-align: center;  

text-decoration

Erzeugt Unter-, Über- oder Durchstreichungen von Texten oder Textteilen. Hyperlinks werden beispielsweise häufig unterstrichen dargestellt. Daher sollte man in der Regel vermeiden, Text, der kein Link ist, mit Unterstreichungen zu versehen. Meistens sind Sie besser bedient, wenn Sie Text auf andere Weise hervorheben, z.B. durch die Verwendung der Eigenschaft font-weight. Für Netscape-Nostalgiker gibt es außerdem den Wert blink. Allerdings wird in der Spezifikation ausdrücklich darauf hingewiesen, dass dieser von den Browsern nicht unterstützt werden muss.

  • Werte: underline, overline, line-through, blink, none. Der Wert none entfernt sämtliche eventuell vorhandenen Textausschmückungen. Hiermit können Sie beispielsweise die Unterstreichungen verschwinden lassen, mit denen Links normalerweise gekennzeichnet werden. Außerdem ist es möglich, mehrere Ausschmückungen zu definieren. Schreiben Sie hierfür die gewünschten Werte (außer none) durch Leerzeichen getrennt hintereinander.
text-decoration: underline overline line-through;  

text-indent (vererbt)

Legt fest, wie weit die erste Textzeile eines Blocks eingerückt werden soll. Wie in vielen Büchern kann mit dieser Eigenschaft die erste Zeile eines Absatzes eingerückt dargestellt werden. Möglich ist aber auch eine sogenannte hängende Einzüge, bei der die erste Zeile nach links über den folgenden Text hinausragt.

  • Werte: Eine beliebige, in CSS gültige Maßeinheit. Pixelwerte und em-Einheiten werden am häufigsten verwendet; Prozentwerte funktionieren hier anders als bei der Eigenschaft font-size. Hier basieren die Prozentwerte auf der Breite der Box, die den Text enthält. Dies kann auch die Breite des im Browserfenster sichtbaren Bereichs sein. In diesem Fall würde der Wert 50% die erste Zeile um die Hälfte des Fensters einrücken. Um eine Zeile auszurücken (für den oben genannten hängenden Einzug), verwenden Sie einen negativen Wert. Diese Technik funktioniert gut zusammen mit einem positiven Wert für die Eigenschaft margin-left, die die linke Seite der übrigen Zeilen um einen bestimmten Wert einrückt.
text-indent: 3em;  

text-transform (vererbt)

Ändert die Groß- und Kleinschreibung von Text. Auf diese Weise ist es möglich, Text oder Textteile komplett in Groß- oder Kleinbuchstaben erscheinen zu lassen oder auch den ersten Buchstaben jedes Worts großgeschrieben darzustellen.

  • Werte: uppercase, lowercase, capitalize, none. Durch die Option none wird der Text so dargestellt, wie er im HTML-Quelltext steht. Angenommen, der HTML-Code enthält die Zeichenkette aBCDefg, so kann diese durch den Wert uppercase beispielsweise als ABCDEFG dargestellt werden, ohne dass das HTML-Dokument hierfür geändert werden müsste. Mit dem Wert none können Sie einen möglicherweise geerbten Wert für text-transform wieder zurücksetzen, sodass der Text auf dem Bildschirm wieder als aBCDefg angezeigt wird.
text-transform: uppercase;  

vertical-align

  • Werte: baseline, sub, super, top, text-top, middle, bottom, text-bottom, ein Prozentwert oder ein absoluter Wert (z.B. in Pixeln oder em-Einheiten). Prozentwerte werden basierend auf der Einstellung für line-height des Elements berechnet.
vertical-align: top; vertical-align: -5px; vertical-align: 75%;  

white-space

Steuert die Darstellung von Leerzeichen (Whitespace-Zeichen) durch den Browser. Wenn zwischen zwei Wörtern mehr als ein Leerzeichen steht, z.B. „Hallo, Dave“, fasst der Webbrowser diese standardmäßig zu einem Zeichen zusammen; „Hallo, Dave“. Mit dem Wert pre können Sie allerdings festlegen, dass sämtliche Leerzeichen entsprechend dem HTML-Tag <pre> beibehalten werden. Außerdem werden Textzeilen standardmäßig umbrochen, wenn das Fenster nicht breit genug ist. Um das Umbrechen zu verhindern, können Sie den Wert nowrap verwenden. Dadurch wird sämtlicher Text eines Absatzes auf einer einzigen Zeile dargestellt. Sie sollten also nur sehr kurze Absätze verwenden (es sei denn, Sie möchten, dass Ihre Besucher endlos nach rechts scrollen müssen, um den gesamten Text zu sehen).

  • Werte: nowrap, pre, normal. Daneben gibt es noch die Werte pre-line und pre-wrap, die allerdings nur von wenigen Browsern unterstützt werden.
white-space: pre;  

word-spacing (vererbt)

Funktioniert wie die Eigenschaft letter-spacing. Anstelle des Buchstabenabstands wird hiermit allerdings der Abstand zwischen den Wörtern gesteuert.

  • Werte: Eine beliebige in CSS gültige Längeneinheit, wobei em-Einheiten und Pixel am häufigsten verwendet werden. Prozentwerte werden nur von wenigen Browsern unterstützt. Mit einem positiven Wert wird der Wortabstand vergrößert, mit einem negativen Wert wird der Abstand kleiner. Der Wert normal setzt frühere Einstellungen wieder auf den Standardwert des Webbrowsers zurück (0).
word-spacing: -1px; word-spacing: 2em;  

gears 128

Listen-Eigenschaften

Die folgenden Eigenschaften steuern die Darstellung von ungeordneten (<ul>) und nummerierten Listen (<ol>).

list-style (vererbt)

Mit dieser Kurzschrift-Eigenschaft können Sie die Werte der drei im Folgenden beschriebenen Eigenschaften in einer gemeinsamen Deklaration festlegen. Die einzelnen Werte werden durch ein Leerzeichen voneinander getrennt. Sie können list-style auch als Abkürzung für einzelne Eigenschaften verwenden, z.B. list-style: outside anstelle von list-style-position: outside. Allerdings sollten Sie bedenken, dass nicht angegebene Werte automatisch durch die Standardwerte ersetzt werden. Möglicherweise an anderer Stelle definierte Werte werden unter Umständen überschrieben. Wenn Sie sowohl einen Wert für list-style-type als auch einen für list-style-image angeben, stellt der Browser das Standard-Aufzählungszeichen nur dar, wenn das Bild nicht geladen werden konnte. Auf diese Weise können Sie sicherstellen, dass auch dann Aufzählungszeichen angezeigt werden, wenn das Bild nicht gefunden werden konnte.

  • Werte: Sämtliche für list-style-type, list-style-image und/oder list-style-position gültigen Werte.
list-style: disc url(bilder/bullet.gif) inside;  

list-style-image (vererbt)

Definiert ein Bild, das als Aufzählungszeichen einer ungeordneten Liste (<ul>) verwendet werden soll.

  • Werte: Eine URL oder none.
list-style-image: url(bilder/bullet.gif);  

Info

list-style-position (vererbt)

Legt fest, wo die Aufzählungszeichen der Listenelemente angezeigt werden. Diese Markierungen erscheinen standardmäßig links außerhalb (outside) des Texts oder innerhalb (inside) des Texts selbst (direkt vor dem ersten Buchstaben des Texts).

  • Werte: inside, outside.
list-style: inside;  

list-style-type (vererbt)

Legt fest, welche Art von Aufzählungszeichen für eine Liste verwendet werden soll (Kreis, Quadrat, Zahlen usw.). Theoretisch können Sie mit dieser Eigenschaft also eine ungeordnete Liste (<ul>, Aufzählungszeichen) in eine Aufzählungsliste (<ol>, Zahlen, Buchstaben) verwandeln. Allerdings funktioniert diese Methode nicht in allen Browsern (z.B. nicht im Internet Explorer fur Windows). Mithilfe des Werts none können Sie festlegen, dass überhaupt kein Aufzählungszeichen angezeigt werden sollen.

  • Werte: disc, circle, square, decimal, decimal-leading-zero, upper-alpha, lower-alpha, upper-roman, lower-roman, lower-greek, none.
list-style-type: square;  

binoculars 128

Rahmen, Begrenzungslinien, Innen- und Außenabstände

Mit den folgenden Eigenschaften werden der Leerraum um ein Element herum sowie die Begrenzungslinien (Rahmen) definiert.

border

Mit dieser Kurzschrift-Eigenschaft können Sie um ein Element herum einen Rahmen erzeugen.

  • Werte: Die Breite (border-width) der Begrenzungslinie kann in einer beliebigen in CSS gültigen Längeneinheit (außer Prozentwerten) angegeben werden.

Zudem können Sie eine Farbe für den Rahmen angeben. Hierfür wird ein beliebiger in CSS gültiger Farbwert verwendet (z.B. ein Schlüsselwort wie green oder ein Hexadezimalwert wie #33fc44).

border: 2px solid #f33;  

border-top, border-right, border-bottom, border-left

Stellt an einer bestimmten Seite eines Elements eine Begrenzungslinie dar. Die Eigenschaft border-top ist beispielsweise für die Oberkante des Elements zuständig.

  • Werte: Die gleichen wie für border.
border-left: 1em dashed red;  

border-color

Definiert die Farbe für alle vier Begrenzungslinien.

  • Werte: Ein beliebiger in CSS gültiger Farbwert (z.B. ein Schlüsselwort wie green oder ein Hexadezimalwert wie #33fc44).
border-color: rgb(255,34,100);  

border-top-color, border-right-color, border-bottom-color, border-left-color

Funktioniert wie die Eigenschaft border-color. Allerdings wird die Farbe nur für jeweils eine Seite des Elements festgelegt. Mit diesen Eigenschaften können Sie beispielsweise die mit der Eigenschaft border festgelegten Werte überschreiben und so die Darstellung einer bestimmten Begrenzungslinie speziell anpassen, während für die übrigen Seiten die allgemeinen Einstellungen von border gelten.

  • Werte: Siehe border-color.
border-left-color: #333;  

border-style

Legt den Rahmenstil für alle vier Begrenzungslinien auf einmal fest.

  • Werte: Eines der Schlüsselwörter solid, dotted, dashed, double, groove, ridge, inset, outset, none und hidden. Die Werte none und hidden sorgen dafür, dass ein bereits definierter Rahmen nicht dargestellt wird.
border-style: inset;  

border-top-style, border-right-style, border-bottom-style, border-left-style

Diese Eigenschaften funktionieren wie border-style. Allerdings wird der Rahmenstil nur für jeweils eine Seite des Elements festgelegt.

  • Werte: Siehe border-style.
border-top-style: none;  

border-width

Definiert die Dicke der Begrenzungslinie für alle vier Seiten auf einmal.

  • Werte: Eine beliebige in CSS gültige Maßeinheit mit Ausnahme von Prozentwerten. Am häufigsten verwendet man em-Einheiten oder Pixel.
border-width: 1px;  

border-top-width, border-right-width, border-bottom-width, border-left-width

Funktionieren wie border-width, werden aber nur auf jeweils eine Seite des Elements angewandt.

  • Werte: Siehe border-width.
border-bottom-width: 3em;  

outline

Mit dieser Kurzschrift-Eigenschaft können Sie die Werte von outline-color, outline-style und outline-width (im Folgenden behandelt) in einer Deklaration zusammenfassen. Im Gegensatz zur Eigenschaft border beanspruchen mit outline definierte Umrisse keinen eigenen Platz (das Element wird also nicht höher oder breiter). Der Umriss wird prinzipiell an allen vier Seiten eines Elements dargestellt. Die Eigenschaft wird nicht so sehr als Designdetail benutzt, sondern vielmehr, um Dinge hervorzuheben. Die Eigenschaft outline funktioniert in Firefox, Safari und Opera, im Internet Explorer allerdings erst ab der Version 8.

  • Werte: Die gleichen Werte wie für border mit einer Ausnahme – siehe die Beschreibung von outline-color unten.
outline: 3px solid #F33;  

outline-color

Definiert die Farbe des Umrisses (siehe auch outline oben).

  • Werte: Ein beliebiger in CSS gültiger Farbwert sowie das Schlüsselwort invert, mit dem die Hintergrundfarbe einfach umgekehrt wird. Wird der Umriss vor einem weißen Hintergrund dargestellt, erscheint der Umriss demnach in Schwarz. Ansonsten funktioniert outline-color analog zu border-color.
outline-color: invert;  

outline-style

Gibt, wie border-style, den Umrissstil an, z.B. durchgehend, gestrichelt, gepunktet usw.

  • Werte: Die gleichen wie für border-style.
outline-style: dashed;  

outline-width

Definiert die Dicke des Umrisses. Funktioniert wie border-width.

  • Werte: Eine beliebige in CSS gültige Maßeinheit mit Ausnahme von Prozentwerten. Am häufigsten verwendet man em-Einheiten oder Pixel.
outline-width: 3px;  

padding

  • Werte: Eine beliebige in CSS gültige Maßeinheit, z.B. Pixel oder em-Einheiten. Prozentwerte werden basierend auf der Breite des Elements berechnet. Ist eine überschrift beispielsweise ein Kind-Element des <body>-Tags, wird die Breite des im Browser sichtbaren Bereichs verwendet. Hat das Browserfenster beispielsweise eine Breite von 1.000 Pixeln, erzeugt der Wert 20% einen Innenabstand von 200 Pixeln Breite. Ändert der Besucher die Größe des Browserfensters, wird der Innenabstand entsprechend angepasst. Geben Sie für padding nur einen Wert an, gilt dieser für alle vier Seiten des Elements. Alternativ können Sie padding für jede einzelne Seite angeben. Die Reihenfolge ist hierbei: oben, rechts, unten, links.
padding: 20px; padding: 2em 3em 2.5em 0;  

padding-top

Funktioniert wie die Eigenschaft padding, definiert allerdings nur den Innenabstand für die Oberseite eines Elements.

padding-top: 20px;  

padding-right

Funktioniert wie die Eigenschaft padding, definiert allerdings nur den Innenabstand für die rechte Seite eines Elements.

padding-right: 20px;  

padding-bottom

Funktioniert wie die Eigenschaft padding, definiert allerdings nur den Innenabstand für die Unterseite eines Elements.

padding-bottom: 20px;  

padding-left

Funktioniert wie die Eigenschaft padding, definiert allerdings nur den Innenabstand für die linke Seite eines Elements.

padding-left: 20px;  

margin

Info

  • Werte: Eine beliebige in CSS gültige Längenangabe, z.B. in Pixeln oder em-Einheiten. Prozentwerte werden anhand der Breite des umgebenden Elements berechnet. Ist eine Überschrift beispielsweise ein Kind-Element des <body>-Tags, wird die Breite des im Browser sichtbaren Bereichs verwendet. Hat das Browserfenster beispielsweise eine Breite von 1.000 Pixeln, erzeugt der Wert 20% für die Überschrift einen Außenabstand von 200 Pixeln Breite. Ändert der Besucher die Größe des Browserfensters, wird der Außenabstand entsprechend angepasst. Geben Sie für margin nur einen Wert an, gilt dieser für alle vier Seiten des Elements. Alternativ können Sie, wie bei padding. Einzelwerte für die Seiten angeben. Die Reihenfolge ist erneut: oben. rechts. unten. links.
margin: 20px; margin: 2em 3em 2.5em 0;  

margin-top

Funktioniert wie die Eigenschaft margin, wobei nur für die Oberseite des Elements ein Außenabstand festgelegt wird.

margin-top: 20px;  

margin-right

Funktioniert wie die Eigenschaft margin, wobei nur für die rechte Seite des Elements ein Außenabstand festgelegt wird.

margin-right: 20px;  

margin-bottom

Funktioniert wie die Eigenschaft margin, wobei nur für die Unterseite des Elements ein Außenabstand festgelegt wird.

margin-bottom: 20px;  

margin-left

Funktioniert wie die Eigenschaft margin, wobei nur für die linke Seite des Elements ein Außenabstand festgelegt wird.

margin-left: 20px;  

cheshire cat 128

Hintergründe

In CSS gibt es mehrere Eigenschaften für die Darstellung des Hintergrunds eines Elements. Hierzu gehört die Definition von Hintergrundfarben und -bildern sowie die Steuerung von Platzierung und Wiederholung (Kachelung) des Hintergrundbilds.

background

  • Werte: Die Werte der im Folgenden beschriebenen Hintergrundeigenschaften. Die Reihenfolge der Werte spielt keine Rolle (außer für die unten beschriebene Positionierung). Üblich ist es jedoch, die Werte in der Reihenfolge background-color, background-image, background-repeat, background-attachment, background-position anzugeben.
background: #333 url(bilder/logo.gif) no-repeat fixed left top;  

background-attachment

Gibt an, wie sich ein Hintergrundbild verhalten soll, wenn die Seite gescrollt wird. Entweder wird das Bild mit dem restlichen Inhalt bewegt, oder es bleibt an seiner Position fixiert. Sie können beispielsweise dafür sorgen, dass ein Logo auch bei sehr langen Webseiten immer sichtbar bleibt, indem Sie background-attachment den Wert fixed geben. (In Internet Explorer 6 und seinen Vorgängern funktioniert diese Methode nur mit dem <body>-Tag.)

  • Werte: scroll oder fixed. Der Standardwert ist scroll: Das Bild wird mit dem übrigen Inhalt bewegt. Der Wert fixed sorgt dafür, dass das Bild nicht mitbewegt wird.
background-attachment: fixed;  

background-color

Versieht ein Element mit einer bestimmten Hintergrundfarbe. Der Hintergrund wird hinter möglicherweise definierten Begrenzungslinien (Rahmen) und Hintergrundbildern dargestellt. Wenn Sie Rahmenstile (Eigenschaft border-style) wie dashed oder dotted verwenden, kann es passieren, dass die Hintergrundfarbe in den Zwischenräumen der Begrenzungslinien „durchscheint“.

  • Werte: Ein beliebiger Farbwert.
background-color: #FFF;  

background-image

Definiert ein Bild als Hintergrund eines Elements. Andere Inhalte werden vor dem Bild dargestellt. Daher sollten Sie darauf achten, dass z.B. Text auch bei Überschneidungen mit dem Hintergrundbild weiterhin lesbar bleibt. Alternativ können Sie den Inhalt mithilfe von Innenabständen vom Bild wegbewegen. Standardmäßig wird das Bild horizontal und vertikal wiederholt (gekachelt), bis der gesamte sichtbare Bereich des Elements ausgefüllt ist. Dieses Verhalten können Sie mit der Eigenschaft background-repeat (s.u.) steuern oder auch unterbinden.

  • Werte: Die URL des zu verwendenden Bilds.
background-image: url(bilder/foto.jpg); background-image: url(http://www.beispiel.org/foto.jpg);  

background-position

Steuert die Platzierung des Hintergrundbilds. Standardmäßig wird das Bild in der linken oberen Ecke des Elements platziert. Wird das Bild gekachelt (s.u.). steuert background-position den Startpunkt der Bildwiederholungen. Platzieren Sie ein gekacheltes Hintergrundbild in der Mitte des Elements, wird das Bild auf beiden Seiten sowie ober- und unterhalb des Startbilds wiederholt. In den meisten Fällen hat eine exakte Platzierung eines gekachelten Bilds keine visuellen Auswirkungen. Interessant wird es dagegen, wenn Sie eigene Aufzählungszeichen und spezielle visuelle Effekte verwenden wollen.

  • Werte: Eine beliebige in CSS gültige Maßeinheit. Schlüsselwörter und Prozentwerte. Die Werte werden normalerweise paarweise angegeben, wobei der erste Wert die horizontale und der zweite Wert die vertikale Position festlegt. Diese Schlüsselwörter sind für die horizontale Positionierung: left (links), center (mittig) und right (rechts). Für die vertikale Positionierung gibt es: top (oben), center (mittig) und bottom (unten). Entfernungen in Pixeln und em-Einheiten werden von der linken oberen Ecke des Elements aus berechnet. Um ein Hintergrundbild 5 Pixel nach links und 10 nach unten zu verschieben, könnten Sie also die Angabe 5px lOpx verwenden.
background-position: left top; background-position: 1em 3em; background-position: 10px 50%;  

background-repeat

Legt fest, ob und wie ein Hintergrundbild wiederholt (gekachelt) wird. Standardmäßig wird ein Hintergrundbild von der linken oberen Ecke des Elements (für das das Bild definiert wurde) aus horizontal und vertikal wiederholt, bis der gesamte sichtbare Bereich des Elements ausgefüllt ist.

  • Werte: repeat, no-repeat, repeat-x, repeat-y. Die Option repeat entspricht dem Standardverhalten: einer vertikalen und horizontalen Kachelung des Bilds. Der Wert no-repeat stellt das Hintergrundbild nur einmal dar, ohne es zu kacheln. Der Wert repeat-y wiederholt das Bild nur vertikal, sprich, von oben nach unten, und ist damit ideal für Seitenleisten geeignet. Der Wert repeat-x wiederholt das Hintergrundbild in der horizontalen Ebene, wodurch Sie beispielsweise eine spezielle Trennlinie für ein Element realisieren können.
background-repeat: no-repeat;  

tools 128

Eigenschaften für das Seitenlayout

Die folgenden Eigenschaften steuern die Platzierung und Größe von Elementen auf einer Webseite.

bottom

  • Werte: Eine beliebige in CSS gültige Maßeinheit, z.B. Pixel, em-Einheiten oder Prozentwerte. Prozentwerte werden basierend auf der Breite des umgebenden Elements berechnet.
bottom: 5em;  

Info

Internet Explorer 6 und seine Vorgänger haben möglicherweise Probleme, wenn ein Element per bottom positioniert wird.

clear

Verhindert, dass ein als Float definiertes Element umflossen wird. Stattdessen wird das mit clear markierte Element unterhalb des Floats dargestellt.

  • Werte: left, right, both, none. Die Option left sorgt dafür, dass nur mit float: left; definierte Elemente nicht umflossen werden. Das Gleiche gilt entsprechend für den Wert right und mit float: right; definierte Elemente. Verwenden Sie den Wert both, wird das Umfließen für beide Arten von Floats verhindert. Durch die Angabe von none können Sie zuvor mit clear markierte Werte dazu bringen, Floats wieder zu umfließen. Das kann praktisch sein, wenn das Umfließen nur in einem bestimmten Fall verhindert werden soll.
clear: both;  

clip

Erzeugt einen rechteckigen Ausschnitt, der nur einen Teil eines Elements zeigt. Vielleicht wollen Sie Ihr altes Schulabschlussfoto ins Netz stellen – allerdings ohne den Klassentyrann. In diesem Fall können Sie das Bild per clip so beschneiden, dass nur der tyrannenfreie Teil angezeigt wird. Ihr Peiniger dagegen bleibt unsichtbar. Am effektivsten ist die Eigenschaft clip, wenn der Bildausschnitt per JavaScript animiert wird, etwa um anfangs nur einen kleinen Ausschnitt zu zeigen, der langsam vergrößert wird.

  • Werte: Die Koordinaten für einen rechteckigen Bereich in Form von in CSS erlaubten Längenangaben oder das Schlüsselwort auto. Die Koordinaten werden mit einem paar runder Klammern umgeben, denen das Schlüsselwort rect vorangestellt wird, wie hier: rect(5px,110px,40px,10px);.

Die vier Werte beziehen sich auf die vier Ecken des Beschneidungsrechtecks. Sie werden in der Reihenfolge oben, rechts, unten, links von der linken oberen Ecke des Elements aus gemessen, für das die Beschneidung definiert wird. Mit den oben genannten Werten können Sie also eine Beschneidung mit einer Höhe von 35 Pixeln (40px – 5px) und einer Breite von 100 Pixeln (110px – 10px) definieren, die 5 Pixel von der Oberkante und 10 Pixel von der linken Seite des Elements beginnt.

clip: rect(5px, 110px,40px,10px); clip: rect(10px, auto. auto,10px);  

Info

Da die Reihenfolge der Koordinaten etwas seltsam ist, verwenden die meisten Designer den ersten und den letzten Wert als Berechnungsgrundlage für die anderen beiden Angaben.

display

  • Werte: block, inline, none. Tatsächlich gibt es 17 verschiedene Werte für diese Eigenschaft, die aber nicht von allen Browsern konsistent unterstützt werden. So wird die Verwendung von display im Internet Explorer offiziell erst ab der Version 8 vollständig unterstützt. Die häufigsten und von allen aktuellen Browsern verstandenen Werte sind block, inline und none. Der Wert block sorgt dafür, dass vor und nach dem Element wie bei anderen Block-Elementen auch (z.B bei Absätzen und Überschriften) die Zeile umbrochen wird. Der Wert inline bewirkt, dass sämtlicher Inhalt des Elements auf der gleichen Zeile wie die umgebenden Elemente angezeigt wird (wie z.B. Text, der mit Tags wie <strong> oder <em> markiert wurde).
display: block;  

float

Definiert ein Element als sogenannten Float. Als Float definierte Elemente werden an den linken oder rechten Rand des umgebenden Elements (bzw. der Seite) verschoben. Sie sind vom normalen Textfluss des Dokuments ausgenommen und werden vom übrigen Inhalt der Seite (bzw. des umgebenden Elements) „umflossen“. Das heißt, Elemente, die im Quelltext der Seite auf das Float folgen, werden nach oben verschoben und nehmen den entstandenen Leerraum ein, wie beispielsweise der Fließtext in einem Zeitungsartikel. Mit der Eigenschaft clear (s.o.) können die auf das Float folgenden Elemente am Umfließen gehindert werden.

  • Werte: left, right, none. Der Wert none sorgt dafür, dass die Definition als Float fur ein Element wieder aufgehoben wird. Das kann praktisch sein, wenn ein Tag in einer allgemeinen Regel als Float definiert wurde. Mithilfe einer CSS-Definition mit höherer Spezifität können Sie diese Einstellung für spezielle Tags überschreiben.
float: left;  

height

Legt die Höhe des Inbaltsbereichs eines Elements fest. Dies ist der Teil einer Box, in dem Text, Bilder oder auch andere Tags enthalten sind. Um die tatsächliche Höhe eines Elements zu ermitteln, müssen zum Wert von height die Werte für die oberen und unteren Innen- und Außenabstände sowie die Dicke der Begrenzungslinien (Rahmen) hinzuaddiert werden.

  • Werte: Eine beliebige in CSS gültige Maßeinheit, wie z.B. Pixel, em-Einheiten oder Prozentwerte. Letztere werden basierend auf der Höhe des umgebenden Elements berechnet.
height: 50%;  

Info

left

  • Werte: Eine beliebige in CSS gültige Maßeinheit, wie Pixel, em-Einheiten oder Prozentwerte.
left: 5em;  

max-height

  • Werte: Eine beliebige in CSS gültige Maßeinheit wie Pixel, em-Einheiten oder Prozentwerte. Prozentwerte werden basierend auf der Höhe des Elements berechnet.
max-height: 100px;  

max-width

  • Werte: Eine beliebige in CSS gültige Maßeinheit wie Pixel, em-Einheiten oder Prozentwerte. Prozentwerte werden basierend auf der Breite des Elements berechnet.
max-width: 950px;  

min-height

Legt die minimale Höhe für ein Element fest. Die Box des Elements darf höher sein als diese Einstellung, aber keinesfalls kleiner. Ist der Inhalt der Box niedriger als der mit min-height definierte Wert, wird die Höhe der Box so weit erweitert, bis die angegebe Höhe erreicht ist. Diese Eigenschaft wird vom Internet Explorer 6 und seinen Vorgängern nicht unterstützt.

  • Werte: Eine beliebige in CSS gültige Maßeinheit wie Pixel, em-Einheiten oder Prozentwerte. Prozentwerte werden basierend auf der Höhe des Elements berechnet.
min-height: 20em;  

min-width

Definiert die minimale Breite eines Elements. Die Breite eines Elements darf höher sein als dieser Wert, keinesfalls aber geringer. Ist der Inhalt des Elements schmaler als der Wert von min-width, wird die Breite der Box entsprechend verringert. Sie können min-width auch in flüssigen Layouts verwenden, um sicherzustellen, dass das Layout auch bei geringen Fensterbreiten nicht „auseinanderfällt“. Ist das Browserfenster schmaler als der Wert von min-height für das <body>-Element, erzeugt der Browser automatisch horizontale Rollbalken, um den Inhalt zugänglich zu machen. Diese Eigenschaft wird vom Internet Explorer 6 und seinen Vorgängern nicht unterstützt.

  • Werte: Eine beliebige in CSS gültige Maßeinheit wie Pixel, em-Einheiten oder Prozentwerte. Prozentwerte werden basierend auf der Breite des Elements berechnet.
min-width: 760px;  

Info

overflow

Mit dieser Eigenschaft können Sie steuern, was mit Inhalt geschehen soll, der nicht vollständig im Inhaltsbereich des Elements dargestellt werden kann (z.B. weil die Werte für max-width, max-height oder clip dies verhindern).

Info

  • Werte: visible, hidden, scroll, auto. Der Standardwert visible sorgt dafür, dass Inhalt, der außerhalb der Box dargestellt werden muss. sichtbar bleibt. Hierdurch kann es allerdings passieren, dass Begrenzungslinien (Rahmen) und andere Seitenelemente mit dem Inhalt der Box überlagert werden. IE 6 und seine Vorgänger vergrößern in diesem Fall einfach die Box, bis der Inhalt hineinpasst. Der Wert hidden versteckt die Teile des Inhalts, die über die Grenzen der Box hinausragen würden. Mit scroll wird der Browser angewiesen, das Element prinzipiell mit Rollbalken zu versehen, wodurch der versteckte Inhalt zugänglich bleibt. Durch den Wert auto werden die Rollbalken nur angezeigt, wenn dies auch nötig ist.
overflow: hidden;  

position

Legt fest, auf welche Art der Browser ein Element auf der Seite positionieren soll.

  • Werte: static, relative, absolute, fixed, static entspricht dem Standardverhalten des Browsers. Die Blockelemente werden in der Reihenfolge des HTML-Quellcodes nach- und übereinander auf der Seite dargestellt. Relativ positionierte Elemente werden um einen bestimmten Wert von ihrem ursprünglichen Platz in der Seite verschoben. Dieser wird nicht von anderen Elementen eingenommen, sondern bleibt frei. Der Wert absolute nimmt ein Element komplett vom Textfluss der Seite aus; dieses kann mit den Eigenschaften left, right, top und bottom (s. Hinweis) an einer bestimmten Position auf der Seite platziert werden. Absolut positionierte Elemente können andere Teile der Seite überlagern. Außerdem können Sie ein Element relativ zu einem mit absolute, relative oder fixed positionierten Element platzieren. Die Einstellung fixed sorgt dafür, dass ein derart positioniertes Element (ähnlich den HTML-Frames) an einer bestimmten Position auf der Seite sichtbar bleibt, auch wenn diese gescrollt wird. Der Wert fixed wird vom Internet Explorer 6 (und früher) nicht unterstützt.
position: absolute;  

Info

right

  • Werte: Eine beliebige in CSS gültige Maßeinheit wie Pixel, em-Einheiten oder Prozentwerte.
right: 5em;  

Info

Internet Explorer 6 (und seine Vorgänger) haben gelegentlich Probleme bei der Positionierung von Elementen mit der Eigenschaft right.

top

Macht das Gegenteil der Eigenschaft bottom. Bei der Verwendung von absoluter oder fester Positionierung definiert der Wert dieser Eigenschaft, wie weit die Oberkante des Elements von der Oberkante des nächsten positionierten Vorfahren-Elements bzw. des Ansichtsbereichs entfernt ist. Mit dieser Eigenschaft können Sie beispielsweise ein Logo um einen bestimmten Abstand von der Oberkante des Ansichtsbereichs entfernt platzieren. Bei der Verwendung von relativer Positionierung wird die Entfernung von der Oberkante des Elements selbst aus berechnet (bevor es positioniert wird).

  • Werte: Eine beliebige in CSS gültige Maßeinheit wie Pixel, em-Einheiten oder Prozentwerte.
top: 5em;  

visibility

Legt fest, ob ein Element sichtbar sein soll. Hiermit können Sie Teile einer Seite, etwa einen Absatz oder ein <div>-Tag. „unsichtbar“ machen. Im Gegensatz zur Deklaration display: none; wird bei der Deklaration visibility: hidden; das Element nicht vom Textfluss der Seite ausgenommen. Das heißt, an der Stelle, an der das Element eigentlich stehen soll, bleibt eine Lücke. Aus diesem Grund wird die Eigenschaft visibility meistens für absolut positionierte Elemente verwendet, die sowieso vom normalen Textfluss ausgenommen sind.

  • Werte: visible, hidden. Mithilfe des Werts collapse können Sie außerdem die Zeilen oder Spalten einer Tabelle ein- und ausblenden.
visibility: hidden;  

width

  • Werte: Eine beliebige in CSS gültige Maßeinheit wie Pixel, em-Einheiten oder Prozentwerte.
width: 250px;  

z-index

  • Werte: Ein ganzzahliger Wert wie 1, 2 oder 10. Auch negative Werte sind möglich, allerdings werden diese von den Browsern unterschiedlich interpretiert. Je größer die Zahl, desto weiter rückt das Element nach vorne. Ein Element mit einem z-index von 20 erscheint daher hinter einem Element, dessen z-index den Wert 100 hat (wenn sich die Elemente überschneiden). Befindet sich das Element innerhalb eines anderen positionierten Elements, benutzt es den „Positionierungskontext“ des umgebenden Elements und wird möglicherweise nicht vor einem anderen Element dargestellt, egal wie hoch der z-index ist.
z-index: 12;  

Info

Die Reihenfolge der Werte muss nicht in ganzzahligen Schritten ertolgen. Hat Element A den z-index 1, muss das folgende Element B nicht zwingend den Wert 2 bekommen, um es vor Element A darzustellen. Sie können als Wert auch 5, 10 oder etwas anderes verwenden, um den gleichen Effekt zu erzielen. Hauptsache, die Zahl ist größer. Wenn Sie später neue Elemente in die Seite einbauen, brauchen Sie auf diese Weise nicht die Werte aller anderen Elemente zu ändern. Um sicherzustellen, dass ein Element immer vor anderen Elementen dargestellt wird, geben Sie ihm einfach einen sehr hohen Wert für z-index, z.B. 10000.

storage 128

Tabelleneigenschaften

border-collapse

  • Werte: collapse, separate.
border-collapse: collapse;  

border-spacing

Definiert, wie groß der Zwischenraum zwischen den einzelnen Zellen sein soll. Diese Eigenschaft soll das HTML-Attribut cellspacing ersetzen. Der Internet Explorer versteht border-spacing allerdings erst ab Version 8. Daher ist es unter Umständen nötig, weiterhin mit cellspacing zu arbeiten, damit der Zwischenraum in allen Browsern gleich dargestellt wird.

Info

Wenn Sie den Zwischenraum entfernen wollen, den Browser standardmäßig zwischen den einzelnen Zellen darstellen, setzen Sie einfach die Eigenschaft border-collapse (s.o.) auf den Wert collapse.

  • Werte: Zwei in CSS gültige Längenangaben. Der erste Wert definiert den horizontalen Abstand (den seitlichen Leerraum), der zweite Wert ist für die vertikale Trennung (den Leerraum ober- und unterhalb einer Zelle) zuständig.
border-spacing: 0 10px;  

caption-side

Wird diese Eigenschaft auf eine Tabellenbeschriftung angewendet, legt sie fest, ob die Beschriftung über oder unter der Tabelle angezeigt wird. (Da das <caption>-Tag gemäß den HTML-Regeln direkt auf das öffnende <table>-Tag folgen muss, würde die Beschriftung ansonsten prinzipiell über der Tabelle erscheinen.)

  • Werte: top, bottom.
caption-side: bottom;  

Info

Leider wird diese Eigenschaft vom Intemet Explorer erst ab Version 8 unterstützt. Daher ist es unter Umständen sicherer, die Darstellung der Beschriftung mit dem entsprechenden HTML-Attribut zu steuem: <caption align="bottom"> oder <caption align="top">.

empty-cells

Diese Eigenschaft steuert, ob ein Browser vollkommen leere Tabellenzellen (<td></td>) darstellen soll. Mit dem Wert hide können Sie diese Zellen von der Darstellung ausnehmen. Stattdessen ist nur ein leerer Platzhalter zu sehen. Eventuell definierte Rahmen, Hintergrundbilder oder -farben werden nicht dargestellt. Diese Eigenschaft wird auf das <table>-Tag angewendet.

  • Werte: show, hide.
empty-cells: show;  

Info

Hat die Eigenschaft border-spacing den Wert collapse, hat empty-cells keine Auswirkungen auf die Darstellung.

table-layout

Regelt, wie der Webbrowser eine Tabelle darstellt, und kann kleinere Auswirkungen auf die Darstellungsgeschwindigkeit haben. Mit dem Wert fixed wird der Browser angewiesen, alle Spalten mit der gleichen Breite darzustellen wie die der ersten Spalte. Das kann (aus sehr komplizierten Gründen) die Darstellung der Tabelle beschleunigen. Der Standardwert auto sorgt dagegen dafur, dass der Browser einfach „sein Ding“: macht. Wenn die Darstellungsgeschwindlgkeit Ihrer Tabelle für Sie schnell genug ist, werden Sie diese Eigenschaft nicht brauchen. Die Eigenschaft table-layout funktioniert nur mit Regeln, die das <table>-Tag formatieren.

  • Werte: auto, fixed.
table-layout: fixed;  

info 128

Verschiedene Eigenschaften

Neben den bereits vorgestellten gibt es in CSS 2.1 ein paar zusätzliche Eigenschaften, die möglicherweise interessant für Sie sind. Mit ihnen können Sie spezielle Inhalte in Webseiten einfügen oder eigene Cursor definieren. Außerdem können Sie steuern, wie eine Seite ausgedruckt wird, und noch einiges andere. (Leider ist die Browserunterstützung für diese Eigenschaften ziemlich dürftig.)

content

Mit dieser Eigenschaft können Sie Inhalte (Text, Bilder) definieren, die mit den Pseudoelementen :before und :after vor oder nach einem Element dargestellt werden. Diese Eigenschaft wird erst ab Internet Explorer 8 unterstützt, was das Anwendungsgebiet möglicherweise etwas einschränkt.

  • Werte: Text in Anführungszeichen „wie hier“ und die Schlüsselwörter normal, open-quote, close-quote, no-open-quote, no-close-quote. Außerdem ist es möglich, den Wert eines HTML-Attributs zu verwenden. Außerdem ist es möglich, per url() eine URL anzugeben, die beispielsweise auf eine Grafikdatei verweist, oder (zumindest theoretisch) mit counter() einen Zähler zu realisieren.
p.anzeige: before {  content: "Und jetzt mal etwas vollkommen anderes..."; }    a:after {  content: " (" attr(href) ") ";  }  a:before {  content: url("link.gif");  }  

Info

cursor

Hiermit können Sie das Aussehen des Mauszeigers verändern, z.B. wenn dieser über ein bestimmtes Element bewegt wird. Vielleicht wollen Sie den Mauszeiger in ein Fragezeichen verwandeln, wenn dieser über einen Link bewegt wird, der auf weitere Informationen zu einem Thema (z.B. die Definition eines Worts) verweist.

  • Werte: auto, default, crosshair, pointer, move, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize, text, wait, help, progress. Daneben können Sie auch eine URL angeben, die auf eine eigene Cursorgrafik verweist. (Mehr dazu im unten stehenden Hinweis.)
cursor: help; cursor: url(bilder/cursor.cur);  

Info

orphans

Gibt die minimale Anzahl von Textzeilen innerhalb eines Elements an, die für sich am unteren Ende einer Seite stehen dürfen. Der Wert dieser Eigenschaft kann die Platzierung von Seitenumbrüchen innerhalb des Elements beeinflussen. Angenommen, Sie drucken Ihre Webseite auf einem Laserdrucker aus, und ein fünfzeiliger Absatz wird ohne weitere Angaben auf zwei Seiten verteilt. Die erste Zeile steht auf der ersten Seite, die übrigen vier auf der nächsten. Da eine einzelne Zeile am Seitenende wie ein Waisenkind (engl. orphan) wirkt, können Sie den Browser anweisen, den Zeilenumbruch nur durchzuführen, wenn z.B. mindestens drei Zeilen am unteren Ende stehen bleiben.

  • Werte: Ein ganzzahliger positiver Wert wie 1, 2, 3 oder 5.
orphans: 3;  

page-break-after

Legt fest, ob (beim Ausdrucken) nach einem bestimmten Element ein Seitenumbruch erzeugt werden soll. Auf diese Weise können Sie z.B. sicherstellen, dass ein bestimmter Absatz immer als Letztes aufeiner Seite erscheint.

  • Werte: auto, always, avoid, left, right. Der Standardwert auto überlässt das Setzen von Seitenumbrüchen dem Browser. Die Einstellung always erzwingt direkt nach dem Element einen Seitenumbruch. Das folgende Element erscheint auf jeden Fall auf der folgenden Seite. Der Wert avoid verhindert, dass nach dem Element ein Seitenumbruch erzeugt wird. Diese Einstellung ist sinnvoll, wenn beispielsweise eine Überschrift und der folgende Absatz immer auf einer Seite stehen sollen. Leider wird dies jedoch nicht von allen Browsern verstanden. Die Werte left und right legen fest, ob das folgende Element auf einer links oder rechts angeordneten Seite (wie in einem Buch) ausgegeben wird. Es kann also passieren, dass der Browser eine zusätzliche Seite ausgibt. Momentan werden die letzten beiden Werte allerdings von keinem Browser verstanden. Sie brauchen sich also keine Sorgen um verschwendetes Papier zu machen. Die meisten Browser verhalten sich bei left und right, als wäre der Wert always angegeben worden.
page-break-after: always;  

page-break-before

Funktioniert wie page-break-after, nur dass der Seitenumbruch vor dem Element erzeugt wird, sodass es als Erstes auf der folgenden Seite ausgegeben wird. Mit dieser Eigenschaft können Sie sicherstellen, dass überschriften für bestimmte Bereiche einer Webseite immer am Anfang der Druckseite stehen.

  • Werte: Die gleichen wie für page-break-after.
page-break-before: always;  

page-break-inside

Verhindert, dass ein Element auf zwei Druckseiten verteilt wird. Wenn Sie ein Foto und seine Beschriftung auf jeden Fall auf derselben Seite ausdrucken wollen, umgeben Sie das Foto und die Beschriftung mit einem <div>-Tag. Auf dieses wenden Sie dann die Eigenschaft page-break-inside an.

  • Werte: avoid
page-break-inside: avoid;  

widows

Diese Eigenschaft ist das Gegenteil von orphans. Sie gibt die minimale Anzahl von Zeilen an, die am Anfang einer gedruckten Seite stehen müssen. Vielleicht können am Ende der vorigen Seite nur vier von fünf Zeilen eines Absatzes ausgegeben werden. Die fünfte Zeile erscheint allein wie eine Witwe (engl. widow) auf der folgenden Seite. Mit der Eigenschaft widows können Sie die Anzahl der Zeilen festlegen, die am Anfang einer neuen Seite stehen sollen. Diese Eigenschaft wird nur von Opera und IE 8 unterstützt.

  • Werte: ein ganzzahliger Wert wie 1, 2, 3 oder 5.
widows: 3;  

Um CSS optimal nutzen zu können, muss Ihr HTML-Code ein solides und gut gebautes Fundament bieten. In diesem Kapitel lernen Sie, wie Sie besseren und CSS-freundlicheren HTML-Code schreiben können. Das Gute daran ist, dass das Schreiben von HTML durch die Verwendung von CSS automatisch leichter wird. Sie brauchen sich keine Gedanken mehr darüber zu machen, wie Sie HTML für Designzwecke einsetzen, obwohl es niemals dafür gedacht war. Stattdessen bietet Ihnen CSS sämtliche benötigten grafischen Designelemente. Ihre Arbeit wird erleichtert, weil für CSS optimierte HTML-Seiten weniger Code und Tipparbeit bedeuten und außerdem deutlich leichter zu erstellen sind. Zudem laden Ihre Seiten schneller – ein willkommener Bonus, für den Ihnen die Besucher Ihrer Site dankbar sein werden.

HTML: Vergangenheit und Zukunft

HTML und dessen Nachfolger XHTML bilden das Grundgerüst fast jeder Seite, die Sie im World Wide Web finden. Sobald CSS ins Spiel kommt, ändert sich allerdings auch die Verwendung von HTML. Verabschieden Sie sich endgültig davon. HTML-Tags zu verbiegen, nur um bestimmte grafische Effekte zu erzielen. Einige Tags und Attribute wie das berüchtigte <font>-Tag können Sie ab sofort komplett vergessen. Die folgenden Abschnitte erklären Ihnen, warum.

Info

Alles was Sie in diesem Kapitel über HTML lesen, gilt gleichermaßen auch für XHTML. Es gibt mehr Varianten von (X)HTML als Regenbogenfarben. Am Ende müssen Sie sich für eine Variante entscheiden und dafür sorgen, dass Ihre Webseite darüber informiert, welche Version das ist. Ansonsten kann es passieren, dass die Browser Ihrer Besucher Ihre mit viel Aufwand erstellte Seite komplett zerlegen. Später in diesem Kapitel werden Sie lernen, wie Sie CSS mitteilen, welche Geschmacksrichtung von (X)HTML verwendet wird.

binoculars 128

HTML in der Vergangenheit: Hauptsache, es sieht gut aus

Als eine Handvoll Wissenschaftler das Web erfand, um technische Dokumentationen leichter gemeinsam nutzen und nachverfolgen zu können, hat niemand die Grafikdesigner nach ihrer Meinung gefragt. Die Wissenschaftler brauchten HTML nur, um Informationen zum leichteren Verständnis klar zu strukturieren. So steht das Tag <hl> für eine wichtige überschrift („ersten Grades“), während <h2> weniger Gewicht hat und meist als Untertitel für <hl>-Überschriften verwendet wird. Ein weiterer Favorit ist das <ol>-Tag (ordered list), das eine nummerierte Liste erzeugt, z.B. für „1000 Dinge, die man bei Schwerelosigkeit tun kann“.

Als auch andere Leute begannen, HTML zu benutzen, wollten diese, dass ihre Seiten gut aussähen.

Also begannen die Webdesigner, die Tags zum Steuern der Darstellung zu verwenden und nicht mehr nur zum Strukturieren der Inhalte. So können Sie beispielsweise das <blockquote>-Tag (eigentlich gedacht, um längere Zitate zu markieren) für beliebigen Text verwenden, den Sie ein wenig einrücken wollen. Mithilfe der Tags für Überschriften können Sie bestimmte Textteile größer und fett gedruckt darstellen – unabhängig davon, ob es sich tatsächlich um eine überschrift handelt oder nicht.

Noch raffinierter war die Verwendung des <table>-Tags, z.B. um mehrspaltigen Text darzustellen oder Text und Bilder möglichst genau auf einer Seite zu platzieren. Eigentlich war das <table>-Tag dafür gedacht, tabellarische Daten zu markieren und darzustellen, z.B. Messergebnisse, Zugfahrpläne usw. Weil es nichts Vergleichbares gab, benutzten die Designer das Tag auf unzweckmäßige Weise. Hierbei wurden nicht selten mehrere Tabellen ineinander verschachtelt, damit die Seiten gut aussahen.

In der Zwischenzeit erfanden die Browserhersteller neue Tags und Attribute, nur um das Aussehen einer Seite zu verbessern (manche Webdesigner wachen heute noch schweißgebadet auf, weil sie wieder einmal von <blink> und <marquee> geträumt haben). Das <font>-Tag ermöglicht die Angabe einer bestimmten Schrift, einer Schriftgröße (in sieben möglichen Schritten) und einer Schriftfarbe. (Vermutlich haben Sie schon gemerkt, dass das etwa 100 Schritte weniger sind, als beispielsweise Microsoft Word anbietet.)

Wenn selbst der übelste Tag-Missbrauch nicht zum gewünschten Ergebnis führte, hatten die Webdesigner

immer noch einen letzten Ausweg: die Verwendung von Grafiken. Um das automatische Wiederholen („Kacheln“) von Hintergrundbildern zu verhindern, wurden beispielsweise übergroße Grafiken als Hintergrund verwendet; andersherum wurden große Grafiken gern in kleinere Einzelbilder zerschnitten (das berühmte „Slicing“) und mithilfe von Tabellen wieder zusammengeschustert.

Zwar geben die oben genannten Techniken – die kreative, aber nicht unbedingt zweckmäßige Verwendung von HTML-Tags und die ausufernde Verwendung von Grafiken – Ihnen eine große Kontrolle über die Seitengestaltung. Gleichzeitig bedeutete dies aber auch wesentlich mehr HTML-Code (und mehr neue Stirnfalten, die nicht einmal ein ganzes Leben in der Sonne hervorbringen kann). Lange Zeit waren diese Techniken die einzige Möglichkeit, ein „anständiges“ Seitenlayout zu erreichen. Mit der Einführung von CSS hat sich diese Sichtweise jedoch radikal verändert.

HTML heute: Das Grundgerüst für CSS

Es macht keinen Unterschied, ob eine Seite nun den Veranstaltungskalender Ihres Angelvereins, eine Anfahrtsbeschreibung zum nächsten IKEA oder die Bilder vom letzten Kindergeburtstag enthält. Am Ende entscheidet das Design darüber, ob die Seite einen professionellen Eindruck macht oder sich eher wie das Werk eines Hobbybastlers präsentiert. Gutes Design unterstützt den Inhalt Ihrer Seite, hilft Besuchern, das Gesuchte zu finden, und legt fest, wie der Rest der Welt Ihre Website betrachtet. Aus diesem Grund haben Webdesigner die oben genannten Verrenkungen überhaupt auf sich genommen, um eine Seite gut aussehen zu lassen. Indem CSS diese Designausgaben übernimmt, kann HTML wieder das tun, wofür es eigentlich gedacht war: Inhalte mit einer Struktur zu versehen.

Die Verwendung von HTML zur Steuerung des Aussehens von Text und anderen Elementen einer Webseite ist veraltet. Machen Sie sich keine Sorgen, wenn die Darstellung des <hl>-Tags für Ihren Geschmack zu groß ist oder die Abstände in einer Aufzählungsliste Ihnen nicht gefallen. Wie Sie später sehen werden, lässt sich das Problem mithilfe von CSS ganz einfach lösen. Stellen Sie sich HTML einfach als eine Möglichkeit vor, den Inhalt, den Sie im Web veröffentlichen wollen, mit einer ordentlichen Struktur zu versehen. Kurz gesagt: Verwenden Sie HTML, um Ihre Inhalte zu organisieren, und CSS, um sie auch noch gut aussehen zu lassen.

edit_blue 128

HTML-Code für die Verwendung mit CSS schreiben

Wenn Webdesign für Sie etwas Neues ist, brauchen Sie vermutlich einige Orientierungshilfen bei Ihren Ausflügen in die Welt von HTML. (Halten Sie sich dabei prinzipiell von veralteten HTML-Techniken fern!) Wenn Sie sich dagegen schon länger mit der Gestaltung von Webseiten befassen, haben Sie unterwegs vermutlich ein paar schlechte Gewohnheiten beim Schreiben von HTML angenommen, die Sie besser möglichst schnell vergessen. Der Rest dieses Kapitels macht Sie mit ein paar Regeln zum Schreiben von HTML bekannt, die Ihnen dabei helfen werden, möglichst viel aus CSS herauszuholen. Ihre Mutter wird stolz auf Sie sein!

HTML = Struktur

HTML gibt den Textteilen Ihrer Seite eine Bedeutung, indem es sie logisch aufteilt und je nach Funktion in der Seite mit entsprechenden Markierungen versieht. So enthält der Text innerhalb der <hl>-Tags die Hauptüberschrift für Ihre Seite. Mit anderen Überschriften können Sie den Inhalt in andere, weniger wichtige, aber verwandte Abschnitte unterteilen. Wie das Buch, das Sie gerade lesen, sollte auch eine Webseite eine logische Struktur aufweisen. Jedes Kapitel dieses Buchs besitzt einen Titel (sprich: <h1> und mehrere Abschnitte (<h2>), die ihrerseits in kleinere Unterabschnitte aufgeteilt sind. Stellen Sie sich vor, wie schwer diese Webseite zu lesen wäre, wenn es keine Absätze, Abschnitte oder Überschriften gäbe, sondern nur einen riesigen Textblock.

Info

Neben den Tags für Überschriften besitzt HTML eine Vielzahl weiterer Tags zum Markieren (das „M“ in HTML) bestimmter Textteile entsprechend ihrer Funktion in einer Seite. Mit am beliebtesten ist hier das <p>-Tag, mit dem Sie Textteile als „Absatz“ kennzeichnen können, und <ul> zum Erzeugen einer ungeordneten (nicht nummerierten) Liste. Weniger bekannte Tags können sehr genau bezeichnen, um welche Art von Inhalt es sich handelt, z.B. <abbr> für Abkürzungen und <code> für die Kennzeichnung von Programmiercode.

Wenn Sie Ihren HTML-Code für die Verwendung von CSS optimieren, sollten Sie das HTML-Tag wählen,

html_code_optimieren_01

das möglichst genau die jeweiligen Rolle beschreibt, die ein bestimmter Textteil in der Seite spielt (Überschrift, Absatz, Adresse, Link usw.), anstatt zu bestimmen, wie dieser Teil dargestellt werden soll. So ist eine Sammlung von Links in einer Navigationsleiste eigentlich keine Überschrift und natürlich auch kein normaler Textabsatz. Am ehesten handelt es sich um eine ungeordnete Liste mit möglichen Optionen, für die das <ul>-Tag eine gute Wahl ist. An dieser Stelle könnten Sie einwenden: „Mag ja sein, aber ich möchte die Links nicht untereinander, sondern nebeneinander in einem horizontalen Navigationsmenü anordnen“. Keine Sorge. Mit ein bisschen CSS-Magie (und wir reden hier noch lange nicht vom richtigen Voodoo) können Sie die normalerweise vertikale Liste in eine elegante (horizontale oder vertikale) Navigationsleiste verwandeln.

Zwei neue HTML-Tags

Trotz der Vielfalt an HTML-Tags wird es Situationen geben, in denen genau das Tag, das Ihren Inhalt exakt beschreibt, vermutlich fehlt. Sicher ist <code> gut geeignet, um den Quellcode eines Computerprogramms zu kennzeichnen, aber die meisten Anwender würden <kochrezept> praktischer finden. Leider gibt es so eins nicht. Glücklicherweise besitzt HTML zwei Tags, mit denen Sie Ihren Inhalt besser beschreiben und im gleichen Schritt auch noch mit passenden CSS-Anweisungen verknüpfen können.

Die Tags <div> und <span> sind wie leere Gefäße, die Sie mit beliebigem Inhalt füllen können. Diese Elemente besitzen keine eigenen visuellen Eigenschaften. Sie können ihnen mit CSS ein beliebiges Aussehen geben. Das <div>-Tag (für engl. division, Unterteilung) kennzeichnet einen eigenständigen Teil des Seiteninhalts, ähnlich einem Absatz oder einer Überschrift. Sie können das <div>-Tag aber auch verwenden, um beliebige andere Teile des Inhalts damit zu umgeben, z.B. eine Überschrift, mehrere Absätze oder eine Liste. Das <div>-Tag eignet sich daher hervorragend, um eine Seite in mehrere logische Bereiche zu unterteilen, beispielsweise für das Logo, den Navigationsbereich, den Haupttext, die Fußzeile, usw. Mit Hilfe von CSS können Sie die so markierten Bereiche später positionieren und auf diese Weise anspruchsvolle Seitenlayouts zu erstellen.

Das <span>-Tag wird für sogenannte Inline-Elemente verwendet. Das können einzelne Wörter oder Sätze sein, die Teil eines längeren Absatzes oder einer Überschrift sind. Sie können <span> verwenden wie andere Inline-Tags auch. z.B. <a> (für das Einfügen von Links) oder <strong> (zum Hervorheben eines Worts in einem Absatz). Das <span>-Tag kann beispielsweise benutzt werden, um einen Firmennamen zu markieren. Anschließend können Sie CSS verwenden, um den Namen mit einer eigenen Schrift, Farbe oder Ähnliches hervorzuheben. Hier ein Beispiel für diese Tags in Aktion, inklusive eines kleinen Ausblicks auf die Attribute id und class, die häufig verwendet werden, um bestimmte Teile einer Seite mit Stildefinitionen zu versehen:

<div id="fusszeile">  <p>Copyright 2009. <span class="firmenname">CosmoFarMer.com</span></p>  <p>Wir sind telefonisch unter der Nummer 555-555-5501 für Sie zu erreichen.</p>  </div>  

Diese Tags werden Ihnen auch außerhalb dieser kurzen Einführung noch häufig begegnen. Besonders in CSS-lastigen Websites werden sie oft und gerne benutzt. Im weiteren Verlauf dieses Kapitels werden Sie lernen, wie Sie diese Tags in Kombination mit CSS verwenden können, um die kreative Kontrolle über Ihre Website voll auszunutzen.

eraser_blue 128

HTML-Code, den Sie am besten vergessen

CSS vereinfacht das Schreiben von HTML aus einem wichtigen Grund: Sie brauchen keine Berge von Tags und Attributen mehr, um Ihre Seiten besser aussehen zu lassen. Das <font>-Tag ist hierfür das strahlendste Beispiel. Sein einziger Zweck besteht darin, Farbe, Größe und Schrift eines Texts festzulegen. Zum Verständnis der Seitenstruktur trägt er jedoch überhaupt nicht bei.

Hier eine Liste der Tags und Attribute, die Sie einfach durch CSS ersetzen können:

  • Die Verwendung des <font>-Tag für die Darstellung von Text gehört auf den Müll. CSS kann wesentlich besser (und vielfältiger) mit Text umgehen.
  • Hören Sie damit auf, <b> und <i> zu benutzen, um Text fett oder kursiv darzustellen. Mit CSS können Sie jedes Tag fett oder kursiv darstellen. Diese formatspezifischen Tags sind also nicht mehr nötig. Wenn Sie dagegen tatsächlich ein bestimmtes Wort oder einen Satz hervorheben wollen, verwenden Sie dafür das <strong>-Tag (das von den meisten Browsern sowieso fett dargestellt wird). Sollen Textteile nur leicht hervorgehoben werden, verwenden Sie <em> (für eng!. emphasis – Betonung). Die meisten Browser stellen Text innerhalb dieser Tags kursiv dar.

Info

Soll der Titel einer Publikation kursiv dargestellt werden, schlägt das <cite>-Tag zwei Fliegen mit einer Klappe. Der Titel wird kursiv dargestellt, und der Text wird als Zitat gekennzeichnet, was wiederum die Suchmaschinen freut. Dieses Tag sollten Sie sich merken.

  • Verwenden Sie für Seitenlayouts auch nicht mehr das <table>-Tag! Benutzen Sie es nur, um tatsächlich tabellarische Informationen darzustellen, z.B. Daten aus einer Tabellenkalkulation, die Bundesligatabelle, eine Aufstellung der günstigsten Telefonanbieter mit Zeiten und Preisen usw. Sie können Ihr gesamtes Seitenlayout mit CSS erstellen, und das Ganze noch in wesentlich kürzerer Zeit als mit „<table>-dance“.
  • Eliminieren Sie die unbeholfenen Attribute für das <body>-Tag, die sich nur auf die Präsentation Ihres Inhalts auswirken; background, bgcolor, text, link, alink und vlink legen Farben und Hintergrundbilder für Seite, Text und Links fest. Mit CSS lässt sich die Aufgabe wesentlich besser bewältigen. Und wenn Sie schon dabei sind, trennen Sie sich auch gleich von den browserspezifischen Attributen für die Seitenränder: leftmargin, topmargin, marginwidth und marginheight. Auch hier ist CSS deutlich im Vorteil.
  • Missbrauchen Sie keine <br />-Tags. Wenn Sie damit aufgewachsen sind, das <br />-Tag zu verwenden (<br> in HTML), um innerhalb von Absätzen Zeilenumbrüche herbeizuführen, haben wir etwas Besonderes für Sie. (Browser fügen automatisch und oftmals zum Ärger des Webdesigners einen gewissen Leerraum zwischen Absätzen, aber auch zwischen Absätzen und <p>-Tags ein. In der Vergangenheit haben Webdesigner ausgeklügelte Methoden entwickelt, um das Erzeugen dieser automatischen Zwischenräume zwischen den <p>-Tags zu umgehen. Sie benutzten mehrere <br />-Tags hintereinander und drehten dann per <font> die erste Zeile so sehr durch die Mangel, dass sie aussah wie eine überschrift.) CSS hält eine Reihe von Möglichkeiten bereit, Innen- wie Außenabstände genau einzustellen – und zwar nicht nur für Absätze, sondern auch für andere Block-Elemente wie beispielsweise Überschriften.

Allgemein gilt: Sämtliche Tag-Attribute für die Definition von Farben, Rahmen, Hintergrundbildern oder die Ausrichtung (das gilt auch für Tabellen) gelten komplett als veraltet und sollten nicht mehr benutzt werden. Das Gleiche gilt für die Ausrichtung von Bildern (z.B. align=left) und das Zentrieren von Text innerhalb eines Absatzes (z.B. align=center oder noch schlimmer: <center> und von Tabellenzellen. Für alle diese Aufgaben bietet CSS einen mehr als angemessenen Ersatz.

Ein paar Tipps für unterwegs

Es ist immer gut, eine Karte zu haben, wenn man sich nicht auskennt. Wenn Sie sich immer noch nicht sicher sind, wie Sie HTML zum Erstellen gut strukturierter Webseiten verwenden können, haben wir hier ein paar Tipps, die Sie auf den Weg bringen sollen:

html_code_optimieren_02

  • Verwenden Sie immer nur ein <hl>-Tag pro Seite und nehmen Sie es nur dafür, um damit das Hauptthema der Seite zu kennzeichnen. Stellen Sie es sich als eine Art Kapitelüberschrift vor. Die korrekte Verwendung von <hl> trägt dazu bei, dass die Seite korrekt von Suchmaschinen indiziert werden kann.
  • Verwenden Sie Überschriften, um wichtige Textstellen zu markieren. Stellen Sie sich vor, Sie wollten Ihr Kapitel in Abschnitte unterteilen. Wenn zwei Überschriften das gleiche Gewicht haben, werden sie mit Tags der gleichen Ebene gekennzeichnet <h2>, <h3> usw.). Ist eine Überschrift weniger wichtig oder steht sie für ein Unterthema, verwenden Sie eine Überschrift der nächsten Hierarchieebene: Auf <h2> folgt <h3> usw. Andersherum sollte <h5> nicht direkt auf ein <h2>-Tag folgen.
  • Verwenden Sie das <p>-Tag nur für Absätze. (Schließlich steht das p für „paragraph“, also das englische Wort für Absatz.)
  • Verwenden Sie ungeordnete Listen (<ul>), wenn Sie eine Liste mit verwandten Dingen erstellen wollen, z.B. Navigationslinks, Überschriften oder eine Aufzählung mit Tipps wie diese.
  • Nehmen Sie stattdessen nummerierte Listen (<ol>), um die Listenelemente in einerbestimmten Reihenfolge darzustellen, wie z.B. „Die 10 schlimmsten Schlager der Weltgeschichte“ oder „25 Dinge, die Sie nicht bei Schwerelosigkeit tun sollten“.
  • Um ein Glossar mit Begriffen und deren Definitionen zu erstellen, ist das <dl>-Tag (definition list) zusammen mit den Tags <dt> (definition term – zu definierender Begriff) und <dd> (Definition) am besten geeignet.
  • Für ein besonderes Stück Text oder ein Zitat (z.B. eine Filmkritik oder einen weisen Ausspruch Ihres Großvaters) eignet sich das <blockquote>-Tag am besten. Kurze (einzeilige) Abschnitte markieren Sie dagegen mit dem <q>-Tag.
  • Nutzen Sie auch weniger bekannte Tags wie <cite>, mit denen Sie Buchtitel, Zeitschriftenartikel oder Referenzen auf andere Websites markieren können, und <address>, um Kontaktinformationen zum Autor einer Seite zu kennzeichnen (besonders in Copyright-Hinweisen).
  • Wie schon bereits besprochen, sollten Sie sich von allen Tags und Attributen fernhalten, die nur dafür da sind, das Erscheinungsbild von Text oder Bildern zu verändern. Wie Sie sehen werden, kann CSS das auch – nur viel besser.
  • Wenn es einmal kein HTML-Tag gibt, das Ihren Inhalt genau beschreibt, Sie aber ein oder mehrere Seitenelemente markieren wollen, können Sie dies mit den Tags <div> und <span> tun.
  • Denken Sie immer daran, dass Tags bis auf wenige Ausnahmen paarweise auftreten. Ein öffnendes <p> benötigt immer auch ein schließendes </p>. Andere Tags „schließen sich selbst“, wie z.B. <br /> und <img />.
  • Gewöhnen Sie sich an, Ihre Seiten prinzipiell mit dem W3C-Validator zu überprüfen. Schlecht geschriebener oder mit Tippfehlern versetzter HTML-Code kann zu unvorhersehbarem Browserverhalten führen.

discover 128

Die Bedeutung der Dokumenttyp-Definition

Wie schon besprochen, folgt HTML bestimmten Regeln. Diese Regeln stehen in einer Dokumenttyp-Definition kurz: DTD. Bei der DTD handelt es sich um eine einfache, im Internet verfügbare Datei im XML-Format, die beschreibt, welche Tags, Attribute und Werte für bestimmte Arten von (X)HTML gültig sind. Für jede HTML-Version gibt es eine eigene DTD. Möglicherweise fragen Sie sich jetzt, was das alles mit CSS zu tun hat.

Die Antwort lautet: „Alles!“, jedenfalls wenn Sie wollen, dass Ihre Webseiten korrekt und unabhängig vom verwendeten Browser konsistent dargestellt werden. Damit der Browser „weiß“, welche HTML- oder XHTML-Version Sie verwenden, wird am Anfang einer Webseite eine sogenannte Dokumenttyp-Deklaration eingefügt. Sie ist die erste Zeile einer HTML-Datei. Neben Informationen über die verwendete HTML-Version (z.B. HTML 4.01 Transitional) kann sie auch einen Verweis auf die die entsprechende DTD-Datei im Web enthalten. Ein Tippfehler in der Dokumenttyp-Deklaration versetzt einige Browser in einen speziellen Zustand, der als Quirles-Modus („Macken-Modus“) bezeichnet wird.

Dieser Quirks-Modus ist der Versuch der Browserhersteller, Ihre Programme dazu zu bringen, Webseiten so darzustellen,

wie es die Browser ungefahr 1999 (zu Zeiten von Netscape 4 und Internet Explorer 5) getan haben. Stößt ein moderner Browser auf eine Seite mit fehlendem oder fehlerhaften Dokumenttyp-Angaben, denkt er sich: „Hmmm. Diese Seite scheint ziemlich alt zu sein. Ich will doch mal versuchen, ob ich sie nicht so darstellen kann, wie es die verquasten Browser von damals getan haben.“ Aus diesem Grund werden Ihre liebevoll mit CSS gestalteten Seiten auch ohne korrekten Dokumenttyp nicht so aussehen, wie sie es gemäß den aktuellen Standards eigentlich sollten. Möglicherweise betrachten Sie eine Webseite bei der Überprüfung in einem Browser versehentlich im Quirks-Modus. Dann kann es passieren, dass Sie einen fehlerhaften Dokumenttyp womöglich für Fehler in Ihrem HTML– oder CSS-Code halten und versuchen, Probleme zu lösen, die gar keine sind.

Info

Glücklicherweise gibt es eine einfache Methode, den richtigen Dokumenttyp zu verwenden. Hierfür müssen Sie nur wissen, welche (X)HTML-Version Sie benutzen. Mit größter Wahrscheinlichkeit haben Sie bereits Webseiten mit HTML 4 erstellt. Möglicherweise nehmen Sie sogar schon XHTML für Ihre Site.

Die beliebtesten HTML- und XHTML-Versionen sind heutzutage HTML 4.01 Transitional und XHTML 1.0 Transitional. Mit diesen Versionen sind Tags für die Präsentation wie <font> weiterhin zugelassen. Sie erlauben einen übergang (engl. transition) von älteren HTML-Versionen zu den neueren und strengeren HTML- und XHTML-Varianten. Auch wenn es – wie Sie inzwischen wissen sollten – besser ist, diese Tags überhaupt nicht benutzen, sind sie in den Transitional-Versionen noch erlaubt. Sie können die Umstellungen also in Ihrem eigenen Tempo vornehmen. In den strikten (X)HTML-Versionen funktionieren einige der älteren Tags überhaupt nicht mehr.

Info

Allgemein verbieten die strikten Versionen von HTML und XHTML Tags und Attribute, die nur das Aussehen von Seiten verändern, wie das notorische <font>-Tag oder das align-Attribut für Absätze (z.B. <p align="center">. Außerdem sind verschiedene, früher einmal beliebte Eigenschaften wie das target-Attribut für Links (zum Öffnen von Links in einem neuen Browsertenster) nicht mehr erlaubt.

Wenn Sie HTML 4.01 Transitional verwenden, muss die folgende Dokumenttyp-Deklaration am Anfang jeder von Ihnen erstellten Seite stehen:

<!OOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/htm14/1oose.dtd">  

Die Dokumenttyp-Deklaration für XHTML 1.0 Transitional ist ähnlich, verweist aber auf eine andere DTD. Es ist außerdem empfehlenswert, das öffnende <html>-Tag mit ein paar zusätzlichen Informationen zu den im Dokument verwendeten Sprachen zu versehen:

<!OOCTYPE html PUBlIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="de">  

Info

Auch wenn diese Erläuterungen bei Ihnen eher für Kopfschmerzen und langsam zufallende Augen sorgen, sollten Sie auf jeden Fall darauf achten, den richtigen Dokumenttyp anzugeben und diese Angabe immer in die erste Zeile in Ihre (X)HTML-Dokumente (noch vor dem öffuenden <html>-Tag) zu schreiben. Es ist empfehlenswert, eine leere HTML-Seite mit den korrekten Dokumenttyp-Deklarationen auf Ihrem Computer bereitzuhalten. Auf diese Weise können Sie schnell eine Kopie machen, wenn Sie eine neue Seite erstellen wollen.

Info

Die meisten visuellen Programme zum Erstellen von Webseiten, wie Dreamweaver, Golive und der FrontPage-Nachfolger Microsoft Expression, togen automatisch die korrekte Dokumenttyp-Deklaration in neu erstellte Webseiten ein. Viele HTML-fähige Texteditoren besitzen ebenfalls Abkürzungen zum Hinzufügen von Dokumenttyp-Deklarationen.

Je komplexer Ihre Stildefinitionen werden, desto mehr fragen Sie sich vermutlich, wie ein Seitenelement trotz scheinbar widersprüchlicher Anweisungen das korrekte Aussehen erhält. Wie im vorigen Kapitel besprochen, sorgt die Möglichkeit der Vererbung in CSS dafür, dass ein Tag bestimmte Eigenschaftswerte von den umgebenden Tags erhen kann. So kann das <body>-Tag Formatierungen an einen enthaltenen Absatz weitergeben, und der Absatz gibt diese Anweisungen an einen enthaltenen Link weiter. Das heißt aber auch, dass der Link CSS-Eigenschaftswerte sowohl vom <body> – als auch vom <p>-Tag erben kann. Ohne weitere Anweisungen würde diese Möglichkeit zu einer Art „Die Fliege“-Effekt führen, der auf unvorhersehbare Weise Teile aus beiden CSS-Regeln miteinander kombiniert.

Manchmal kommt es aber auch vor, dass in mehreren Stilregeln für das gleiche HTML-Element unterschiedliche Werte für die gleiche Eigenschaft definiert werden (beispielsweise wenn in einem externen und einem internen Stylesheet unterschiedliche Schriftfarben für das <p>-Tag festgelegt werden). In solchen Fällen können recht seltsame Dinge passieren, etwa dass Text hellblau dargestellt wird, obwohl Sie in einer CSS-Klasse ausdrücklich eine rote Textfarbe zugewiesen haben. Tatsächlich sehen Sie hier ein grundsätzliches CSS-Prinzip bei der Arbeit: die Kaskade, von der die Cascading Style Sheets übrigens ihren Namen haben. Sie bestimmt, wie die verschiedenen Stildefinitionen zusammenwirken und welche Stile bei einem Konflikt vor anderen Vorrang (Präzedenz) bekommen.

Info

In diesem Kapitel geht es um Probleme bei der Erstellung komplexer Stylesheets, die stark von der Vererbung und zusammengesetzten Selektoren, wie z.B. mehreren verschachtelten Nachfahren-Selektoren, Gebrauch machen. Die Regeln sind zwar logisch, aber ungefähr so interessant und spannend wie die Gelben Seiten.

Wie Stile kaskadiert werden

Die Kaskade ist eine Reihe von Regeln, die festlegen, welche CSS-Eigenschaften (und deren Werte) auf ein bestimmtes HTML-Element angewandt werden. Sie legt fest, wie Webbrowser mit unterschiedlichen Eigenschaftswerten für das gleiche Tag umgehen sollen und was zu tun ist, wenn CSS-Eigenschaften sich gegenseitig in die Quere kommen. Für Stilkonflikte gibt es zwei mögliche Ursachen: wenn durch Vererbung die gleiche Eigenschaft von verschiedenen Vorfahren geerbt wird und wenn mehrere Stilregeln auf das gleiche Element zutreffen (z.B. wenn es in einem externen und in einem internen Stylesheet eine Regel für <p>-Tags gibt.)

clipboard 128

Vererbte Stile werden zusammengefasst

Wie Sie aus dem letzten Kapitel wissen, sorgt die Vererbung von CSS dafür, dass verwandte Elemente, etwa alle Wörter eines Absatzes inklusive Links oder anderer enthaltener Tags, gleich formatiert werden können. Auf diese Weise bleibt es Ihnen erspart, für jedes Tag einer Seite separate Stilregeln defmieren müssen. Da ein Tag seine Eigenschaften aber von allen Vorfahren erben kann, ist es gelegentlich nicht ganz einfach zu ermitteln, warum ein Tag eine bestimmte Formatierung erhält. Stellen Sie sich beispielsweise vor, für das <body>-Tag wird eine bestimmte Schriftart festgelegt, für <p>-Tags eine Schriftgröße und für <a>-Tags eine Schriftfarbe. Jedes <a>-Tag würde also die Schriftart vom <body>-Tag erben, die Schriftgröße jedoch vom <p>-Tag. Die endgültige Darstellung des <a>-Tags ist eine Art Hybridstil – eine Kombination aus den von den Vorfahren-Elementen geerbten Stile.

Die in Abbildung gezeigte Seite enthält drei Stildefinitionen: eine für <body>, eine für das <p>-Tag und eine für <strong>. Der CSS-Code sieht folgendermaßen aus:

body {  font-family: Verdana, Arial, Helvetica, sans-serif;  }  p {  color: #999999;  }  strong {  font-size: 24px;  }  

Das <strong>-Tag befindet sich innerhalb eines Absatzes, der wiederum vom <body> umgeben wird. Das <strong>-Tag erbt von beiden Vorfahren. Von <body> erhält es die Einstellungen für die Eigenschaft font-family (die Schriftart) und von <p> die mit der Eigenschaft color festgelegte Schriftfarbe. Zusätzlich erhält das <strong>-Tag über die CSS-Eigenschaft font-size eine Schriftgröße von 24 Pixeln zugewiesen. Das endgültige Aussehen des Tags ist eine Kombination aller drei Stildefmitionen. Anders gesagt: Das <strong>-Tag erscheint so, als hätten Sie eine CSS-Regel wie diese definiert:

strong {  font-family: Verdana, Arial, Helvetica, sans-serif;  color: #999999;  font-size: 24px;  }  
kaskade_01

Der nächste Vorfahr gewinnt

Im vorigen Beispiel wurden mehrere vererbte und direkt zugewiesene Eigenschaftswerte zu einer Formatierung zusammengefasst. Was passiert aber, wenn die vererbten Eigenschaftswerte einander widersprechen? Stellen Sie sich eine Seite vor, in der <body> und <p> unterschiedliche Schriftfarben haben. Außerdem befände sich innerhalb des Absatzes ein <strong>-Tag. Welche Schriftfarbe erhält es wohl? Die Farbe für <body> oder die Farbe für den Absatz? Der Gewinner ist hier der Absatz. Gemäß der CSS-Spezifikation verwendet der Webbrowser die Stildefinition, die dem jeweiligen Tag gemäß den Verwandtschaftsverhältnissen im HTML-Baum am nächsten liegt.

In diesem Beispiel sind die vom <body>-Tag geerbten Stile eher allgemeingültig. Sie beziehen sich auf alle Tags. Ein für das <p>-Tag definierter Stil ist dagegen wesentlich spezieller. Die hier verwendeten CSS-Eigenschaften beziehen sich nur auf Absätze und darin enthaltene Tags.

Kurz gesagt: Wenn einem Tag kein eigener Stil zugewiesen wurde, gewinnt bei Konflikten mit geerbten Eigenschaftswerten der nächste Vorfahr.

Um das Konzept zu vertiefen, hier noch ein weiteres Beispiel. Nehmen wir mal an, in einem CSS-Stil wurde eine Textfarbe für das <table>-Tag definiert, und in einer anderen Stildefmition wurde dem <td>-Tag innerhalb der Tabelle eine andere Farbe zugewiesen. In diesem Fall verwenden HTML-Elemente (Absätze, Überschriften, Listen), die sich innerhalb des <td>-Tags befinden, die Farbe von <td>, weil dies der nächste Vorfahre für diese Elemente ist.

kaskade_02

Direkt zugewiesene Stildefinitionen gewinnen

Zieht man aus der „Nächster Vorfahr“-Regel den logischen Schluss, gibt es im CSS-Stammbaum einen ständigen Hauptgewinner: einen Stil, der einem bestimmten Element direkt zugewiesen wurde. Stellen wir uns vor, es wurde für <body>-, <p>– und <strong>-Tags jeweils ein Wert für die Eigenschaft font-color definiert. Zwar ist der Stil für den Absatz spezifischer als der für <body>, allerdings ist der direkt für das <strong>-Tag definierte Stil noch eindeutiger als die anderen beiden und erhält daher den Vorrang. Er wurde ausdrücklich und ausschließlich für <strong>-Tags formuliert, wodurch die vererbten und miteinander konkurrierenden Eigenschaftswerte der Vorfahren-Elemente keine Geltung mehr haben. Einfach gesagt:

CSS-Eigenschaften, die einem HTML-Element ausdrücklich zugewiesen werden, haben vor vererbten Eigenschaften Vorrang.

Diese Regel erklärt auch, warum manche Eigenschaftswerte scheinbar nicht vererbt werden, obwohl sie das eigentlich sollten. Ein Link innerhalb eines Absatzes mit rotem Text wird trotzdem im Standardblau des Browsers dargestellt, weil der Browser eigene, vordefinierte Stilregeln für das <a>-Tag verwendet und so möglicherweise vererbte Werte überschreibt.

font 128

Ein Tag, viele Stile

Vererbung ist nur eine Möglichkeit, wie ein Tag von mehreren Stildefinitionen beeinflusst werden kann. Daneben ist es auch möglich, dass einem Tag mehrere konkurrierende Eigenschaftswerte direkt zugewiesen werden. Dies kann zum Beispiel passieren, wenn für <p>-Tags sowohl ein internes wie auch ein externes Stylesheet unterschiedliche Werte für eine Eigenschaft festlegen. Um die Sache noch interessanter zu machen, wurde einem der <p>-Tags zusätzlich noch eine CSS-Klasse mit weiteren Werten zugewiesen. Dieses Tag besitzt jetzt also drei konkurrierende Stile, die direkt zugewiesen wurden. Für welchen Stil bzw. welche Stile wird der Browser sich entscheiden?

Die Antwort lautet: Das kommt daraufan. Je nachdem, um welche Art von Stildefinition es sich handelt und aus welcher Quelle sie stammt, kann der Browser eine oder mehrere Regeln anwenden. Hier ein paar Situationen, in denen mehrere Stile fur das gleiche Tag zutreffen können:

  • Das Tag wird von einem Typ-Selektor und von einem Klassenselektor ausgewählt. Nehmen wir beispielsweise einen Typ-Selektor für das <h2>-Tag. eine Klasse namens .haupt_ueberschrift und den folgenden HTML-Code: <h2 class="haupt_ueberschrift">Entdecken Sie Ihre Zukunft!</h2>. Hier würden ohne weitere Stile beide Definitionen aufdas <h2>-Tag angewendet.

Info

Wenn Sie sich fragen, was bei konkurrierenden Stilen passiert. haben Sie bitte noch etwas Geduld. Die lösung ist bereits in Sicht.

  • Ein Klassen- oder ID-Name wird im selben Stylesheet mehrmals verwendet. Vielleicht wird eine CSS-Klasse .haupt_ueberschrift neben Ihrer Definition noch mal in einer Gruppe von Selektoren verwendet, wie hier: .haupt_ueberschrift, .sekundaere_ueberschrift, .artikel_ueberschrift. Beide Regeln enthalten Anweisungen für die Darstellung von Elementen, denen die Klasse .haupt_ueberschrift zugewiesen wurde.
  • Einem Tag wurde sowohl ein klassenbasierter als auch ein ID-basierter Stil zugewiesen. Nehmen wir beispielsweise eine ID namens #kopfteil, eine Klasse namens .news und folgenden HTML-Code: <div id="kopfteil" class="news">. In diesem Fall werden sowohl die für kopfteil als auch die für news definierten Stile verwendet.
  • Es gibt mehr als ein Stylesheet, das Stile mit dem gleichen Namen definiert. Stildefinitionen mit dem gleichen Klassen- oder ID-Namen können gleichzeitig in externen wie internen Stylesheets definiert werden.
  • Es gibt komplexe Selektoren. die auf das gleiche Tag zutreffen. Diese Situation kann häufig auftreten, wenn Sie Selektoren für Nachfahren-Elemente verwenden. Das kann beispielsweise der Fall sein, wenn Sie ein <div>-Tag verwenden und sich darin ein Absatz mit einem class-Attribut befindet, z.B. <p class="autor">. Die folgenden Selektoren können Stile für diesen Absatz definieren:
  • #hauptteil p
  • #hauptteil p.autor
  • p.autor
  • .autor

Werden mehrere Stile für das gleiche Element definiert, kombiniert der Webbrowser die einzelnen Anweisungen, sofern es keinen Konflikt gibt. Ein Beispiel soll dieses Konzept verdeutlichen. Stellen Sie sich vor, Ihre Webseite enthält einen Absatz mit dem Namen des Autors inklusive Link und E-Mail-Adresse. Der HTML-Code könnte in etwa so aussehen:

<p class="autor">Geschrieben von <a href="mailto:jean@cosmofarmer.com">Jean Graine de Pomme</a></p>  

Das Stylesheet enthält drei Regeln. die den Link formatieren:

a {  color: #6378df;  }  p a {  font-weight: bold  }  .autor a {  text-decoration: none;  }  

Die erste Regel färbt alle <a>-Tags hellblau (in der Webfarbe „powder blue„) ein, die zweite Regel legt fest, dass alle <a>-Tags innerhalb von <p>-Tags fett dargestellt werden sollen, und die dritte Regel entfernt die standardmäßigen Unterstreichungen für Links, die sich innerhalb von Tags mit der Klasse autor befinden.

Alle drei Regeln gelten für das <a>-Tag. Da in allen drei Regeln unterschiedliche CSS-Eigenschaften benutzt werden, gibt es in diesem Fall keine Konflikte.

Info

Die richtigen Kopfschmerzen fangen erst an, wenn Sie feststellen, dass die Formatierung für den Link auch noch von vererbten Eigenschaftswerten abhängen kann. So würde der Link etwa eine dem umgebenden Absatz zugewiesene Schriftart übernehmen.

help 128

Spezifität: Welcher Stil gewinnt?

Das vorige Beispiel ist leicht zu verstehen. Was passiert aber, wenn die drei Regeln oben für die Eigenschaft font-family unterschiedliche Schriftarten definieren? Welche der drei Schriften würde schließlich im Webbrowser angezeigt?

Wenn Sie dieses Kapitel sorgfaItig gelesen haben, wissen Sie, dass die Kaskade eine Reihe von Vorschriften zur Verfügung stellt, die dem Webbrowser helfen, Konflikte zwischen CSS-Eigenschaften aufzulösen. In erster Linie heißt das: Regeln mit der höchsten Eindeutigkeit (Spezifität) haben Vorrang vor allgemeinen Regeln. Aber manchmal ist nicht klar, welcher Stil am eindeutigsten ist. Glücklicherweise stellt CSS eine Formel bereit, nach der sich die Spezifität einer CSS-Regel bestimmen lässt. Hierbei werden den verschiedenen Selektor-Arten (wie Typ-Selektor, Klassen-Selektor, ID-Selektor usw.) unterschiedlich hohe Werte zugeordnet. Das System funktioniert so:

  • Typ-Selektor: 1 Punkt
  • Klassen-Selektor: 10 Punkte
  • ID-Selektor: 100 Punkte
  • Inline-Stildefinition: 1000 Punkte

Je höher die Zahl, desto höher die Spezifität. Hier ein paar Beispiele:

  • ein Typ-Selektor für das <img>-Tag (Spezifität = 1 )
  • ein Klassen-Selektor mit dem Namen .hervorhebung (Spezifität = 10)
  • ein ID-Selektor namens #logo (Spezifität = 100)

Enthält Ihre Webseite den HTML-Code <img id="logo" class="hervorhebung" src="logo.gif" /> und Sie definieren z.B. für die Eigenschaft border in allen drei CSS-Regeln unterschiedliche Werte, gewinnt immer der Wert des ID-Stils (#logo).

kaskade_03

Info

Pseudoelemente (wie z.B.: first-child) werden wie Typ-Selektoren behandelt und sind demnach einen Punkt wert. Pseudoklassen wie: link werden wie normale Klassen behandelt und erhalten zehn Punkte.

Da Nachfahren-Selektoren aus mehreren einzelnen Selektoren bestehen können (z.B. #inhalt p oder h2 strong), wird die Berechnung etwas komplizierter. Um die Spezifität eines Nachfahren-Selektors zu berechnen, werden die Einzelwerte der enthaltenen Selektoren addiert.

Info

Vererbte Eigenschaften besitzen keine eigene Spezifität. Selbst wenn ein Tag Eigenschaftswerte von einer Regel mit einer höhen Spezifität erbt, z.B. #kopfteil, haben direkt für das Tag definierte Stile auf jeden Fall Vorrang.

Das Zünglein an der Waage: Der zuletzt definierte Stil gewinnt

Um dem Ganzen die Krone aufzusetzen, kann es trotz aller Regeln passieren, dass zwei Eigenschaften die gleiche Spezifität besitzen. Diese spezielle Form der Zwickmühle kann auftreten, wenn der gleiche Selelktor an zwei verschiedenen Stellen im selben Stylesheet defmiert wird oder zwei verschiedene Stile einfach die gleiche Spezifität besitzen. In solchen Fällen gewinnt einfach der zuletzt definierte Stil.

Hier ein kniffliges Beispiel, das den folgenden HTML-Code verwendet:

<p class="autor">Geschrieben von <a class="email" href="mailto:jean@cosmofarmer.com">Jean Graine de Pomme</a></p>  

Das Stylesheet für die Seite mit obigem Absatz und Link enthält die folgenden CSS-Regeln:

p a.email {  color: blue;  }  p.autor a {  color: red;  }  

Beide Stile besitzen eine Spezifität von 12 (jeweils 10 für die Klasse und 2 für die Typ-Selektoren), und beide treffen auf das <a>-Tag zu. Gleichstand. Welche Farbe verwendet der Browser? Die Antwort lautet „Rot“ (red), weil dies die zweite (und letzte) Definition im Stylesheet ist.

Jetzt stellen Sie sichvor, das Stylesheet sähe stattdessen so aus:

p.autor a {  color: red;  }  p a.email {  color: blue;  }  

In diesem Fall würde der Link blau (blue) dargestellt werden. Da p a.email hinter p.autor a steht, gewinnt auch hier die zweite Definition.

Was passiert mit konkurrierenden Regeln in einem externen und einem internen Stylesheet? In diesem Fall ist die Platzierung innerhalb Ihrer Stylesheets (in der HTML-Datei) entscheidend. Wenn Sie zuerst ein internes Stylesheet mittels <style>-Tags definieren und danach ein externes Stylesheet per <link> einbinden, gewinnt die Regel aus dem externen Stylesheet. (Das ist das gleiche Prinzip, das wir gerade besprochen haben: Die zuletzt im Stylesheet definierte Regel gewinnt.) Es ist daher empfehlenswert, externe Stylesheets immer zuerst einzubinden und erst danach die internen Stile zu definieren.

Info

Externe Stylesheets die mit einer @import-Regel eingebunden werden, müssen vor den internen Stildefinitionen zwischen den <style>-Tags stehen.

info_button 128

Die Kaskade unter Kontrolle behalten

Wie Sie sehen, ist die Gefahr, Formatierungsprobleme zu bekommen, abhängig von der Anzahl der erstellten CSS-Stile. Vielleicht schreiben Sie einen klassenbasierten Stil, der eine bestimmte Schriftart und -größe definiert. Wenn Sie die Regel aber auf einen Absatz anwenden, passiert gar nichts! Probleme dieser Art haben normalerweise mit der Kaskade zu tun. Selbst wenn Sie glauben, dass die direkte Zuweisung einer Klasse ausreicht, um ihre Formatierung auf das Tag anzuwenden, kann es immer noch einen Stil mit höherer Spezifität geben.

Dieses Problem lässt sich auf verschiedene Arten umgehen. Zum einen können Sie !important verwenden, um dafür zu sorgen, dass die Eigenschaft immer angewandt wird. Allerdings kann die !important-Methode schnell nach hinten losgehen, weil Sie nicht wissen, ob Sie nicht eines Tages eine !important-Regel überschreiben müssen. Im Folgenden finden Sie zwei weitere Möglichkeiten, die Kaskade auszutricksen.

Die Spezifität ändern

Im oberen Teil sehen Sie ein Beispiel dafür, wie die Regeln für ein bestimmtes Tag trotz recht hoher Spezifität überschrieben werden. Meistens ist es jedoch recht einfach, die Spezifität für eine der Regeln anzupassen. So können Sie sich die !important-Methode für die echten Notfälle sparen. Im oberen Teil gibt es zwei Regeln für den ersten Absatz. Die Klasse .einleitung hat eine geringere Spezifität als #seitenleiste p. Dadurch werden die Eigenschaftswerte von .einleitung nicht auf den Absatz angewendet. Allerdings können Sie die Spezifität des Klassen-Selektors erhöhen, indem Sie die ID des umgebenden Elements einbeziehen: #seitenleiste .einleitung.

Selektives Überschreiben

Die Feinabstimmung für Ihr Design können Sie auch vornehmen, indem Sie die Stile auf bestimmten Seiten selektiv überschreiben. Nehmen wir beispielsweise ein externes Stylesheet namens allgemein.css, das Sie in jede Seite Ihrer Site einbinden. Das Stylesheet enthält die allgemeinen Darstellungsregeln wie Schriftart und -farbe für <h1>-Tags, das Aussehen für Formularelemente usw. Vielleicht sollen die primären Überschriften auf der Homepage aber anders aussehen als auf der übrigen Site, zum Beispiel fetter und größer. Oder der Text in den Absätzen soll auf der Homepage kleiner sein, damit Sie mehr Informationen unterbringen können. Anders gesagt: Die meisten Stildefinitionen sollen aus allgemein.css übernommen werden; für einige Eigenschaften und Tags <h1>, <p> usw.) sollen eigene Einstellungen verwendet werden.

kaskade_04

Eine Möglichkeit ist, einfach ein internes Stylesheet anzulegen, das bestimmte CSS-Regeln aus dem externen Stylesheet überschreibt. Angenommen, allgemein.css enthält die folgende Regel:

h1 {  font-family: Arial, Helvetica, sans-serif;  font-size: 24px;  color: #000;  }  

Dann können Sie das <h1> größer und in roter Schrift darstellen, indem Sie die folgende Regel in das interne Stylesheet der Homepage schreiben:

h1 {  font-size: 36px;  color: red;  }  

Daraufhin wird das <h1>-Tag auf der Homepage in der Schrift Arial (aus dem externen Stylesheet), aber in der Farbe Rot und 36 Pixel groß (aus dem internen Stylesheet) dargestellt.

Info

Stellen Sie sicher, dass das externe Stylesheet im Kopfteil der HTML-Seite vor dem internen Stylesheet eingebunden wird. Hierdurch wird sichergestellt, dass die Stile aus dem internen Stylesheet höher bewertet werden, falls die Spezifität zweier Stile einmal gleich sein sollte.

Eine weitere Möglichkeit besteht darin, ein zusätzliches externes Stylesheet anzulegen, z.B. startseite.css. Diese Datei enthält die Namen der Stile und Eigenschaften, die Sie überschreiben wollen. Damit diese Methode funktioniert, muss startseite.css nach allgemein.css in die HTML-Seite eingebunden werden, wie hier gezeigt:

link rel="stylesheet" type="text/css" href="css/allgemein.css">  link rel="stylesheet" type="text/css" href="css/startseite.css">  

Oder Sie verwenden @import:

<style type="text/css">  @import url(css/allgemein.css);  @import url(css/startseite.css);  </style>  

Info

Außerdem können Sie Ihr Design seitenweise anpassen, indem Sie den <body>-Tags der einzelnen Seiten spezielle IDs zuweisen, z.B. <body id="startseite">, <body id="kontakt"> usw. Mithilfe von Nachfahren-Selektoren (z.B. #5tartseite .hauptteil h1) können Sie dann das Aussehen der einzelnen Tags einer bestimmten Seiten anpassen.

Jede CSS-Stildefinition besteht aus zwei Teilen: einem Selektor und einem Deklarationsblock. Der Deklarationsblock enthält die Formatierungsanweisungen, wie Textfarbe, Schriftgröße usw. Das ist aber nur die eine Hälfte. Die eigentliche Magie von CSS liegt in den Zeichen links von der öffnenden geschweiften Klammer – den Selektoren. Erst indem Sie CSS mithilfe der Selektoren sagen, was formatiert werden soll, erhalten Sie die vollständige Kontrolle über das Aussehen Ihrer Seite. Wenn Sie gern verallgemeinern, können Sie einen Selelktor benutzen, der sich auf mehrere Seitenelemente gleichzeitig auswirkt. Für Leute, die sich lieber auf die Details konzentrieren, gibt es ebenfalls spezielle Selektoren, mit denen Sie ein bestimmtes Element oder eine Reihe ähnlicher Elemente auswählen können. CSS-Selektoren geben Ihnen die Kontrolle. Den richtigen Gebrauch lernen Sie in diesem Kapitel.

selektoren_grundlagen_01

Typ-Selektoren: Stile für die ganze Seite

Typ-Selektoren (auch Element- oder Tag-Selektoren genannt) sind äußerst effiziente Werkzeuge für die Definition von Stilen, da sie sich auf jedes Vorkommen eines bestimmten HTML-Tags einer Seite auswirken. Mit Typ-Selektoren können Sie mit äußerst geringem Aufwand umfassende Änderungen an einer oder mehreren Seiten vornehmen. Sollen beispielsweise alle Absätze die gleiche Schrift, Schriftfarbe und -größe haben, reicht es, eine Regel zu erstellen, die den p-Selektor (analog zum <p>-Tag) verwendet. Man kann sagen, der Typ-Selektor legt fest, wie der Browser ein bestimmtes Tag darstellen soll (daher der alternative Name).

Bevor es CSS gab, mussten Sie den zu formatierenden Text mit <font>-Tags umgeben. Um jedem Absatz das gleiche Aussehen zu verleihen, musste <font> teilweise mehrere Hundert Male pro Webseite benutzt werden. Das war nicht nur eine Menge Arbeit, sondern erhöhte durch den zusätzlichen HTML-Code auch die Ladezeit der Seiten. Bei der Verwendung von Typ-Selektoren brauchen Sie überhaupt keine Änderungen am HTML-Code vorzunehmen – erstellen Sie einfach eine CSS-Regel und lassen Sie den Browser den Rest für Sie erledigen.

Typ-Selektoren sind in einer CSS-Regel leicht zu erkennen, da sie nach dem HTML-Tag benannt sind,

auf das sie angewendet werden sollen: p, h1, table, img usw.

Typ-Selektoren haben aber auch gewisse Nachteile. Wie sollen Sie vorgehen, wenn einige Absätze eine eigene Formatierung erhalten sollen, die von der Standarddefinition abweicht? Ein einfacher Typ-Selektor funktioniert hier nicht, weil der Webbrowser nicht zwischen den einzelnen <p>-Tags unterscheiden kann. Er weiß nicht, welche Absätze in Lila und fett gedruckter großer Schrift hervorgehoben werden sollen und welche die schwarze Standardschrift behalten sollen. Glücklicherweise hat CSS auch hierfür eine Lösung: Klassen-Selektoren, die im folgenden Abschnitt beschrieben werden.

check 128

Klassen-Selektoren: zielgenaue Kontrolle

Wenn Sie nicht wollen, dass jedes Vorkommen eines Absatzes oder einer Überschrift gleich dargestellt wird, können Sie in CSS den sogenannten Klassen-Selektor (dessen Namen Sie frei wählen können) verwenden und damit spezielle Regeln für bestimmte Teile des HTML-Codes festlegen. Möglich wäre beispielsweise eine Klasse mit dem Namen .copyright, die nur für den Absatz gilt, der den Copyright- Hinweis enthält, ohne dass andere Absätze hiervon betroffen wären.

selektoren_grundlagen_02

Mit Klassen-Selektoren können Sie unabhängig vom Tag spezielle Regeln für einzelne HTML-Elemente definieren. Soll beispielsweise nicht das gesamte <p>-Tag verändert werden, sondern nur ein bestimmter Satz darin, können Sie diesen über einen Klassen-Selektor separat gestalten, Sie können mit dem Klassen-Selektor sogar mehrere Elemente ansprechen, die in unterschiedlichen HTML-Tags stehen. Auf diese Weise können z.B. für Absätze und sekundäre überschriften „h2“ gemeinsame Regeln festgelegt werden, beispielsweise die Farbe und eine bestimmte Schrift, mit der Sie spezielle Informationen hervorheben wollen. Im Gegensatz zu den Einschränkungen der HTML-Tags können Sie so viele Klassen-Selektoren erstellen, wie Sie wollen, und Sie an beliebigen Stellen in Ihrer Seite einsetzen.

selektoren_grundlagen_03

Info

Wenn Sie nur ein paar Wörter innerhalb eines anderen Tags mit einem Klassen-Selektor ansprechen wollen, brauchen Sie die Hilfe des <span>-Tags.

Möglicherweise haben Sie schon bemerkt, dass dem Namen von Klassen-Selektoren immer ein Punkt (.) vorangestellt wird, wie etwa bei .copyright oder .spezial. Dies ist eine der folgenden Regeln, die Sie bei der Benenung einer Klasse beachten müssen:

  • Sämtliche Klassen-Selektoren müssen mit einem Punkt beginnen. Auf diese Weise können Webbrowser Klassen-Selektoren von anderen Selektoren in Ihrem Stylesheet unterscheiden.
  • Die Namen von CSS-Klassen dürfen nur aus Buchstaben (A bis Z, a bis z, keine Umlaute usw.), Bindestrichen (-) und Unterstrichen _) bestehen.
  • Nach dem Punkt muss der Name prinzipiell mit einem Buchstaben beginnen. Dinge wie ._zwei-und-vierzig, .-42 oder .42-ist-die-antwort funktionieren also nicht. Schreiben Sie dagegen .die-antwort-ist_42, ist alles in Ordnung.
  • Bei Klassennamen wird zwischen Groß- und Kleinschreibung unterschieden. CSS sieht .SEITENLEISTE und .seitenleiste als zwei unterschiedliche Klassennamen an.

Abgesehen von den Namensregeln verwenden Sie Klassen-Selektoren auf die gleiche Weise wie Typ-Selektoren. Schreiben hinter den Selektor einfach einen Deklarationsblock, der sämtliche Stildefinitionen enthalten kann, die Sie wünschen:

.spezial {  color: #FFOOOO;  font-family:"Monotype Corsiva";  }  

Da mit Typ-Selektoren definierte Stilregeln auf alle Tags einer Webseite anwendbar sind, brauchen Sie diese nur im Kopfteil einer Seite (oder in einem externen Stylesheet) zu defmieren – die dafür benötigten HTML-Tags sind ja schon da. Die zusätzliche Freiheit bei der Verwendung von Klassen-Selektoren bedeutet etwas mehr Arbeit und geschieht in zwei Schritten: Nachdem Sie die Regel erstellt haben, müssen Sie angeben, worauf diese Regeln angewendet werden sollen. Hierfür erweitern Sie das HTML-Tag, das formatiert werden soll, um ein class-Attribut.

Nehmen wir einmal an, Sie haben die Klasse .spezial erzeugt, um damit bestimtme Seitenelemente hervorzuheben. Um diesen Stil auf einen bestimmten Absatz anzuwenden, versehen Sie dessen <p>-Tag mit folgendem class-Attribut:

<p class="spezial">  

Info

Im HTML-Code wird der Klassenname ohne vorangestellten Punkt geschrieben. Der Punkt wird nur benötigt, damit CSS die Klasse von anderen Selektoren unterscheiden kann.

Sieht ein Webbrowser dieses Tag, weiß er, dass die Formatierungsregeln der .spezial-Definition auf den markierten Absatz angewendet werden sollen. Wenn Sie das <span>-Tag verwenden, können Sie eine CSS-Klasse auch nur auf Teile eines Absatzes, einer Überschrift oder was auch immer anwenden.

Sobald Sie eine klassenbasierte Stildefinition erstellt haben, können Sie diese auf jedes beliebige Tag

der Seite(n) anwenden. Auch wenn Ihnen damit fast grenzenlose Gestaltungsmöglichkeiten zur Verfügung stehen, sind Klassen nicht immer das beste Mittel nur ein CSS-basiertes Seitenlayout. Und hier kommt der ID-Selektor ins Spiel. Mit ihm können Sie eine Formatierungsregel festlegen, die auf jeder Seite immer nur genau einmal verwendet werden darf, wie im folgenden Abschnitt beschrieben.

lock 128

ID-Selektoren: Regeln für ein bestimmtes Seitenelement

In CSS ist der ID-Selektor für die Identifizierung eines bestimmten Teil seiner Seite reserviert. Dies kann beispielsweise ein Logo sein, eine Navigationsleiste oder auch der Hauptteil. Er darf nur einmal benutzt werden und kann auf diese Weise ein Element eindeutig identifizieren. Die Folge ist, dass der ID-Selektor pro HTML-Seite immer nur einmal verwendet werden kann. Anstelle eines Punkts wird dem Namen im Stylesheet ein Doppelkreuz (#) vorangestellt. Davon abgesehen, funktioniert ein ID-Selektor analog zum Klassen-Selektor. Wie schon beschrieben wurde, kommen ID-Selektoren speziell bei bestimmten JavaScriptbasierten oder sehr langen HTML-Seiten zum Einsatz. Aber darüber hinaus gibt es nur wenige Gründe, ID-Selektoren anstelle von Klassen zu benutzen.

Die folgenden Faustregeln können als Entscheidungshilfen dienen, ob eine Klasse oder eine ID verwendet werden soll:

  • Soll eine Stildefinition mehr als einmal auf einer Seite benutzt werden, müssen Sie Klassen verwenden, z.B. wenn Ihre Seite mehrere Fotos enthält, die alle mit dem gleichen Rahmenversehen werden sollen.
  • Verwenden Sie IDs, um verschiedenen Teile einer Seite zu markieren, die nur einmal pro Seite vorkommen. CSS-basierte Layouts verwenden oftmals IDs, um einmalige Teile einer Seite zu markieren, etwa eine Seitenleiste oder eine Fußzeile.
  • Gelegentlich können Sie ID-Selektoren verwenden, um Probleme zu umgehen, da Webbrowser den Anweisungen in ID-Selektoren eine höhere Priorität einräumen als Klassen-Selektoren. Wurden für ein Tag z.B. in einem Klassen- und in einem ID-Selektor unterschiedliche Hintergrundfarben definiert, gewinnt der ID-Selektor.

Info

Obwohl IDs auf einer HTML-Seite nur einmal vorkommen sollen, werden beim Browser nicht gleich die Alarmsirenen heulen, weil Sie versehentlich die gleiche 10 an zwei Tags vergeben haben. Die meisten Browser stellen in solchen Fällen beide Tags mit den gleichen Stilen dar. Allerdings sollten Sie sich nicht wundern, dass Ihr HTML-Code in diesem Fall nicht validiert und Ihre Webdesignerfreunde plötzlich nicht mehr mit Ihnen sprechen.

ID-Selektoren sind genauso einfach zu benutzen wie Klassen-Selektoren. Anstelle des Punkts verwenden Sie für ID-Selektoren einfach ein Doppelkreuz (#) vor dem Namen der ID. Davon abgesehen, gelten die gleichen Namensregeln für die Benennung wie bei Klassen. Dieses Beispiel definiert Hintergrundfarbe, Breite und Höhe für das HTML-Element mit der ID kopfteil:

#kopfteil {  background: #CCOOOO;  height: 300px;  width: 720px;  }  

Die Verwendung der IDs im HTML-Code ist ebenfalls der von Klassen ähnlich. Allerdings kommt anstelle von dass hier logischerweise das Attribut id zum Einsatz. Soll beispielsweise der letzte Absatz einer Seite als Copyright-Vermerk dienen, können Sie eine Stildefinition für #copyright anlegen und sie wie hier gezeigt dem <p>-Tag zuweisen:

<p id="copyright">  

Info

Wie bei klassenbasierten Stilen wird das entsprechende Symbol (# nur im StyIesheet, nicht aber im ID-Anribut des HTML Codes verwendet – wie hier: <div id="kopfteil">.

Stildefinitionen für verschachteHe Tags

Die Entscheidung, ob Sie die Stildefinitionen für Ihre Seite mit Typ-Selektoren oder mit Klassen-Selektoren vornehmen, ist nicht immer einfach. Typ-Selektoren sind schnell und einfach zu benutzen, aber sie lassen jedes Vorkommen eines Tags gleich aussehen. Das kann durchaus gewünscht sein. Klassen- und ID-Selektoren geben Ihnen dagegen die Flexibilität, die einzelnen Seitenelemente individuell zu gestalten. Allerdings bedeutet das Anlegen eigener Stilregeln für die Hintergrundfarbe einer einzigen Überschrift zusätzliche Arbeit – und HTML-Code. Sie bräuchten eine Möglichkeit, die Einfachheit von Typ-Selektoren mit der Präzision von Klassen und IDs zu kombinieren. Wie sich zeigt, besitzt CSS auch hierfür eine Lösung: Nachfahren-Selektoren (auch Kontext-Selektoren genannt).

Mithilfe von Nachfahren-Selektoren können Sie mehrere Tags gleichzeitig mit denselben Stildefinitionen versorgen

(wie mit Typ-Selektoren), aber nur, wenn sie sich an einer bestimmten Stelle der Webseite befmden. Das ist, als würden Sie sagen: „He du, <a>-Tag in der Navigationsleiste, ich habe hier ein paar Formatierungen für dich. Alle anderen <a>-Tags bitte weitergehen, hier gibt es nichts zu sehen.“

Mit Nachfahren-Selektoren können Sie ein Tag basierend auf seinem Kontext zu anderen Tags formatieren (daher der alternative Name Kontext-Selektor). Um zu verstehen, was hier vor sich geht, müssen wir uns den HTML-Code etwas genauer ansehen. Das Gute daran ist, dass Ihnen das Verständnis der Funktionsweise von Nachfahren-Selektoren hilft, auch gleich eine Reihe anderer Selektor-Typen zu verstehen, die wir später in diesem Kapitel behandeln.

font 128

Der HTML-Stammbaum

Der HTML-Code, aus dem jede Webseite besteht, hat eine gewisse Ähnlichkeit mit einem Familienstammbaum, bei dem die HTML-Tags den einzelnen Familienmitgliedern entsprechen. Das erste HTML-Tag einer Seite, <html>, ist quasi der Uropa aller anderen Tags. Das <htm> umgibt die <head>-und <body>-Tags. Damit gilt <html> als Vorfahren-Element für die anderen beiden. Andersherum werden <head> und <body> als Nachfahren-Elemente von <htm> bezeichnet. Das <title>-Tag ist seinerseits ein Nachfahre von <head>, aber gleichzeitig auch von <html>

<html>  <head>  <title>Ein einfaches Dokument</title>  </head>  <body>  <h1>Oberschrift</h1>  <p>Ein Absatz mit etwas <strong>wichtigem</strong>Text.</p>  </body>  </html>  

Wenn Sie diesen HTML-Code betrachten, werden die verwandtschaftlichen Verhältnisse der Tags schnell klar. Das <html>-Tag hat zwei Nachkommen: <head> und <body>. Diese beiden Tags enthalten wiederum andere Tags, die ihrerseits weitere Tags enthalten können. Diese Art von Diagramm lässt sich für jede Webseite erstellen.

selektoren_grundlagen_04

Baumdiagramme wie dieses können dabei helfen, die Beziehungen der Elemente einer Seite leichter zu verstehen.

Viele in diesem Kapitel behandelten Selektoren, inklusive der Nachfahren-Selektoren, basieren auf diesen Beziehungen. Die wichtigsten Beziehungen sind:

  • Vorfahren-Element. Wie bereits zu Beginn dieses Abschnitts erklärt wurde, werden HTML-Tags, die andere Tags enthalten, als deren Vorfahren-Elemente bezeichnet. Das <html>-Tag ist der Vorfahre aller anderen Tags, während <body> der Vorfahre sämtlicher in ihm enthaltenen Tags ist, in unserem Beispiel <h1>, <p> und <strong>.
  • Nachfahren-Element. Ein Tag, das sich innerhalb eines oder mehrerer anderer Tags befindet, bezeichnet man als Nachfahren-Element. Das <body>-Tag ist ein Nachfahre von <html>, während das <title>-Tag sowohl von <head> als auch von <html> abstammt.
  • Eltern-Element. Als Eltern-Element bezeichnet man den nächsten direkten Vorfahren eines Elements. Das erste Tag ist immer eine direkte Verbindung zu einem in der Hierarchie tiefer stehenden Tag. Das bedeutet, <html> ist das Eltern-Element für <head> und <body>, aber nicht für die anderen Tags. Außerdem ist <p> das Eltern-Element für das <strong>-Tag.
  • Kind-Element. Der nächste direkte Nachfahre eines Eltern-Elements wird als Kind-Element bezeichnet. Es sind sowohl <h1> als auch <p> Kind-Elemente des <body>-Tags. Das <strong>-Element ist dagegen kein Kind von <body>, sondern von <p>.
  • (Benachbarte) Geschwister-Elemente. Tags, die Kind-Elemente des gleichen Tags sind, werden als Geschwister-Elemente bezeichnet. wie Brüder und Schwestern. In einem HTML-Diagramm stehen Geschwister-Elemente nebeneinander und haben die gleichen Eltern. Es sind <head> und <body> Geschwister, genau wie <h1> und <p>.

Damit ist die Familienidylle in CSS 2.1 glücklicherweise erschöpft. Sie müssen sich also kein Sorgen um Onkel, Tanten oder entfernte Cousinen dritten Grades machen. (Es gibt allerdings Gerüchte. dass CSS 10 auch Schwiegermütter und Schwippschwager unterstützen soll.)

Selektoren für Nachfahren-Elemente verwenden

Mit Nachfahren-Selektoren können Sie sich die Vorteile des HTML-Stammbaums zunutze machen, indem Sie Tags unterschiedlich formatieren, wenn Sie innerhalb anderer Tags stehen. Angenommen, Sie wollten innerhalb einer <h1>-Überschrift mittels eines <strong>-Tags ein Wort besonders hervorheben. Die meisten Browser stellen aber sowohl Überschriften als auch als <strong> markierte Textteile fett dar, sodass für den Betrachter kein Unterschied zwischen dem hervorgehobenen Wort und der restlichen Überschrift zu sehen ist. Die Verwendung eines Typ-Selektors zum Ändern der Farbe des <strong>-Tags ist hier keine gute Wahl, weil Sie dadurch – ob Sie wollen oder nicht – auch die Farbe aller anderen <strong>-Tags verändern. Mit dem Selektor für Nachfahren-Elemente können Sie dagegen gezielt nur solche <strong>-Tags verändern, die innerhalb von <h1>-Tags stehen.

Der CSS-Code, der unser <h1> und <strong>-Dilemma löst. sieht so aus:

h1 strong {  color: red;  }  

Durch diese Schreibweise werden nur Vorkommen von <strong> rot dargestellt, die sich innerhalb von <h1>-Tags befinden. Alle anderen <strong>-Tags sind nicht betroffen.

Selektoren für Nachfahren-Elemente wirken nur auf Elemente, die in andere Elemente verschachtelt sind. Sie folgen dabei exakt dem Muster von Vor- und Nachfahren des HTML-Stammbaums.

selektoren_grundlagen_05

Einen Nachfahren-Selektor erstellen Sie, indem Sie den Vorfahren und den Nachfahren gemäß dem HTML-Stammbaum nebeneinanderstellen. Hierbei steht der „älteste“ Vorfahre ganz links und der „jüngste“ Nachfahre am weitesten rechts. Wenn Sie beispielsweise drei Links <a>, die sich innerhalb einer ungeordneten Liste befinden. sowie einen weiteren Link innerhalb eines Absatzes (<p>). Damit die Links innerhalb der Liste eine vom Link im Absatzunterschiedliche Formatierung erhalten, können Sie den folgenden Nachfahren-Selektor einsetzen:

li a {  font-family: Arial;  }  

Diese Regel lautet auf Deutsch übersetzt: „Stelle alle <a>-Tags (Links) innerhalb eines Listeneintrags (<li>) in der Schrift Arial dar.“ Hierbei kann ein Nachfahren-Selektor auch mehr als zwei Elemente enthalten. Die folgenden Beispiele funktionieren alle als gültige Selektoren für die <a>-Tags innerhalb der ungeordneten Liste:

ul li a  body li a  html li a  html body ul li a  

Info

Ein Grund für die Verwendung von zusätzlichen Elementen in Nachfahren-Selektoren kann die Definition verschiedener Regeln zur Formatierung des gleichen Tags sein. Die Formatanweisungen eines sehr deutlich aus formulierten Nachfahren-Selektors (z.B. das vierte Beispiel oben) können einfache Klassen- oder Typ-Selektoren überschreiben.

Diese vier Selektoren, die eigentlich alle das Gleiche tun, zeigen, dass Sie nicht unbedingt die gesamte „Abstammungslinie“ des zu formatierenden Tags zu nennen brauchen. Im zweiten Beispiel,body li a, wird ul gar nicht gebraucht. Der Selektor funktioniert, sobald es ein <a>-Tag gibt, das irgendwo in seinem Stammbaum ein <li>-Tag zum Vorfahren hat (das seinerseits ein Nachfahre des <body>-Tags ist). Das bedeutet, dass dieser Selektor genauso gut auf ein <a>-Tag zutreffen kann, das sich innerhalb eines <em>-Tags befindet, das sich in einem <strong>-Tag befindet, das von einem <li> umgeben wird – und so weiter.

Diese Technik ist nicht einmal auf Typ-Selektoren beschränkt.

Sie können komplexe Nachfahren-Selektoren erzeugen, indem Sie verschiedene Selektoren kombinieren. Vielleicht sollen nur die Links gelb dargestellt werden, die sich innerhalb des einleitenden Absatzes (markiert mit der Klasse einleitung) befinden. Die folgende Stildefinition macht genau das:

p.einleitung a {  color: yellow;  }  

Die Kurzfassung: „Wende diese Stilregel auf jeden Link (a) an, der ein Nachfahre eines Absatzes (p) ist, dem die Klasse einleitung zugewiesen wurde.“ Beachten Sie, dass zwischen p und .einleitung kein Leerzeichen steht. Auf diese Weise teilen Sie CSS mit, dass die Klasse .einleitung ausdrücklich mit dem <p>-Tag verbunden sein muss.

Wenn Sie dagegen ein Leerzeichen einfügen. erhalten Sie einen anderen Effekt:

p .einleitung a {  color: yellow;  }  

Diese nur scheinbar winzige Änderung sorgt dafür, dass der Selektor nun auf <a>-Tags zutrifft, die sich innerhalb eines beliebigen anderen Tags befinden, der mit der Klasse .einleitung markiert wurde. Dieser beliebige andere Tag soll seinerseits von einem <p>-Tag umgeben sein.

Lassen Sie den Namen des letzten Vorfahren weg (in unserem Fall das p). erhalten Sie eine flexiblere Stildefmition:

.einleitung a {  color: yellow;  }  

Diese Regel wird auf alle <a>-Tags angewandt. die sich innerhalb eines beliebigen anderen Tags befmden. <div>, <h1>. <table> oder was auch immer, denen die Klasse .einleitung zugewiesen wurde. Das Vorfahren-Element dieser Tags ist unwichtig.

Nachfahren-Selektoren sind ziemlich schwere Geschütze in Ihrem CSS-Arsenal, die sehr vielseitig eingesetzt werden können.

interaction 128

Stile für mehrere Tags auf einmal definieren

Gelegentlich müssen Sie schnell mal mehrere verschiedene Elemente mit den gleichen Stilen versehen. Sollen beispielsweise alle Überschriften die gleiche Schrift und Farbe bekommen, ist die Defmition eigener Stile für jede Überschrift. <h1>. <h2> usw., deutlich zu viel Arbeit. Bei einer späteren Änderung müssen Sie außerdem entsprechend viele Stildefinitionen anpassen, die im Grunde die gleichen Regeln enthalten. Ein besserer Ansatz besteht darin, die Selektoren zu gruppieren. um so die gleiche Regel für mehrere Selektoren nur einmal defmieren zu müssen.

Selektoren gruppieren

Um mehrere Selektoren zu gruppieren, erstellen Sie einfach eine durch Kommata getrennte Liste. Wenn Sie für alle überschriften die gleichen Deklarationen verwenden wollen, können Sie das folgendermaßen schreiben:

h1, h2. h3, h4, hS. h6 {  color: #FICD33;  }  

Dieses Beispiel besteht einfach aus einer Gruppe von Typ-Selektoren, Sie können aber auch jeden anderen gültigen Selelktor (oder eine beliebige Kombination von Selektoren) in die Liste aufnehmen. Die folgende Deklaration gilt für alle primären Überschriften, Absätze, sämtliche mit der Klasse .copyright markierten Tags und das Tag mit der ID kopfteil:

h1, p, .copyright, #kopfteil {  color: #F1CD33;  }  

Info

Manchmal sollen bestimmte Seitenelemente nur einen Teil der Formatierungen miteinander teilen. Gleichzeitig soll es für bestimmte Tags aber auch eigene Regeln geben. In solchen Fällen können Sie die gemeinsamen Anweisungen gruppieren und danach mit speziellen Regeln für die einzelnen Elemente präzisieren. Die Fähigkeit, mehrere Regeln für das gleiche Element festzulegen, ist eine sehr mächtige Eigenschaft von CSS.

Der universelle Selektor (Asterisk, *)

Wenn Ihnen die Möglichkeit, Selektoren zu gruppieren, immer noch nicht ausreicht, besitzt CSS auch noch den universellen Se1ektor: Dabei handelt es sich um einen Asterisk (*), der in seiner Grundform einfach alle Tags einer Webseite auswählt.

Vielleicht sollen aus irgendeinem Grund ja alle Tags Ihrer Seite in fetter Schrift dargestellt werden. Dann könnten Sie das tun, indem Sie eine Gruppe aller Selektoren anlegten:

a, p, img, h1, h2, h3, h4, h5 ... und so weiter ... {  font-weight: bold;  }  

Der Asterisk bietet dagegen eine wesentlich kürzere Schreibweise, um CSS anzuweisen, alle HTML-Tags auszuwählen:

* {  font-weight: bold;  }  

In seiner kultivierteren Form kann der universelle Se1ektor auch als Teil eines Nachfahren-Selektors oder anderer komplexer Konstruktionen verwendet werden. Wenn Sie einen Stil auf alle Elemente anwenden wollen, die vom Tag mit der ID kopfteil abstammen, können Sie beispielsweise schreiben:

#kopfteil * {  font-weight: bold;  }  

Da der universelle Selektor sich auf kein bestimmtes Tag bezieht, ist es gelegentlich schwer, vorherzusagen, ob er auf alle Seiten und deren Tags in einer Website die gleiche Wirkung hat. Um viele verschiedene Seitenelemente zu formatieren, verlassen sich die Webdesign-Gurus gern auch auf die sogenannte Vererbung – ein Merkmal von CSS.

Pseudoklassen und Pseudoelemente

Manchmal soll eine Regel für Teile einer Webseite gelten, die kein eigenes Tag besitzen, aber trotzdem leicht zu identifizieren sind, wie beispielsweise die erste Zeile eines Absatzes oder ein Link, über dem sich gerade der Mauszeiger befindet. CSS besitzt eine Handvoll Selelktoren für diese Dinger, namentlich Pseudoklassen und Pseudoelemente.

arrow_right 128

Stildefinitionen für Links

Allein für die Formatierung von Links gibt es vier verschiedene Pseudoklassen. Abhängig davon. wie der Benutzer mit den Links interagiert, können Sie unterschiedliche Stile festlegen. Die entsprechenden Pseudoklassen lauten:

  • a:link trifft auf einen Link zu, dem der Benutzer noch nicht gefolgt ist. Der Mauszeiger befindet sich nicht über dem Link, und der Link wird momentan nicht angeklickt. Mit a:link definierte Stile gelten für normale, noch nicht angeklickte Weblinks.
  • a:visited bezeichnet einen Link, der (gemäß dem Verlauf des Webbrowsers) bereits besucht wurde. Sie können diesen Links ein anderes Aussehen geben, um Ihren Besuchern zu verdeutlichen, dass sie hier schon einmal waren.
  • a:hover findet Links, über denen sich gerade der Mauszeiger befindet. Diese sogenannten Rollover-Effekte sind nicht nur zum Spaß da, sie können für Buttons oder Navigationselemente sinnvolle visuelle Rückmeldungen geben.

Sie können die Pseudoklasse :hover übrigens nicht nur für Links verwenden. So ist es durchaus möglich, auch Textteile in einem bestimmten Absatz oder einem <div>-Container hervorzuheben, wenn der Besucher mit der Maus darüberfahrt.

Info

Im Internet Explorer 6 und früheren Versionen funktioniert :hover nur für Links. Wenn Sie partout nicht auf Version 7 oder 8 aktualisieren wollen (oder dürfen), sprechen wir Ihnen unser herzliches Beileid aus und empfehlen Ihnen, das Problem mit dem vorgestellten JavaScript zu umgehen.

  • a:active definiert Stilregeln für den Moment, in dem der Link gerade angeklickt wird. So definierte Stile gelten also nur für den Augenblick zwischen Klicken und Loslassen der Maustaste.

Info

Vermutlich können Sie ein langes und gesundes Leben führen, ohne jemals mit den Selektoren in den folgenden Abschnitten zu tun zu haben. Viele Webdesigner benutzen sie überhaupt nicht. Die Selektoren die Sie bisher kennen für Typ, Klasse, ID, Nachfahren und so weiter, reichen meistens vollkommen aus, um schöne, praktische und leicht wartbare Webserren zu erstellen.

Noch mehr Pseudoelemente und -klassen

In der CSS-Speziftkation werden neben bereits behandelten weitere mächtige Pseudoklassen und -elemente deftniert. Leider unterstützt der am zweithäuftgsten benutzte Browser – Internet Explorer 6 für Windows – diese so gut wie gar nicht. Obwohl diese Merkmale offIziell Teil von CSS sind, werden viele Websurfer mit diesen Mitteln erstellte Designelemente nicht sehen können (es sei denn, Sie aktualisieren auf Internet Explorer 7 oder höher bzw. benutzen einen wirklich standardkonformen Browser wie z.B. Firefox). Ist es Ihnen nicht möglich, ihren Browser zu wechseln oder zu aktualisieren, finden Sie im JavaScript eine Möglichkeit zum Umgehen des Problems.

:before

Das Pseudoelement :before besitzt eine Fähigkeit, die Sie bei normalen Selektoren vergeblich suchen. Es kann Inhalte vor einem gegebenen Element einfügen. Vielleicht wollen Sie vor einem wichtigen Absatz die Worter „HEISSER TIPP!“ einfügen, um hervorzuheben. Anstatt diesen Text in den HTML-Code einzubauen, können Sie dies auch mit dem Selektor :before erledigen. Dieser Ansatz hält nicht nur Ihren HTML-Code klein, sondern ermöglicht auch spontane Anpassungen der Nachricht, ohne hierfür den HTML-Code anfassen zu müssen. Die Änderung von „HEISSER TIPP!“ zu „Wissenswerte Dinge“ lässt sich so mit ein wenig CSS für die gesamte Website auf einmal vornehmen. (Der Nachteil ist, dass diese spezielle Nachricht für Browser, die kein CSS verstehen oder :before nicht unterstützen, unsichtbar bleibt.)

Um :before zu verwenden, müssen Sie erst einmal eine Klasse anlegen (z.B. .tipp) und diese den Absätzen zuweisen, denen der Text vorangestellt werden soll, wie hier: <p class="tipp">. Danach fügen Sie den Nachrichtentext in Ihr Stylesheet ein:

p.tipp:before {  content: "HEISSER TIPP!"  }  

Sobald ein Webbrowser die Klasse .tipp in einem <p>-Tag findet, stellt er dem Absatz pflichtgemäß den Text „HEISSER TIPP!“ voran.

Das Stichwort für Text, der auf diese Weise eingefügt wird, heißt erzeugter Inhalt, weil die Webbrowser diesen nach Bedarf erzeugen. Im HTML-Quellcode der Seite werden Sie diesen Text nicht finden. Auch wenn Ihnen das vielleicht nicht aufafllt, erzeugen Webbrowser ständig ihren eigenen Inhalt, z.B. Markierungen oder Zahlen vor Listeneinträgen. Wenn Sie unbedingt wollen, könnten Sie mit :before sogar eigene Aufzählungszeichen definieren.

Trotz seines sicherlich großen Potenzials ignorieren Internet Explorer 6 und dessen Vorgänger dieses Pseudoelement geflissentlich.

:after

Wie sein Zwillingsbruder :before, fügt auch das Pseudoelement :after erzeugten Inhalt in ein Dokument ein – diesmal allerdings nach dem Element. Auf diese Weise können Sie beispielsweise schließende Anführungszeichen nach einem Zitatblock erzeugen.

barcode 128

:first-child

Erinnern wir uns kurz, was in der Analogie des HTML-Stammbaums ein Kind-Element ist: ein beliebiges Tag, das von einem anderen Tag umgeben ist. (<h1>, <p>, <h2> und <ul> sind Kind-Elemente des <body>-Tags.) Mit dem Pseudoelement :first-child können Sie spezielle Stile für das erste der vielen Kind-Elemente festlegen.

So kann das Tag <ul>, mit dem eine ungeordnete Liste erzeugt wird, beispielsweise eine ganze Reihe von Listeneinträgen als Kind-Elemente besitzen. Um nur den ersten Eintrag fett darzustellen, können Sie die folgende Regel verwenden:

li:first-child {  font-weight: bold;  }  

Da :first-child nur den Namen des Kind-Elements enthält (aber niemals den des Eltern-Elements), formatiert der obige Stil beliebige <li>-Tags, die das erste Kind-Element irgendeines Tags sind, also nicht nur von <ul>. Listenelemente kommen immer in Listen vor. Daher können Sie davon ausgehen, dass der Selektor li:first-child für alle Listen einer Seite gilt – geordnet oder ungeordnet. Bei anderen Tags ist die Verwendung von first-child dagegen nicht ganz so einfach. So hätte der Selektor p;first-child keinerlei Auswirkungen, wenn das <p>-Tag zwar ein Kind-Element von <body> ist, aber nicht das erste; das ist <h1>.

Da sich die Eltern-Kind-Beziehung bei jeder Anpassung der Webseite ändern kann, ist es unter Umständen schwierig, vorherzusagen, wie sich der Selelctor :first-child bei einer Weiterentwicklung Ihrer Site verhält. Hinzu kommt, dass er im Internet Explorer 6 und früheren Versionen nicht funktioniert – ein weiterer Grund. ihn nur zu benutzen, wenn es absolut notwendig ist. (Immerhin bietet die Version 7 eine gewisse Unterstützung für :first-child.)

:focus

Die Pseudoklasse :focus funktioniert ähnlich wie :hover. Während :hover aktiv wird, sobald ein Benutzer mit dem Mauszeiger über einen Link fahrt, wird focus auf das momentan aktive Element angewandt. „Den Fokus“ erhält ein Element beispielsweise durch Anklicken oder durch Betätigen der Tabulatortaste. Dieser Klick ist normalerweise der einzige Hinweis darauf, welches Element gerade aktiv ist.

Daher ist der als Pseudoklasse angelegte Selektor :focus in erster Linie sinnvoll, um Ihren Benutzern Rückmeldungen zu geben. Dies kann beispielsweise die Änderung der Hintergrundfarbe des Textfelds sein, in das gerade Eingaben gemacht werden. (Einzeilige Text- und Passwortfelder. aber auch größere <textarea>-Felder sind häufige Einsatzgebiete für den :focus-Selektor.) Das folgende Beispiel ändert die Hintergrundfarbe eines Texteingabefelds in Gelb, wenn ein Benutzer es per Mausklick oder Tabulatortaste aktiviert:

input:focus {  background-color: #FFFFCC;  }  

Die Stildefinitionen haben nur so lange Gültigkeit, wie das betreffende Element den Fokus hat. Sobald der Benutzer in ein anderes Feld oder zu einem anderen Element der Seite wechselt, verliert die Textbox den Fokus wieder und damit auch die entsprechenden :focus-Stilregeln.

Info

Selektoren für Fortgeschrittene

Die CSS-Spezifikation enthält weitere mächtige Selektoren, mit denen Sie die Gestaltung Ihrer Website noch genauer steuern können. Ähnlich einigen bereits vorgestellten Selektoren funktionieren auch diese erst ab dem Internet Explorer 7. (Für ältere Versionen haben Sie möglicherweise mit der vorgestellten JavaScript-Lösung Glück.)

Kind-Selektoren

Kind-Selektoren besitzen gegenüber den bereits in diesem Kapitel vorgestellten Nachfahren-Selektoren eine noch höhere Präzision. Hiermit können Sie die Kind-Elemente, also direkte Nachfahren. eines anderen Elements (Tags) mit Stilen versehen. Kind-Selektoren verwenden ein Größer-als-Zeichen (>), um die Beziehung zwischen den beiden Elementen zu verdeutlichen. Mit dem Selektor body > h1 können Sie beispielsweise Stile für alle <h1>-Tags definieren, die Kind-Elemente des <body>-Tags sind.

selektoren_grundlagen_06

Im Gegensatz zum Selektor für Nachfahren-Elemente (der alle Nachkommen eines Tags auswählt, also Kinder, Enkel, Urenkel usw.), können Sie mit dem Kind-Selektor genau festlegen, welches Kind-Element welches Vorfahren Sie genau meinen. Mit dem bereits bekannten Nachfahren-Selektor body h2 werden beide <h2>-Tags ausgewählt. Obwohl sich beide sekundären Überschriften innerhalb der <body>-Tags befinden, ist nur die zweite ein direkter Nachfahr (ein „Kind“ von <body>. Das erste <h2>-Tag befindet sich dagegen innerhalb eines <div>-Paars und gilt daher als dessen Kind (und als Enkelkind von <body>. Wenn Sie ausdrücklich das erste <h2> auswählen wollen, benötigen Sie stattdessen den Kind-Selektor div > h2.

page_search 128

Benachbarte Geschwister-Elemente

Neben Eltern-Kind-Beziehungen gibt es auch noch andere Verwandtschaftsverhältnisse, die im HTML-Stammbaum vorkommen. Gelegentlich wollen Sie ein Tag nicht anhand seiner Vorfahren, sondern seiner Nachbarn auswählen. Hierbei werden Tags, die das gleiche Eltern-Element besitzen und im HTML-Code direkt aufeinanderfolgen, als benachbarte Geschwister-Elemente bezeichnet. So ist das <div>-Tag ein benachbartes Geschwister-Element von <h1>. Das <p>-Tag ist ein benachbartes Geschwister-Element von <h2> usw.

Mit dem Selektor für benachbarte Geschwister-Elemente können Sie beispielsweise den ersten auf eine <h1>-Überschrift folgenden Absatz anders formatieren als die übrigen Absätze. Vielleicht soll zwischen der überschrift und dem Absatz kein Zwischenraum sein, wie sonst üblich. Oder der erste Absatz soll eine bestimmte Farbe oder Schrift verwenden, weil er als Einleitung dienen soll.

Das Symbol für den Selektor für benachbarte Geschwister-Elemente ist ein Pluszeichen (+), mit dem die Elemente verbunden werden. Um beispielsweise jeden Absatz (<a>) auszuwählen, der auf eine sekundäre Überschrift (<h2>) folgt, können Sie dies mit dem Selelctor h2 + p erledigen. Hierbei erhält das letzte Element (hier <p> die Formatierung – aber nur, wenn es sich direkt neben seiner Schwester, der sekundären Überschrift <h2>. befindet.

Attribut-Selektoren

Neben den bereits beschriebenen Methoden bietet CSS die Möglichkeit, Tags anhand ihrer Attribute auszuwählen. Vielleicht sollen nur die wichtigen Fotos einer Seite einen Rahmen erhalten. Ihr Logo, Buttons und andere kleine Dinge, die ebenfalls per <img>-Tag in die Seite eingebunden sind, sollen davon jedoch ausgenommen sein. Zum Glück erinnern Sie sich, dass Sie Ihren Fotos mit dem Attribut title kurze Beschreibungen mitgegeben haben. Dadurch können Sie jetzt einen Attribut-Selektor verwenden, um die wichtigen Bilder von den anderen zu unterscheiden.

Info

Das HTML-Attribut title bietet eine großartige Möglichkeit, links und Bilder mit Kurzinfos (oder Popup-Meldungen) zu versehen. Es ist außerdem eine Methode, Suchmaschinen mit nützlichen Informationen zu einer Webseite zu versorgen. Näheres dazu finden Sie beispielsweise unter webdesign.about.com.

Mit Attribut-Selektoren können Sie Tags anhand bestimmter Merkmale auswählen. Im folgenden Beispiel wird ein <img>-Tag ausgewählt. das ein title-Attribut besitzt:

img[title]  

Der erste Teil des Selektors ist der Name des Tags (img). Der Name des Attributs steht in eckigen Klammern direkt dahinter: [title].

Hierbei sind Sie nicht auf die Namen der Attribute beschränkt. Sie können sie auch mit Klassennamen verwenden. So wählt .foto[title] beispielsweise jedes Element aus, dem die Klasse foto zugewiesen wurde und das das HTML-Attribut title besitzt.

Sie können die Auswahl sogar noch weiter eingrenzen, indem Sie den Selekdor nur für Elemente formulieren, die einen genau definierten Wert für ein bestimmtes Attribut besitzen. Vielleicht sollen Links, die auf einen besonderen URL zeigen, hervorgehoben werden. Hier hilft der folgende Attribut-Selektor:

a[href="http://www.html-info.eu"]{  color:red;  font-weight:bold;  }  

Die Verwendung bestimmter Werte in Attribut-Selektoren ist besonders bei der Arbeit mit Formularen nützlich. Viele Formularelemente verwenden das gleiche Tag, obwohl sie unterschiedlich aussehen und sich auch so verhalten. So werden Checkbox, Textfelder. Submit-Buttons und andere Formularfelder alle durch das <input>-Tag gekennzeichnet. Erst durch den Wert des Attributs type werden sie tatsächlich unterschieden. Der Code <input type="text"> erzeugt beispielsweise ein Textfeld, <input type="checkbox"> dagegen ein Checkbox.

Um nur die Textfelder eines Formulars auszuwählen, können Sie beispielsweise diesen Selektor verwenden:

input[type="text"]  

Info