Kapitel 2
CSS

Anatomie der Regel

Eine Regel besteht aus zwei Teilen:

• Selektor - dem Teil vor der geschweiften Klammer
• Deklaration - dem Teil innerhalb der Klammern

  

Der Selektor dient als Verbindungsstück zwischen dem HTML Dokument und dem Style. Er legt fest welche Elemente vom Style Sheet beeinflusst werden. Die Deklaration legt fest welcher Effekt verwendet werden soll. In diesem Beispiel ist der Selektor h1 und die Deklaration "color: green." Dadurch werden alle h1 Elemente beeinflusst und der Effekt der Deklaration auf diese angewand. Oder anders gesagt - sie werden alle grün. (Die color Eigenschaft beeinflusst nur die Vordergrundfarbe, es existieren andere Eigenschaften für Hintergründe, Umrandungen, etc.)

Der obige Selektor basiert auf dem Typ eines Elements: er selektiert alle Elemente vom Typ "h1." Diese Art des Selektors wird auch Typ Selektor genannt. Jedes HTML Element kann als Typ Selektor verwendet werden. Typ Selektoren sind die einfachste Art der Selektoren. Wir besprechen andere Arten von Selektoren in "CSS selectors."

Anatomie einer Deklaration

Eine Deklaration besteht aus zwei Teilen getrennt durch einen Doppelpunkt:

• Eigenschaft - der Teil vor dem Doppelpunkt
• Wert - der Teil nach dem Doppelpunkt

  

Die Eigenschaft ist ein Merkmal oder eine Characteristik welche einem Element zugehörig ist. Im obigen Beispiel wurde die Eigenschaft color verwendet. CSS2 (siehe graue Box) definiert rund 120 Eigenschaften welchen wir allen Werte zuweisen können.

http://www.w3.org/TR/REC-CSS1
      
http://www.w3.org/TR/REC-CSS2
      

Der Wert ist die präzise Definition der Eigenschaft. In unserem Beispiel ist es "green" (grün), aber genausogut könnte es blue, red, yellow oder irgendeine andere Farbe sein.

Das Diagramm weiter unten zeigt alle Zutaten einer Regel. Die geschweiften Klammern ({ }) und der Doppelpunkt (:) ermöglichen es dem Browser zwischen Selektor, Eigenschaft und Wert zu unterscheiden.

Selektoren und Regeln gruppieren

Als CSS erschaffen wurde war die Kürze in der Verwendung ein oberstes Ziel. Wir fanden heraus dass, wenn wir den Style Sheet entsprechen klein halten können, der Designer diesen auch einfach per Hand verändern kann. Auch sind die Ladezeiten eines kurzen Style Sheets entsprechend kürzer als die eines langen. CSS bietet von daher mehrere Wege um die Style Sheets zu verkürzen durch die Gruppierung von Selektoren und Deklarationen.

Nehmen wir z.B. diese drei Regeln:

H1 { font-weight: bold }
H2 { font-weight: bold }
H3 { font-weight: bold }
     

Alle drei Regeln verwenden die exakt gleiche Deklaration - sie setzen die Schriftart auf fett. (Dies wird durch die Nutzung der font-weight Eigenschaft erreicht welche wir in See Fonts. näher besprechen.) Da alle drei Deklarationen identisch sind können wir sie auch in einer Komma-getrennten Liste zusammenfassen um die Deklaration nur ein einziges Mal aufzurufen. So wie hier:

H1, H2, H3 { font-style: bold }

Diese einzelne Regel produziert das gleiche Ergebnis wie die anderen drei.

Ein Selektor kann auch mehr als nur eine Deklaration besitzen. zum Beispiel können wir einen Style mit diesen zwei Regeln schreiben:

H1 { color: green }
H1 { text-align: center }

In diesem Fall wurden alle h1 Überschriften grün und zentriert auf dem Bildschirm ausgegeben. (Das wurde erreicht durch die text-align Eigenschaft welche im Kapitel 5 näher vorgestellt wird.)

Wir können den gleichen Effekt aber schneller erzeugen indem wir die Deklarationen welche zum gleichen Selektor gehören in einer Semikolon getrennten Liste zusammenfassen. So wie hier:

H1 {
  color: green;
  text-align: center;
}

Alle Deklarationen müssen sich innerhalb der geschweiften Klammern befinden. Ein Semikolon trennt die Deklarationen und kann - aber muss nicht - auch am Ende der letzten Deklaration angefügt werden. Um den Code lesbarer zu gestalten empfehlen wir so wie hier jede Deklaration in eine eigene Zeile zu setzen. (Browsern ist dass jedoch egal, sie ignorieren alle Leerzeichen und Zeilenumbrüche.)

