Deutsche Übersetzung der Seite "Chapter 2 CSS"
Originale Version: http://www.w3.org/Style/LieBos2e/enter/
Aktuelle - übersetzte - Version: http://www.WSS-EXPERT.de//Style/LieBos2e/enter/
Übersetzer: A.Friedrich
Bookmark:

Sehr geehrter Leser dieses Dokumentes - bitte beachten Sie dass es sich bei dieser Seite um die übersetzung eines W3C Textes handelt.
Der Original Text ist urheberrechtlich geschützt, bitte beachten Sie die im Originaldokument vermerkten Hinweise. Die Rechte an der Übersetzung selbst liegen allein beim Übersetzer. Der Übersetzer bedankt sich bei den folgenden Seiten für Ihre Unterstützung: Forum . Für eventuell vorhandene Fehler in der Übersetzung kann keine Gewähr übernommen werden, das einzig massgebliche und legitime Dokument ist das englische W3C Original.
Kommentare des Übersetzers sind als solche gekennzeichnet und unterliegen ebenfalls dem Copyright des Übersetzers. Diese sind nicht Bestandteil des englischen Originaldokumentes.

Kapitel 2
CSS

Dies ist Kapitel 2 des Buches Cascading Style Sheets, designing for the Web, von Håkon Wium Lie und Bert Bos (2nd edition, 1999, Addison Wesley, ISBN 0-201-59625-3)

Wir bereits im vorhergehenden Kapitel erklärt dienen HTML Elemente dazu um die Struktur eines Dokumentes festzulegen. Die HTML Spezifikations Richtlinien sagen dem Browser wie dieser diese Elemente darzustellen hat. Sie können z.B. ziemlich sicher sein dass der Inhalt eines strong Elements fett dargestellt wird. Ebenso sicher können Sie davon ausgehen dass ein Browser Inhalte eines h1 Elements mit einer ziemlich grossen Schriftgrösse darstellen wird - zumindest jedoch grösser als die Inhalte eines p Elements oder h2 Elements. Aber leider haben Sie weiter keine Möglichkeiten die Darstellung zu beeinflussen.

CSS ändert das. CSS setzt den Designer auf den Fahrersitz. Wir haben den Grossteil des restlichen Buches dafür verwendet zu erklären was sich alles mit CSS realisieren lässt. In diesem Kapitel bringen wir Ihnen das Basiswissen von CSS näher und zeigen Ihnen wie HTML (Struktur) und CSS (Design) zusammen funktionieren.

Regeln und Style Sheets

Um mit CSS zu beginnen müssen Sie nicht einmal selbst irgendwelche Style Sheets schreiben. Kapitel 16 erklärt wie Sie bereits existierende Style Sheets aus dem Web in Ihrem Dokument verwenden können.

Es gibt zwei Wege um CSS zu generieren. Entweder Sie versuchen es "per Hand" mit einem einfachen Texteditor oder Sie verwenden einen speziellen Editor welcher CSS unterstützt. Diese Editoren erlauben die Erzeugung von CSS ohne dass Sie dabei den Syntax verstehen müssen. Wie auch immer, oftmals möchte der Designer den erzeugten Style Sheet per Hand tunen um den einen oder anderen Effekt zu erzeugen. Aus diesem Grunde empfehlen wir die Nutzung eines einfaches Text Editors - nicht zuletzt um den Lernfaktor zu erhöhen. Lassen Sie uns beginnen!

H1 { color: green }

Was Sie hier sehen ist eine einfacher Style Sheet welcher eine einzelne Regel umfasst. Eine Regel ist eine Definition von einem optischen Merkmal eines oder mehrerer Elemente. Ein Style Sheet ist eine Sammlung von einer oder mehrerer Regeln welche auf ein HTML Dokumente angewand werden. Die Regel hier setzt die Farbe aller First-Level Überschriften (h1). Lassen Sie uns einen kurzen Blick auf das Endergebnis dieser Regel werfen:

Abbildung 2.1

[image]

