Websiteentwicklung: CSS: Syntax

Zurück zu Einbau in HTML/XML | Hoch zu CSS | Vor zu Box-Modell

Eigenschaften und Werte

Eine CSS-Eigenschaft (property) bestimmt, was in der Darstellung angepasst werden soll. Ein Wert (value) zu einer Eigenschaft bestimmt wie etwas in der Darstellung angepasst werden soll. Für eine Eigenschaft muss immer mindestens ein Wert angegeben werden. Viele Eigenschaften lassen sich über den Wert inherit vererben. Siehe dazu das Kapitel Kaskadierung, Spezifität und Vererbung.

	Unterstützung von inherit im Internet Explorer Der Internet Explorer bis Version 7 unterstützt den Wert inherit nur für die Eigenschaften direction und visibility.

Selektoren

Ein Selektor hat die Aufgabe, das gewünschte Element auszuwählen (selektieren). Die zu einem Selektor passende CSS-Notation sieht wie folgt aus:

Selektor { Eigenschaft: Wert }

Leerzeichen sind optional. Werden mehrere Eigenschaften notiert, so sind diese mit Semikolon zu trennen. Ein Leerzeichen als Eigenschaft hat keine Wirkung. Also sind folgende Notationen gleichwertig:

Selektor { Eigenschaft1: Wert1; Eigenschaft2: Wert2 }
Selektor { Eigenschaft1: Wert1; Eigenschaft2: Wert2; }
Selektor {Eigenschaft1: Wert1 ;   Eigenschaft2:  Wert2  }
Selektor 
{ 
  Eigenschaft1: Wert1 ;   
  Eigenschaft2: Wert2
}
Selektor 
{ 
  Eigenschaft1: Wert1 ;   
  Eigenschaft2: Wert2;
}

Element-Selektoren

Die einfachste Variante ist der Element-Selektor. Hierbei werden alle Elemente mit gleichem Elementnamen ausgewählt.

p { color: blue; }

Diese Definition spricht alle p-Elemente in einem Dokument an. Für diese wird die aktuelle Farbe als blau festgelegt, was unter anderem dazu führt, dass der darin notierte Text blau dargestellt wird.

Eindeutige Kennzeichnung

Um ein einzelnes, bestimmtes Element zu formatieren, kann dieses mit einem Fragmentidentifizierer (bei (X)HTML und SVG zum Beispiel mit dem Attribut id) versehen und anhand dessen ausgewählt werden. Eine id-Attributwert darf nur einmal pro Dokument vorkommen und darf nicht mit einer Zahl beginnen. In Bezug zu CSS eignen sie sich daher gut, um Bestandteile eines Dokumentes zu kennzeichnen, welche nur einmal auftreten. Beispielhaft ist die typische Verwendung zur Untergliederung eines Dokumentes in Kopf-, Haupt- sowie Fußbereich. Es ist hilfreich, den Wert als erklärenden Namen zu notieren.

