Klassen und Ids

Klassen

Es kann manchmal interessant sein, verschiedene Stile in denselben Tags anzuwenden. Dafür gibt es in CSS das Konzept der Klasse.

Klassen sind ebensoleicht zu definieren wie Stile. Man gibt den ausgewählten Tag an (wie zum festlegen von Styles), fügt dann einen Punkt an (.) und den Namen, den man der Klasse geben möchte. Der Name der Klasse kann aus Buchstaben (akzentuiert oder nicht), Ziffern und Trennstrichen bestehen :

Tag_selector.Name-der-Klasse {
Stil-Eigenschaft: Wert;
Stil-Eigenschaft: Wert;
			...;
											}

« Name-der-Klasse » steht für den Namen, den man der Klasse gibt.

Aufrufen einer Klasse

Um eine Klasse im HTML-Code aufzurufen, fügt man einfach das Attribut class an den Tag an :
Für die Klasse Rot angewendet auf den Tag b :

B.rouge {font: Verdana 12px; color: #FF0000; }

<B class="Rouge"> Text, der fett und rot sein soll </B>

Universelle Klassen

Man kann auch keinen Tag angeben, dann kann die Klasse in jedem Tag angewendet werden, wo der gewählte Stil einen Sinn macht. In diesem Fall spricht man von einer universellen Klasse (manchmal unabhängige Klasse). Eine solche Klasse definiert man, indem man vor den Namen der Klasse einfach einen Punkt stellt :

.Name-der-Klasse {Stil-Eigenschaft: Wert, Stil-Eigenschaft: Wert…}

Für die folgende Klasse « wichtig »  :

.wichtig {font-type: arial; color: red; font-weight: bold}

Der Aufruf dieser Klasse kann von jedem HTML-Element aus erfolgen, in dem die Defition gültig ist.

<h1 class="important">Achtung dies ist eine Warnung</h1>
<i class="wichtig">(bitte beachten)</i>

Beachten Sie, dass beim Aufruf der Klasse kein Punkt steht.

Pseudo-Klassen

Durch Pseudo-Klassen lässt sich der Stil verfeinern, der auf einer gewissen Anzahl Tags ausgeführt wird - und zwar indem eine bestimmte Reaktion auf ein Ereignis oder auf die relative Stellung des Tags innerhalb der anderen Tags festgelegt wird.

Im Gegensatz zu Klassennamen sind Pseudo-Klassennamen festgelegt, es ist also nicht möglich, eigene Pseudo-Klassen zu erzeugen. Es gibt mehrere Arten von Pseudo-Klassen :

• Dynamische Pseudo-Klassen,
• Link-Pseudo-Klassen,
• Sprach-Pseudo-Klassen,
• First-child Pseudo-Klassen,
• Seiten-Pseudo-Klassen,
• Pseudo-Elemente.

Dynamische Pseudo-Klassen

Durch dynamische Pseudo-Klassen lässt sich der Stil eines Tags in Abhängigkeit von einem Ereignis verändert (Mausbewegung, Klick, Tastendruck auf der Tastatur). Es gibt drei Arten :

• Die Pseudo-Klasse :hover erlaubt es, den gewählten Tag mit einem Stil zu versehen, wenn sich der Mauszeiger über den Text bewegt :

  A:hover {font-decoration: underline;}

• Die Pseudo-Klasse :focus erlaubt es, den gewählten Tag mit einem Stil zu versehen, wenn er gerade im Fokus ist (zum Beispiel beim Klicken in ein Formularfeld) :

  TEXTAREA:focus {color: #FF0000;}

• Die Pseudo-Klasse :active erlaubt es, den gewählten Tag mit einem Stil zu versehen, wenn der User auf das Element klickt (zwischen dem Drücken und Loslassen der Maustaste des Users) :

  A:active {color: #FF0000;}

Dynamische Pseudo-Klassen werden nicht von allen Browsern gleichermaßen erkannt.

Link-Pseudo-Klassen

Link-Pseudo-Klassen sind spezielle Pseudo-Klassen für den Tag <A> :

• Die Pseudo-Klasse :link erlaubt es, den Stil von Hypertext Links festzulegen, die noch nicht vom User besucht wurden
• Die Pseudo-Klasse :visited erlaubt es, den Stil von Hypertext Links festzulegen, die bereits vom User besucht wurden

Es kann vorkommen, dass manche Browser einen Link als nicht besucht ansehen, wenn er über einen längeren Zeitraum nicht aufgerufen wird.

Die absteigende Pseudo-Klasse

Eine absteigende Pseudo-Klasse ermöglicht die Zuteilung eines Stils auf den ersten Tag im Element. Diese Pseudo-Klasse hat folgende Syntax :

Parent_Element > Tag:first-child {style;}

P > A:first-child {color: #00FF00;}

<P align="justify">
  <A href="http://de.kioskea.net">Kioskea</A>
  </P>

<P align="justify">
  <BR/<
  <A href="http://de.kioskea.net">Kioskea</A>
  </P>

Text-Pseudo-Klassen

Text-Pseudo-Klassen ermöglichen die Zuteilung eines Stils auf eine Textpartie, die von den Tags abgegrenzt wird, auf die sie sich beziehen. Text-Pseudo-Klassen werden daher meist zusammen mit den Absatz-Tags (<P>) verwendet.

Es gibt zwei Text-Pseudo-Klassen :

• :first-line : ermöglicht es, der ersten Zeile eines Absatzes einen Stil zuzuschreiben.

  P:first-line { text-transform: uppercase }

• :first-letter : ermöglicht es, dem ersten Buchstaben eines Absatzes einen Stil zuzuschreiben, um einen typografischen Effekt zu erhalten. Das folgende Beispiel verdoppelt beispielsweise die Größe und schreibt den ersten Buchstaben eines Absatzes fett :

  P:first-letter { font-size: 200%; font-weight: bold; }

Sprach-Pseudo-Klassen

Es ist möglich, den Stil in Abhängigkeit der Sprache des Dokuments festzulegen (wird in den HTTP-Headern oder Meta-Tags angegeben) oder der Sprache eines HTML- oder XML-Elements (wird über das wählbare Attribug LANG angegeben), wenn diese genannt wird.

Sprach-Pseudo-Klassen werden folgendermaßen notiert :

• :lang(Language, Sprache). Mit der folgenden Pseudo-Klasse lassen sich zum Beispiel Anführungszeichen im französischen Stil schreiben

  HTML:lang(fr) { quotes: '« ' ' »' }

Seiten-Pseudo-Klassen

Mit dem Selektor @page lassen sich die Formatierungs-Einstellungen einer HTML-Seite (Größe, Ränder, etc.) beim Drucken verändern, zum Beispiel die Seitenränder (margin-left, margin-top, margin-right, margin-bottom), die Größe (size). Man kann sich die Website dafür als Seitenfolge eines Druckwerks vorstellen.

Seiten-Pseudo-Klassen ermöglichen es so, die rechten und linken Seiten, sowie die erste Seite des Dokuments, festzulegen

Es gibt zwei verschiedene Seiten-Pseudo-Klassen :

• @page:left : um die Eigenschaften der linken Seiten festzulegen

  @page:left { size: landscape; margin-left: 2cm; }

• @page:right : um die Eigenschaften der rechten Seiten festzulegen

  @page:right { size:landscape; margin-left: 2.5cm; }

• @page:first : um die Eigenschaften der ersten Seite eines Dokuments festzulegen

  @page:first { size: portrait;
  								margin-left: 2.5cm;
  								margin-right: 2cm;
  								margin-bottom: 1cm;
  								margin-top: 4cm;}

ID-Selektoren

Mit dem ID-Selektor kann man auf ein einziges Element der Seite Bezug nehmen, welches durch seine ID aufgerufen wird. IDs werden vor allem dafür verwendet, um HTML-Elemente mittels JavaScript ausfindig zu machen.

Ein ID-Selektor hat folgende Syntax :

#ID_Name { style }

Ein solcher Stil wird folgendermaßen umgesetzt :

<BALISE ID="ID_Name" > ... </TAG>

Es kann nur eine einzige ID pro Seite geben ! Wichtig ist auch das fehlende # im ID-Selektor.