Nun kennen Sie die Grundregeln wie CSS Regeln und Style Sheets erzeugt werden. Wie auch immer, wir sind noch lange nicht fertig. Damit der Style Sheet auch einen sichtbaren Effekt erzeugt muss er mit dem HTML Dokument verbunden werden.

Verknüpfen durch Verwendung des STYLE Elements

Sie können Style Sheet und HTML Dokument miteinander kombinieren indem Sie den Style Sheet am Dokumentenanfang in ein style Element setzen. Das style Element wurde extra dafür entwickelt um in HTML Dokumenten Style Sheets verwenden zu können. Hier nun ein Beispiel wie ein style Element mit einem Dokument verbunden werden kann. Das Ergebnis sehen Sie in Abbildung 2.3.

<HTML>
  <TITLE>Bach's home page</TITLE>
  <STYLE>
    H1, H2 { color: green }
  </STYLE>
  <BODY>
    <H1>Bach's home page</H1>
    <P>Johann Sebastian Bach was a prolific
        composer. Among his works are:
    <UL>
      <LI>the Goldberg Variations
      <LI>the Brandenburg Concertos
      <LI>the Christmas Oratorio
    </UL>
    <H2>Historical perspective</H2>
    <P>Bach composed in what has been referred to as
      the Baroque period.
  </BODY>
</HTML>

Achten Sie bitte darauf dass das style nach dem title Element und vor dem body Element platziert wurde. Das title Element wird nicht im Browserfenster dargestellt und kann dadurch auch nicht durch CSS beeinflusst werden.

Das style Element enthält also den gesamten Style Sheet. Dennoch, obwohl in diesem Element die Elemente h1, p, und ul verwendet werden und auf dem Bildschirm dargestellt werden ist der Inhalt des style selbst nicht zu sehen. Stattdessen wird der Effekt welcher im style Element - dem Style Sheet also - generiert wurde auf dem Bildschirm angezeigt. Sie werden also nicht "{color: green }" auf dem Bildschirm sehen sondern stattdessen zwei h1 Elemente in grüner Farbe. Es wurden keine weiteren Regeln für andere Elemente festgelegt, somit werden diese Elemente auch in der Browser Standardfarbe dargestellt.

Häufige Aufgaben: Schriftarten (Fonts)

Lassen Sie uns mit Fonts beginnen. Wenn Sie in letzter Zeit irgendwelche Textprogramme verwendet haben sollten können Sie vermutlich den folgenden kleinen Style Sheet lesen:

H1 { font: 36pt serif }

Diese Regel legt den Font für h1 Elemente fest. Der erste Teil des Wertes 36pt legt die Schriftgrösse auf 36 Punkte fest. Ein Punkt ist ein altes typographisches Überbleibsel aus vergangen Zeiten welches es bis in das digitale Zeitalter geschafft hat. Im nächsten Kapitel werden wir Ihnen zeigen warum Sie besser "em" nutzen sollten, aber lassen Sie uns hier mit "pt" fortfahren. Der zweite Teil des Wertes - serif - teilt dem Browser mit dass er eine Schriftart mit Serifen nutzen soll (diese kleinen Verziehrungen an den Buchstaben, Kapitel 5 gibt dazu weitere Informationen). Diese dekorativen Schriftarten passen besser zu einer Homepage über Bach da es damals noch keine modernen Serifen-losen Schriftarten gab. Hier das Ergebnis:

Die Font Eigenschaft ist eine Kurzform um mehrere andere Eigenschaften zusammenzufassen. Durch die Verwendung können Sie Ihren Style Sheet verkürzen und mehrere Werte mit nur einer Regel setzen. Wollen Sie die längere Version nutzen können Sie auch das hier stattdessen schreiben:

H1 {
  font-size: 36pt;
  font-family: serif;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  line-height: normal;
}

Manchmal wollen Sie aber auch nur eine dieser kombinierten Eigenschaften setzen. Um zum Beispiel einen Font nur kursiv zu setzen können Sie dies hier schreiben:

UL { font-style: italic }

Die font-style Eigenschaft wird nicht die Schriftgrösse oder Schriftart verändern, sie wird nur den gewählten Font schräg stellen (kursiv). Wird diese Regel auf das ul Element angewand dann werden auch alle li Texte kursiv ausgegeben werden durch die entsprechende Vererbung. Hier das Ergebnis unserer Testseite:

Ähnlich wird die font-weight Eigenschaft dafür verwendet um die Breite - oder Dicke - der Buchstaben festzulegen. Sie können die Listenelemente mit dieser Eigenschaft versehen indem Sie dieser Eigenschaft den Wert bold zuweisen:

UL { 
  font-style: italic;
  font-weight: bold;
}
     

Was dann so aussieht:

Die letzten beiden Eigenschaften, font-variant und line-height werden in den aktuellen Browsern noch nicht umfassend unterstützt und werden von daher auch seltener eingesetzt.

Häufige Aufgaben: Abstände

Ein Element mit einem ihn umgebenden Leerraum zu versehen ist eine häufige Aufgabe in der Typographie. Die Überschrift dieses Absatzes besitzt einen Leerbereich darüber und einen kleineren darunter. Dieser Abschnitt, wie im Buch gedruckt, besitzt einen Leerraum links und einen etwas kleineren rechts. CSS kann dafür genutzt werden um festzulegen wieviel Platz diese Räume um das entsprechende Element einnehmen dürfen.

Standardmässig weiss der Browser schon in etwa wie er die verschiedenen Elementearten von HTML darzustellen hat. Zum Beispiel weiss er dass Listen und blockquote Elemente eingerückt dargestellt werden um sie vom restlichen Text abzugrenzen. Als Designer können Sie auf diesen Einstellungen aufbauen und gleichzeitig Ihre eigenen Vorstellungen umsetzen. Lassen Sie und das blockquote Element als Beispiel nehmen. Hier ein Test Dokument:

<HTML>
  <TITLE>Fredrick the Great meets Bach</TITLE>
  <BODY>
    <P>One evening, just as Fredrick the Great was 
      getting his flute ready, and his musicians 
      were assembled, an officer brought him a 
      list of the strangers who had arrived. With
      his flute in his hand he ran over the list,
      but immediately turned to the assembled 
      musicians, and said, with a kind of 
      agitation:
    <BLOCKQUOTE>"Gentlemen, old Bach is come."
    </BLOCKQUOTE>
    <P>The flute was now laid aside, and old Bach, who
      had alighted at his son's lodgings, was immediately
      summoned to the Palace.
  </BODY>
</HTML>

Der Screenshot weiter unten zeigt wie ein typischer HTML Browser das Dokument darstellen würde:

Wie Sie selbst sehen hat der Browser Leerräume um alle Ecken des Textes gelegt. In CSS wird dieser Leerraum "margin" genannt und alle Elemente besitzen bestimmte margins auf allen vier Seiten. Die entsprechenden CSS Eigenschaften sind: margin-top, margin-right, margin-bottom, und margin-left. Sie können eine Änderung der Anzeige des blockquote Elements zum Beispiel auf diese Weise realisieren:

BLOCKQUOTE {
  margin-top: 1em;
  margin-right: 0em;
  margin-bottom: 1em;
  margin-left: 0em;
  font-style: italic;
}

Die Masseinheit "em" wird im nächsten Kapitel näher erklärt, aber wir können ihr Geheimnis auch jetzt schon lüften: sie ändert ihre Grösse relativ zur aktuellen Schriftgrösse. Im Ergebnis wird bei unserem Beispiel also der vertikale margin Wert die gleiche Höhe wie die Schriftgrösse aufweisen (1em), der horizontale margin Wert ist praktisch nicht vorhanden - er wurde auf 0 gesetzt. Um dennoch sicher zu gehen dass sich der Text auch vom restlichen Text abhebt wurde ihm eine kursive (italic) Anzeige zugewiesen. Hier das Ergebnis:

Genau wie die font Eigenschaft eine Kurzform ist um verschiedene Font-Eigenschaften festzulegen so ist die margin Eigenschaft eine Kurzform für weitere margin Eigenschaften. Das Beispiel könnte somit auch auf diese Weise umgeschrieben werden:

BLOCKQUOTE { 
  margin: 1em 0em 1em 0em;
  font-style: italic;
}

Der erste Teil des Wertes - 1em - wird margin-top zugewiesen. Von da aus geht es im Uhzeigersinn weiter: 0em wird margin-right zugewiesen, 1em wird margin-bottom zugewiesen und 0em findet Anwendung bei margin-left.

Da der Wert von margin-left mit 0 angegeben wurde benötigt unser Text noch eine andere Art der Hervorhebung um ihn vom restlichen Text abzugrenzen. Indem wir font-style auf italic setzen hilft das schon einmal, und das Hinzufügen einer Hintergrundfarbe verbessert das Ergebnis noch weiter:

BLOCKQUOTE { 
  margin: 1em 0em 1em 0em;
  font-style: italic;
  background: #EDB;
}

Das Ergebnis:

Wie erwartet hat sich der Hintergrund des Textes verändert. Anders als in unseren anderen Beispielen erfolgte hier jedoch die Definition der Farbe durch eine rot/grün/blau (RGB) Angabe. RGB Farben werden noch näher in Kapitel 11 beschrieben.

Ein Problem ist nun dass die Hintergrundfarbe in unserem Beispiel nur geradeso den Text umgibt. Der Leerraum des Textes - die margin Angaben - erstreckt sich nicht auf die Hintergrundfarbe des Textes. CSS bietet hierfür eine andere Art des Leerraumes, genannt padding (Innenabstand). Die padding Eigenschaft ähnelt in vielerlei Hinsicht der margin Eigenschaft: beide erzeugen einen Abstand um ein Element. Lassen Sie uns das Ganze am Beispiel testen:

BLOCKQUOTE { 
  margin: 1em 0em 1em 0em;
  font-style: italic;
  background: #EDB;
  padding: 0.5em;
}

Das Ergebnis der Verwendung von padding ist dass zwischen Text und den ihn umgebenen rechteckigen Bereich ein Abstand gesetzt wird:

Beachten Sie bitte dass wir hier der padding-Eigenschaft nur einen Wert (0.5em) zugewiesen haben. Genau wie bei der margin Eigenschaft kann padding 4 Werte annehmen. Diese werden sich auf die Abstände oben, rechts, unten und links auswirken. Wie auch immer, wenn ein Wert für alle vier Seiten gelten soll ist es ausreichend diesen nur einmal anzugeben. Dies ist anwendbar auf padding und margin (sowie auch auf andere Umrandungs-Eigenschaften welche wir später noch besprechen werden).

Häufige Aufgaben: Verlinkungen

Um das Lesen von HTML Dokumenten dem Besucher zu erleichtern sollten sich Verlinkungen von restlichen Text abheben. HTML Browser stellen Links in der Regel mit einem Unterstrich dar. Auch haben sich gewisse Farb-Schemata eingebürgert um dem Nutzer zu signalisieren ob ein Link bereits besucht wurde oder nicht. Da Links ein grundlegender Bestandteil des Webs sind bietet CSS ganz spezielle Möglichkeiten um diese zu designen. Hier ein Beispiel:

A:link { text-decoration: underline }

Das obige Beispiel legt fest dass noch nicht besuchte Links unterstrichen dargestellt werden sollen:

Die Links werden wie von uns gewollt unterstrichen dargestellt, aber ebenso auch in der Farbe blau was wir jedoch nicht festgelegt hatten. Wenn Sie dem Browser nicht alle möglichen Styles für einen Link vorgeben so wird er aus einer Standard-Farbpalette selbst auswählen. Das Zusammenarbeiten von selbst erstellten Styles, Browser eigenen Styles und Benutzer-definiertern Styles ist ein anderer Bereich von CSS bei welchen Lösungen für Konfliksituationen bereitgestellt werden müssen. Das C in CSS steht für Cascade (Verkettung). Wir werden diese Verkettung weiter unten erklären.

Dem Selektor (A:link) schenken wir hier ein wenig mehr Aufmerksamkeit. Sie wissen vielleicht schon dass es sich bei "A" um ein HTML Element handelt, der zweite Teil ist jedofch neu. ":link" wird in CSS als sogenannte Pseudoklasse bezeichnet. Pseudoklassen werden dafür verwendet um Styles Elementen zuzuweisen welche auf Informationen/Aktionen von aussen reagieren können. Zum Beispiel kann der Autor dieses Dokuments nicht wissen welche Links darauf besucht werden oder nicht. Pseudoklassen werden im Detail in Kapitel 4 beschrieben, und wir zeigen hier nur noch ein paar wenige Beispiele:

A:visited { text-decoration: none }

Diese Regel wendet einen Style auf besuchte Links an, genau wie A:link auf noch nicht besuchte Links angewand wurde. Ein ein etwas komplexeres Beispiel:

A:link, A:visited { text-decoration: none }
A:hover { background: cyan }

Die letzte Regel verwendete erstmalig eine neue Pseudoklasse :hover. Angenommen der Nutzer fährt mit einem Zeigegerät (z.B. einer Maus) über diesen Link - dann wird der hier festgelegte Style sichtbar werden. So sieht es dann aus:

Die :hover Pseudoklasse besitzt eine interessante Vergangenheit. Sie wurde zusammen mit CSS2 eingeführt nachdem der hover Effekt grosse Popularität bei Javascriptprogrammieren erreichte. Der Javascriptcode erforderte jedoch komplizierte Algorithmen welche sich nun viel leichter mit CSS umsetzen lassen. Dies ist ein gutes Beispiel dafür wie CSS auf populären Tricks von Webdesignern aufsetzt.