Wir werden jetzt damit beginnen diese Regel auseinander zu nehmen.

Anatomie der Regel

Eine Regel besteht aus zwei Teilen:

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

    [image]

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

    [image]

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.

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.

Abbildung 2.2 Diagramm einer Regel.

[image]

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.

Style Sheets mit Dokumenten verbinden

Wie schon geschrieben muss, um einen Effekt zu erzeugen, der Style Sheet mit dem Dokument verbunden werden. Das bedeutet also dass CSS und HTML Seite miteinander kombiniert werden müssen. Das kann durch einen dieser vier Wege geschehen:

  1. Der für das gesamte Dokument geltende Style Sheet wird mit Hilfe des style Elements in das Dokument selbst gesetzt.
  2. Der Style Sheet wird mit Hilfe des style Attributes direkt in einem Element verankert.
  3. Ein externer Style Sheet wird mit Hilfe des link Elements mit dem HTML Dokument verlinkt.
  4. Ein Style Sheet wird mit Hilfe des CSS @import Befehls importiert.

Im nächsten Abschnitt werden wir die erste Methode näher untersuchen: das style Element. Wir besprechen das style Attribute in Kapitel 4 , "CSS selectors," und verwenden das link Elenent und den @import Befehl in Kapitel 16 , "External style sheets."

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>

Abbildung 2.3 So sieht es aus wenn zu einem Style Sheet eine Regel hinzugefügt wird welche alle h1 Elemente grün darstellt. Der Style Sheet wurde durch das style Element direkt in das Dokument gesetzt. (Schauen Sie selbst)

[image]

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.

Browser und CSS

Für eine up-to-date Übersicht aktueller Browser besuchen Sie am besten die W3C Übersichtsseite.

Damit das hier besprochene CSS funktioniert müssen Sie einen CSS fähigen Browser verwenden, also einen Browser welcher CSS unterstützt. Ein CSS fähiger Browser wird das style Element als Containerelement für Style Sheets interpretieren und das Dokument entsprechend darstellen. Der Grossteil der modernen Browser unterstützt CSS, so z.B. der Microsoft Internet Explorer 4 (IE4), Netscape Navigator 4 (NS4) und Opera 3.5 (O3.5). Untersuchungen haben gezeigt dass mehr als die Hälfte der Menschen im Internet CSS fähige Browser verwenden. Tendenz steigend. Die Chance ist also gross dass die Menschen mit denen Sie über das Web kommunizieren einen CSS fähigen Browser nutzen. Wenn nicht geben Sie ihnen doch einen Grund zum Updaten!

Die beste Quelle für Informationen darüber wie welcher Browser CSS unterstützt ist WebReview's charts

Jedoch, nicht alle CSS Browser-Implementationen sind perfekt. Wenn Sie damit beginnen mit Style Sheets zu experimentieren werden Sie feststellen dass jeder Browser mit ganz eigenen Fehlern (Bugs) und Limitierungen daher kommt. Generell kann man sagen dass neuere Browser besser sind als ältere. Der IE4 und O3.5 sind derzeit die besten und Netscapes neues Kind - genannt Gecko - sieht auch sehr vielversprechend aus was die CSS Unterstützung angeht.

Jene welche keinen CSS fähigen Browser nutzen können dennoch Seiten mit Style Sheets betrachten. CSS wurde so erschaffen dass sicher gestellt ist dass die Seiteninhalte auch dann sichtbar sind wenn der Browser keine Ahnung von CSS hat. Einige Browser, so wie der Netscape Navigator 2 und 3, kennen keine Style Sheets. Sie haben aber Kenntnis vom style Element und ignorieren es vollständig. Das ist der beste Weg den ein Browser einschlagen kann wenn er schon kein CSS versteht.