Der Wert des Fragmentidentifizierers wird in CSS mit einer vorangehenden Raute (#) gekennzeichnet, gefolgt vom Wert. Ist der Wert ID, folglich

#ID { Eigenschaft: Wert}

Um ein bestimmtes Element zu kennzeichnen wird also etwa im (X)HTML-Quelltext das id-Attribut gesetzt:

<p id="einleitung">Hier erscheint die Einleitung zu einem langen Text.</p>

…und anschließend mit CSS ausgewählt:

#einleitung { color: blue}

Klassen

Möchte man mehrere, jedoch nicht alle Elemente gleichartig formatieren, bietet sich die Nutzung einer Klasse an. Eine Klasse kann im Gegensatz zu einem Fragmentidentifizierer mehrfach in einem (X)HTML-Dokument oder SVG-Dokument angegeben werden. Dies ist hilfreich, um immer wiederkehrende Formatierungen anzuwenden, ohne diese auf alle gleichartigen Elemente auszudehnen.

Klassen werden in CSS durch einen Punkt (.) gekennzeichnet, gefolgt vom Klassennamen

.Klasse { Eigenschaft: Wert; }

Um ein (X)HTML-Element oder SVG-Element mit einer Klasse zu versehen, wird das class-Attribut genutzt:

<p>Ein "normaler" Absatz.</p>
<p class="farbig_hervorgehoben">Ein optisch hervorgehobener Absatz.</p>
<p>Ein "normaler" Absatz.</p>
<p class="farbig_hervorgehoben">Ein optisch hervorgehobener Absatz.</p>
<p>Ein "normaler" Absatz.</p>

…und via CSS selektiert:

p { color: black}
.farbig_hervorgehoben { color: blue}

Diese Regeln weisen allen Absätzen (p-Elementen) die schwarze Textfarbe zu, jedoch werden alle Absätze mit der Klasse farbig_hervorgehoben mit blauer Textfarbe dargestellt.

Elemente können mehreren Klassen angehören. Dies wird dann im Attribut class als eine mit Leerzeichen separierte Liste notiert. Die Klassen können dann einzeln angesprochen werden:

<p>Ein "normaler" Absatz.</p>
<p class="optisch hervorgehoben">Ein optisch hervorgehobener Absatz.</p>
<p>Ein "normaler" Absatz.</p>
<p class="optisch Absatz">Ein optisch hervorgehobener Absatz.</p>
<p>Ein "normaler" Absatz.</p>

p { color: black}
.optisch { color: #f00}
.Absatz { font-style: italic}
.optisch.hervorgehoben {font-size:1.2em}
.optisch.Absatz {font-variant:small-caps}

Universal-Selektor

Der Universal-Selektor wählt alle Elemente aus. Er wird in CSS durch einen Stern (*) gekennzeichnet.

* { color: blue}

Dies weist allen Elementen eine blaue Farbe zu.

Attribut-Selektoren

Elemente können auch anhand anderer Attribute als id oder class ausgewählt werden. Dazu dienen die Attribut-Selektoren, welche in eckige Klammern gefasst werden.

[href] – Attributname

Wählt alle Elemente aus, welche ein Attribut href im Quelltext zugewiesen bekommen haben, unabhängig vom Wert des Attributs.

[type="submit"] – Zuweisungs-Operator

Dieser Attributselektor wählt alle Elemente aus, die einen bestimmten Wert im Attribut haben. In diesem Fall also alle Absende-Knöpfe oder allgemeiner Elemente mit der Attributangabe type="submit".

Auf diese Weise könnte auch ein Element mit einem id-Attribut ausgewählt werden: [id="einleitung"]. Dieser Selektor unterscheidet sich jedoch erheblich von #einleitung, welcher das selbe Element auswählt, da beide Selektoren eine unterschiedliche Spezifität aufweisen. Da nicht jede Sprache Fragmentidentifizierer haben muss, stellt dies jedoch eine immer funktionierende Variante dar.

[class~="warning"] – Operator für Liste

Dies wählt alle Elemente aus, in denen "warning" als Bestandteil einer mit Leerzeichen getrennten Liste vorkommt. Also zum Beispiel <p class="important warning"> oder <p class="warning highlight">, aber nicht <p class="my-warning">.

[lang|="de"] – Operator für Werte mit Bindestrich

Dies wählt alle Elemente aus, deren Attribut lang mit "de" beginnt, gefolgt von einem Bindestrich und einem beliebigem Teil, also zum Beispiel <p lang="de-DE"> oder <p lang="de-CH">.

Mit CSS3 wurden drei weitere Operatoren eingeführt:

[href^="http"] – Operator für Wertbeginn

Dies wählt alle Elemente aus, deren Attribut href mit "http" beginnt, also alle externen Verweise einer Seite.

[src$=".png"] – Operator für Wertende

Dies wählt alle Elemente aus, deren Attribut src auf ".png" endet, also alle Grafiken, welche ein PNG einbinden.

[class*="warn"] – Operator für Wert, die diese Zeichenkette enthalten

Dies wählt alle Elemente aus, deren Attribut class die Zeichenkette "warn" enthalten, also zum Beispiel <p class="my-warning"> oder <p class="warnings">.

Pseudo-Klassen und Pseudo-Elemente

CSS kann darüber hinaus bestimmte Bereiche eines Dokuments dynamisch gestalten, ohne dass dafür eine Änderung im Quelltext des Dokuments erfolgen muss. Hierzu existieren die Konzepte der Pseudo-Klassen und Pseudo-Elemente, welche in einem eigenen Kapitel näher betrachet werden.

Pseudo-Klassen und Pseudo-Elemente werden in CSS mit einem Doppelpunkt (:) gekennzeichnet. Ab CSS3 werden Pseudo-Elemente zur besseren Unterscheidung durch einen doppelten Doppelpunkt (::) gekennzeichnet.

Beispiele (zur Erläuterung siehe Kapitel Pseudo-Klassen und Pseudo-Elemente):

p:first-child { color: blue }
p::before { content: '► '}

Gruppierung von Selektoren

Alle möglichen Selektoren können gruppiert werden, um eine Eigenschaft bei mehreren Elementen anzuwenden. Dazu werden die einzelnen Selektoren mit einem Komma (und optionalen Leerzeichen) getrennt notiert.

h1, h2, h3, h4, h5, h6, legend {font-weight: bold}

Kombination von Selektoren

Die Beziehungen der HTML-Elemente untereinander

CSS-Selektoren können kombiniert werden, um die Auswahl der Elemente weiter zu begrenzen. Die Leserichtung der Verschachtelung erfolgt dabei von links nach rechts. Die Auswertung durch den Parser (im Browser) jedoch von rechts nach links. Selektoren sollten so allgemein wie möglich gehalten werden, um die Auswertung durch den Browser zu beschleunigen.

Nachfahren

Hiermit wird ein Element ausgewählt, das sich innerhalb eines anderen befindet.

<p class="farbig">
  Textabsatz Nummer eins, welcher eine <strong>Betonung</strong> enthält
</p>
<p>
  Textabsatz Nummer zwei, welcher eine <strong>Betonung</strong> enthält
</p>
<blockquote class="farbig">Ein Zitat</blockquote>

CSS-Beispiele

p.farbig {
  color: blue;  /* die färbt nur den ersten Absatz blau */
}
.farbig strong {
  color: red;  /* die färbt nur die Betonung im ersten Absatz rot */
}

Kinder

…

Geschwister, direkt nachfolgend

…

Geschwister, alle

…

Kommentare

Selbstverständlich sollten Sie sich die Zeit nehmen, Ihre Definitionen zu kommentieren. Der Nächste, der Ihre CSS-Datei bearbeiten muss, wird es Ihnen danken.

Kommentare beginnen immer mit einem Schrägstrich gefolgt von einem Stern und enden mit den gleichen Zeichen in umgekehrter Reihenfolge:

Syntax

/* Kommentar */

ToDo

Zurück zu Einbau in HTML/XML | Hoch zu CSS | Vor zu Box-Modell