Die Syntax der Styles

Definition eines Styles

Einen Style definiert man mit Hilfe von Regeln in einfachem Text, durch die das Aussehen der Elemente der Seite beschrieben werden kann. Eine CSS-Regel hat zwei Haupt-Elemente :

Ein Tag-Selektor, der besagt, auf welche Tags des Dokuments der Style angewendet wird ;
Eine Deklaration des Styles, in geschwungenen Klammern, durch die man den Style präzisieren kann, der auf den gewählten Tags ausgeführt wird. Die Deklaration besteht selbst aus :
- einer oder mehrerer Eigenschaften(s), gefolgt vom Zeichen « : » (Doppelpunkt),
- einem oder mehreren Werten(s) die jeder Eigenschaft zugeordnet sind, in Anführungszeichen, wenn es sich um mehrere Worte handelt, und durch Kommas getrennt, wenn es mehrere gibt, am Schluss steht ein Strichpunkt.

Die Syntax sieht also folgendermaßen aus :

$Syntaxe d\$

Die folgende Syntaxt definiert zum Beispiel den Style, der auf Hypertext-Links angewendet wird (Tag <A>), also die Schriftart Verdana in einer Größe von 18 Pixel, fettgeschrieben und gelb :

A  {
       font-family: Verdana;
       font-size: 18px;
       font-style: bold;
       color: yellow
       }

Tag-Selektoren

« Tag-Selektoren » (oder « Elemente-Selektoren ») bezeichnen das oder die Schlüsselbegriffe, die vor der geschwungenen Klammer stehen und den oder die Tags des Dokuments angeben, auf die der Style zwischen den Klammern ausgeführt wird.

Um den Style eines bestimmten HTML-Tags festzulegen, fügt man einfach den Namen des Tags ein (ohne die Zeichen < und >. Zum Beispiel :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
 <HEAD>
  <STYLE type="text/css">
  <!--

Tag {Eigenschaften}
  -->
  </STYLE>
 </HEAD>
<BODY>

<tag> ... </tag>

...
</BODY>
</HTML>

Multiple Selektoren

Es ist auch möglich, den Style auf mehrere Tags anzuwenden, indem man die Namen dieser Tags durch Beistriche trennt (,). Ein solcher Selektor heißt multipler Selektor und hat folgende Syntax :

Tag-Selector1, Tag-Selector2  { /* style */  }

Universeller Selektor

Mit dem universellen Selektor (« * ») ist es möglich, einen Style festzulegen, der auf alle HTML-Elemente angewendet wird. Der universelle Selektor hat folgende Syntax :

*  { /* style */  }

Der universelle Selektor ist in wenigen Browsern integriert !</ital>

Verschachtelte Selektoren

Man kann einen Tag in einem gegebenen Kontext auswählen, also abhängig von den Elementen, die ihn umgeben, und zwar durch Kontext-Selektoren.

Es gibt verschiedene Arten von Kontext-Selektoren :

Mit verschachtelten Selektoren lassen sich Regeln festlegen, die nur in Kraft treten, wenn ein Element Y in einem Element X verschachtelt ist. Sie haben folgende Syntax :

selector_X selector_Y { /* style; */ }

Für den folgenden HTML-Code :

<p> <i> Achtung </i>, dies ist eine <b> Warnung </b> </p>
<b> Bitte beachten </b>

Die folgende Regel wirkt nur auf das Wort « Warnung » (das einzige, das von den Tags umgeben ist, die selbst in einem -Tag verschachtelt sind) :

P B { font-weight: bold; color: red; }

Mit Selektoren für konsekutive Elemente lassen sich Regeln erzeugen, die nur in Kraft treten, wenn ein Element Y direkt auf ein Element X folgt. Sie haben folgende Syntax :

selector_X + selector_Y { /* style; */ }

Für den folgenden HTML-Code :

<p> <i> Attention </i>, ceci est un <b> avertissement </b> </p>
<b> Prière d'en tenir compte </b>

La règle suivante ne sélectionne que le mot « avertissement » (le seul entouré de balises , elles-mêmes suivant une balise ) :

I + B { font-weight: bold; color: red; }

Mit Child-Selektoren lassen sich Regeln erzeugen, die nur dann in Kraft treten, wenn ein Element Y der direkte Nachfahre eines Elements X ist. Die Regel wird nicht angewendet, wenn Y in einen oder mehrere andere Tags eingekapselt ist. Sie haben folgende Syntax :

selector_X > selector_Y { /* style; */ }

Für den folgenden HTML-Code :

<p> <i> Attention </i>, ceci est un <b> avertissement </b> </p>
<b> Prière d'en tenir compte </b>

Die folgende Regel wählt nur das Element «  Achtung  » (das einzige, das von den Tags umgeben ist, die selbst direkt in einem -Tag verschachtelt sind) :

P > B { font-weight: bold; color: red; }

Style-Eigenschaften

Kommentare

Es ist möglich (und empfohlen), seine Stylesheets zu dokumentieren, indem man Kommentare mit Zusatzinformationen einfügt (Grund für die Wahl eines Styles, Typ des Dokuments, auf das er angewendet wird, Kontext, ...). CSS-Kommentare werden durch die Kürzel /* und */ abgegrenzt :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
 <HEAD>
  <STYLE type="text/css">
  <!--
/* Dies ist ein Kommentar */
TagA {Eigenschaften}
TagB {Eigenschaften}
TagC {Eigenschaften}
  -->
  </STYLE>
 </HEAD>
<BODY>
...
</BODY>
</HTML>

Ein Style kann « inline » auf alle HTML-Tags bis auf die folgenden angewendet werden : BASE, BASEFONT, HEAD, HTML, META, PARAM, SCRIPT, STYLE, TITLE

Letzte Änderung am Mittwoch 6 Mai 2009 à 14:10:46