Andere Browser welche das style Element nicht kennen, so wie der Netscape Navigator 1 oder Internet Explorer 2, werden die style tags ebenfalls ignorieren aber deren Inhalt darstellen. Es wird also so aussehen dass am Seitenanfang der Style Sheet ausgegeben wird. Jedoch, zum Zeitpunkt des Schreibens dieser Seiten, werden nur noch sehr wenige Web Nutzer auf dieses Problem stossen. Um das Problem dennoch zu verhindern können Sie den Style Sheet in ein HTML Kommentar Element setzen welches wir in Kapitel 1 bereits besprochen haben. Da Kommentare nicht auf dem Bildschirm ausgegeben werden kann verhindert werden dass alte Browser den CSS Code darstellen. CSS fähige Browser kennen diesen Trick und werden den Inhalt eines style Elements auch als Style Sheet verarbeiten.

Bitte erinnern Sie sich - HTML Kommentare starten mit <!-- und enden mit -->. Hier sehen Sie nun wie Sie den Inhalt eines style Elements in einen HTML Kommentar setzen können:

<HTML>
  <TITLE>Bach's home page</TITLE>
  <STYLE>
    <!--
      H1 { color: green }
    -->
  </STYLE>
  <BODY>
    ..
  </BODY> 
</HTML>

CSS bietet eine eigene Möglichkeit Kommentare innerhalb des Quellcodes zu platzieren. Ein CSS Kommentar beginnt mit "/*" und endet mit "*/". (Wenn Sie sich mit C Programmierung auskennen wird Ihnen das bekannt vorkommen) CSS Regeln innerhalb eines CSS Kommentars werden keine Auswirkung auf die Darstellung des Dokuments haben.

Dem Browser muss aber auch noch mitgeteilt werden dass Sie nun mit CSS Style Sheets arbeiten. CSS ist bisher die einzige Style Sheet Sprache welche in Verbindung mit HTML Dokumenten genutzt werden kann. Und das wird sich sobald wohl auch nicht ändern. Für XML sieht das anders aus. Aber nur weil es derzeit der Fall ist kann nicht auch in Zukunft davon ausgegangen werden. Dem Browser muss also mitgeteilt werden dass wir CSS verwenden. Das wird mit einem type Attribut des style Elements realisiert. Der Wert von type legt fest welche Sprache für die Style Sheets verwendet werdens soll. Für CSS wird der Wert "text/css" verwendet. Das folgende Beispiel zeigt Ihnen wie Sie das hier Gelernte anwenden können (in Kombination mit HTML Kommentaren).

<HTML>
  <TITLE>Bach's home page</TITLE>
  <STYLE TYPE="text/css">
    <!--
      H1 { color: green }
    -->
  </STYLE>
  <BODY>
    ..
  </BODY>
</HTML> 

Wenn der Browser das Dokument einliest so wird er prüfen ob ihm die verwendete Style Sheet Sprache bekannt ist. Wenn dem so ist wird er den Style Sheet Code interpretieren, anderenfalls wird er ihn ignorieren. Das type Attribut (siehe Kapitel 1 für eine Erklärung der HTML Attribute) ist ein Weg dem Browser zu sagen welche Style Sheet Sprache Anwendung findet. Das type Attribut muss also mit eingebunden werden.

Um die Beispiele lesbarer zu gestalten haben wir uns dazu entschlossen den Style Sheet Code nicht in HTML Elemente zu setzen. Aber wir werden das type Attribut noch im Laufe diesen Buches verwenden.

Baumstruktur und Vererbung

Denken Sie bitte an Kapitel 1 zurück und erinnern Sie sich wie HTML Elemente den Inhalt eines Dokuments in einer Baum-artigen Struktur mit Eltern - und Kindelementen repräsentieren. Es gibt viele gute Gründe für eine solche Struktur in Dokumenten. Für style Sheets gibt es einen besonders guten Grund: Vererbung. So wie Kinder von ihren Eltern erben so verhält es sich auch mit HTML Elementen. Anstatt jetzt aber Gene und Geld zu vererben geben HTML Elemente ihr optischen Eigenschaften weiter.

Lassen sie uns das folgende Beispiel betrachten:

<HTML>
  <TITLE>Bach's home page</TITLE>
  <BODY>
    <H1>Bach's home page</H1>
    <P>Johann Sebastian Bach was a 
      <STRONG>prolific</STRONG> composer. Among his
        works are:
    <UL>
      <LI>the Goldberg Variations
      <LI>the Brandenburg Concertos
      <LI>the Christmas Oratorio
    </UL>
  </BODY>
</HTML>

Die Baum Struktur des Dokumentes sieht so aus:

[image]

Dank Vererbung werden CSS Eigenschaften und deren Werte an ihre Kindelemente übertragen. Zum Beispiel möchten wir nun dass die Farbe grün auf die Elemente h1 und h2 angewand werden soll. Nun könnten wir, wenn diese Regel auf alle Elemente des Dokumentes angewand werden soll, die folgende Variante genutzt werden (alle Elemente in einem Selektor):

<STYLE TYPE="text/css">
  H1, H2, P, LI { color: green }
</STYLE>

Wie auch immer, der Grossteil der HTML Dokumente wird wesentilch komplexer ausfallen als unser Beispiel hier. Der Style Sheet würde zu lang werden. Aber es gibt einen besseren - kürzeren - Weg. Anstatt den Style auf jedes einzelne Element anzuwenden weisen wir ihn dem Urahn eines jeden Elements zu - dem body Element:

<STYLE TYPE="text/css">
  BODY { color: green } 
</STYLE>

Da andere Elemente die Eigenschaften des body erben, werden sie auch die grüne Farbe erben. (Abbildung 2.4)

Abbildung 2.4 Das Ergebnis der Vererbung (Schauen Sie selbst)

[image]

Wie Sie sehen ist die Vererbung ein Transportmechanismus um stilistische Eigenschaften von einem Element auf dessen untergeordnete Kinder zu übertragen. Da das body Element ein gängiger Urahn für alle sichtbaren Elemente darstellt ist body auch ein gängiger Selektor für Style Sheet Effekte welche das gesamte Dokument betreffen.

Vererbung überschreiben

Im vorangegangenen Beispiel wurde allen Elementen die gleiche Farbe durch Vererbung zugewiesen. Manchmal jedoch sehen Kinden nunmal nicht aus wie ihre Eltern. Wenig überraschend bietet auch CSS hier eine entsprechende Möglichkeit. Sagen wir alle h1 Elemente sollen blau anstatt grün dargestellt werden. Das kann in CSS einfach realisiert werden:

<STYLE TYPE="text/css">
  BODY { color: green }
  H1 { color: navy }
</STYLE>

Da h1 ein Kind von body ist (und von daher aich alle Eigenschaften von body erbt) bilden die zwei Regeln in diesem Style Sheet einen Konflikt. Die erste Regel setzt die Farbe des body Elements - und somit auch die Farbe von h1. Die zweite Regel setzt die Farbe allein nur für das h1 Element. Welche Regel wird gewinnen? Lassen Sie es uns herausfinden:

Der Grund warum die zweite Regel gewinnt ist weil sie spezifischer als die erste ist. Die erste Regel ist sehr allgemein gehalten - sie beeinflusst alle Elemente des Anzeigebereichs. Die zweite Regel verändert nur das h1 Element und ist von daher spezifischer.

Wäre CSS eine Programmiersprache käme es auf die Anordnung der Regeln an. CSS ist aber keine Programmiersprache und im oberen Beispiel spielt die Reihenfolge keine Rolle. Das Ergebnis sieht genauso aus als hätten wir den folgenden Style Sheet verwendet:

<STYLE TYPE="text/css">
  H1 { color: navy }
  BODY { color: green }
</STYLE>

CSS wurde designed um Konflikte von Regeln wie in unserem Beispiel zu lösen. Spezifikation ist ein Aspekt des Ganzen. Sie können alle weiteren Details in Kapitel 15, "Cascading and inheritance", nachlesen.

Eigenschaften welche nicht vererbt werden

