9.1.1 Wertzuweisungen

Der prinzipielle Aufbau der Style Sheets ist leicht zu verstehen. Kurz gesagt findet eine Zuordnung zwischen HTML-Element und dessen Präsentation auf dem Ausgabemedium statt. Der einfachste Fall sieht etwa so aus:

  H1 { color: blue }

Überschriften vom Elementtyp H1 erhalten die Farbe Blau. Der Typ (H1) trägt die Bezeichnung Selektor (selector), der Ausdruck in den Klammern heißt Deklaration (declaration), die aufgeteilt ist in Eigenschaft (property), hier die Farbe, und Wert (value), in diesem Fall Blau.

Erlaubte Selektoren legt die DTD fest, es sind die Elementtypen (mit Erweiterungen, siehe unten), während der CSS-Standard die zulässigen Eigenschaften und deren Werte definiert.

Zur Straffung der Style Sheets sieht die Spezifikation verschiedene Möglichkeiten der Gruppierung sowohl der Selektoren als auch der Eigenschaften vor. Beispielsweise lassen sich auch die Überschriften H2 und H3 durch Angabe von

  H1, H2, H3 { color: blue }

  H1 { font-family: sans-serif;
       font-size: 16pt }

  H2, H3 { font-family: roman;
           font-size: 14pt } 

legen die Schriftart und -größe durch Listen von Eigenschaften fest. Selektoren werden durch Kommata und Eigenschaften durch Semikolons voneinander getrennt.

Wer es noch genauer mag, der kann das Attribut ID verwenden und im Style Sheet darauf zugreifen. Zur Unterscheidung von Elementselektoren erhalten ID-Selektoren das Präfix #.

  #xyz1a { color: red }

<absatz ID="xyz1a">...</absatz>

Ein weiteres Feature drängt sich durch die verschachtelte Struktur von XML auf, nämlich die kontextsensitive Zuweisung von Eigenschaften. Es lässt sich leicht am Beispiel mehrfach verschachtelter HTML-Listen erklären.

    <OL>
      <LI>Erster Eintrag</LI>
      <LI>Zweiter Eintrag
        <OL>
          <LI>mit einer eingebetteten LIste
            <OL>
              <LI>und eine weitere Stufe</LI>
              <LI>...</LI>
            </OL>
          </LI>
        </OL>
      </LI>
      <LI>Dritter Eintrag</LI>
    </OL>

OL       { list-style: decimal     }
OL OL    { list-style: lower-alpha }
OL OL OL { list-style: lower-roman }
LI       { display:    list-item   }

Mit diesen Definitionen erhalten geordnete Listen nun eine jeweils andere Nummerierung. Auf der ersten Stufe die übliche arabische Schreibweise (1, 2, 3, 4, ...), darin eingebettete Listen kennzeichnet ein kleiner lateinischer Buchstabe (a, b, c, d, ...), und kleine römische Zahlen (i, ii, iii, iv, ...) schmücken die innersten Listen.

1 Erster Eintrag
2 Zweiter Eintrag
  a mit einer eingebetteten Liste
     i und eine weitere Stufe
    ii ...
3 Dritter Eintrag

Selbstverständlich funktioniert die kontextsensitive Zuweisung nicht nur bei Elementen gleichen Typs, sondern auch bei beliebigen Kombinationen:

 DL UL OL  { list style: lower-alpha }
            /* OL in UL in DL */
 H1 EM     { color : red }   
            /* EM in H1 */

Noch einfacher als die Benutzung eines ausgefeilten Verfahrens zur Festlegung von Eigenschaften ist es, gar keine Festlegung vornehmen zu müssen. Das Stichwort hierfür heißt Vererbung und bedeutet: HTML-Elemente vererben ihre Eigenschaftswerte an eingebettete Elemente. Setzt man, wie oben geschehen, die Farbe für eine Überschrift auf Blau, gilt dies auch für darin enthaltenen Text, der hervorgehoben ist. Eine Definition für die Farbe von EM ist nicht nötig.

/* CSS: */
  H1, H2, H3 { color: blue }
 

<!-- Dokument: -->
 
<H1>blauer Text <EM>blauer Text</EM></H1>