Generell gilt dass CSS Eigenschaften vom Elternelement auf dessen Kinder vererbt werden. Einige Eigenschaften werden jedoch aus gutem Grund nicht mit vererbt. Nehmen wir die background Eigenschaft (beschrieben in Kapitel 11) als Beispiel für eine Eigenschaft welche nicht mit vererbt wird.

Sagen wir Sie wünschen ein Hintergrundbild für Ihre Seite. Das ist ein gebräuchlicher Effekt im Web. Mit CSS setzen Sie es auf diese Weise um:

<HTML>
  <TITLE>Bach's home page</TITLE>
  <STYLE TYPE="text/css">
    BODY { 
      background: url(texture.gif) white;
      color: black;
    }
  </STYLE>
  <BODY>
    <H1>Bach's <EM>home</EM> page</H1>
    <P>Johann Sebastian Bach was a prolific
      composer.
  </BODY>
</HTML>

Die background Eigenschaft besteht aus einer URL ("texture.gif") welche auf ein Hintergrundbild verweist. Wurde das Bild geladen sieht es in etwa so aus:

Es gibt ein paar erwähnenswerte Punkte in diesem Beispiel:

Warum genau wird aber nun die background Eigenschaft nicht auch vererbt? Visuell ähnelt der Effekt der Transparenz dem der Vererbung: es sieht aus als ob alle Elemente den gleichen Background besitzen. Und es gibt zwei gute Gründe: transparente Hintergründe können schneller dargestellt werden (es gibt ja nichts zum darstellen!) und - da Hintergrundbilder auf das dazugehörige Element angewand werden - kann nicht gewährleistet werden dass ein sauberer Bildübergang beim Anzeigen entsteht.

Häufige Aufgaben in CSS

Farben und Hintergründe - wie im letzten Beispiel beschrieben - sind die am häufigsten verwendeten Möglichkeiten von CSS. Andere häufige Aufgaben sind z.B. das Setzen von Abständen um Elemente oder das Festlegen von Schriftarten. Dieser Abschnitt gibt Ihnen einen Überblick über die am meissten genutzten Eigenschaften von CSS.

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.

Ein Wort zur Verkettung (Cascading)

Ein grundlegendes Merkmal von CSS ist es dass mehr als nur ein Stylesheet ein Dokument beeinflussen kann. Diese Möglichkeit ist als cascading bekannt weil mehrere Style Sheets miteinander verkettet werden können. Cascading ist ein grundlegendes Merkmal von CSS weil ein einzelnes Dokument Style Sheets aus vielen verschiedenen Quellen nutzen kann: dem Browser, dem Designer oder dem Besucher der Seite selbst.

In den letzten Beispielen haben Sie gesehen dass sich die Farbe der Links ohne irgendwelche Style Sheet Angaben in ein blau verändert hat. Ebenso wusste der Browser wie er blockquote Absätze und h1 Überschriften formatieren musste ohne dass wir es ihm gesagt haben. Alles was der Browser über diese Formatierungen weiss ist in seinem eigenen Standard Style Sheet hinterlegt und wird mit dem Style Sheet des Autors und denen des Besuchers bei der Darstellung verbunden.

Wir wissen schon seit Jahren dass Designer ihre eigene Style Sheets verwirklichen wollen. Wir haben aber auch herausgefunden dass der Seitenbesucher selbst ebenfalls festelegen möchte wie sich ihm eine Webseite präsentiert. Dies kann dadurch realisiert werden indem ein persönlicher Style Sheet im Browser angegeben wird. Alle Konflikte zwischen den verschiedenen Style Sheets müssen vom Browser gelöst werden. In der Regel besitzt der Style Sheet des Designers die höchste Priorität, gefolgt vom Style Sheet des Besuchers...gefolgt vom Style Sheet des Browsers. Aber ebenso kann der Besucher eine eigene Style Sheet Regel als besonders wichtig deklarieren und damit die Regeln des Designers oder Browsers überschreiben.

Wir werden weitere Details im Kapitel 15, "Cascading and inheritance", besprechen. Bis dahin gibt es aber noch eine Menge über Fonts, Abstände und Farben zu lernen.


IMPRESSUM