Cascading Style Sheets. Demo 1


Style Sheets sind Stilvorlagen, in denen (häufig vorkommende oder ganz spezielle) Stile (Formatierungen) festgelegt werden können. Bei konsequenter Anwendung könnte die gesamte Formatierung eines HTML-Dokumentes auf Stilvorlagen ausgelagert werden. Damit hätte man das Ideal "Trennung von Inhalt und Formatierung" erreicht. Der font-Tag und auch andere Tags sind dann überflüssig und sind deswegen vom W3C-Konsortium als "deprecated" eingestuft worden; sie werden in (ungewisser) Zukunft aus dem HTML-Standard entfernt, was nicht bedeutet, dass sie gleichzeitig auch aus den Browsern entfernt werden.

Die Realität sieht derzeit leider noch anders aus: Auch die jetzigen Browser (Stand 2002/03) sind nicht in der Lage, alle vom W3C-Konsortium festgelegten Stilvorlagen umzusetzen. Bei einem Browsertyp gibt es erhebliche Mängel. Um sicher zu gehen, muss man in der Praxis derzeit oft noch "deprecated" Tags einsetzen.

Die vom W3C-Konsortium definierte Stylesheet-Sprache "CSS" (cascading style sheets) ist die wichtigste Ergänzungssprache zu HTML. Allerdings werden in CCS andere Begriffe und eine andere Syntax benutzt. An Stelle des Begriffes "Attribut" tritt der Begriff "Eigenschaft" und somit statt Attributwert der Begriff Eigenschaftswert. Die Zuweisung erfolgt nicht über ein Gleichheitszeichen sondern über eine Doppelpunkt. Weitere Details zeigen die späteren Listings in diesem Dokument.

Zeichenweise Formatierung ist mit dem Tag-Paar <span> und </span> möglich.
Für blockweise Formatierung ist dagegen das Tag-Paar <div> und </div> zu verwenden.

Style Sheets können an folgenden Stellen deklariert werden:
  1. Im Body-Teil als inline-style bei dem betreffenden Tag mit dem Attribut style="...". Die Methoden 2 und 3 sind i.a. zu bevorzugen. Man beachte, dass der Begriff style sowohl als Attribut (wie hier) als auch als Tag (wie bei 2 und 3) Verwendung findet.
  2. Im Header mittels des Tag-Paares <style> und </style>.
    Auch wenn die jetzigen Browser dieses Tag-Paar auch im Body akzeptieren, sollte man nicht von der HTML-Vorgabe abweichen, das Tag-Paar im Header zu platzieren.
  3. In externen Style-Sheet-Dateien (CSS-Dateien). Diese Datei muß die Erweiterung .css besitzen.
    Beispiel "Stil-001.css".
    Im Header des aktuellen Dokuments ist für dieses Beispiel folgender Link aufzunehmen:
    <link rel="stylesheet" href="Stil-001.css" type="text/css">
    Diese Stilvorlage wird einmal erstellt und gespeichert und kann dann auf beliebig viele Dokumente angewendet werden. Damit erreicht man eine "corporate identity" des gesamten Internet-Auftrittes. Im nächsten Kapitel wird eine externe Stilvorlage demonstriert.

Im Hinblick auf künftige Anwendungen sollte man im Header den Meta-Eintrag
<meta http-equiv="Content-Style-Type" content="text/css">
vorsehen, da die HTML-4.0-Definition verschiedene Sprachen zur Definition von Style Sheets zuläßt.


Zu den numerische Größenangaben in style sheets

G = Größenangabe
T = Typ, a = absolut, r = relativ

G T Erklärung Beispiel
pt a Punkt. 1 pt = 1/72 inch = 25.4mm/72 = ca. 0,353 mm font-size: 12pt;
pc a Pica. 1 pc = 12pt = ca. 4,233 mm font-size: 0.6pc;
in a Inch. 1 inch = 25.4 mm  
mm a Millimeter  
cm a Zentimeter  
px (a) Pixel. Abhängig von Auflösung des Ausgabegerätes.  
em r Bezogen auf Schriftgröße. Wenn Schriftgröße selbst so formatiert wird, dann Bezug auf Elternelement. line-height: 1.5em;
font-size: 1.2em;
ex r Bezogen auf Höhe des Kleinbuchstaben "x". Wenn Schriftgröße selbst so formatiert wird, dann Bezug auf Elternelement.  
% r Prozent. Je nach CSS-Eigenschaft bezogen auf Elementgröße, Elternelement oder allgemeinen Kontext. line-height: 120%;
text-indent: 50%;

Wie die Bezeichnung Cascading Style Sheets andeutet, kann ein HTML-Dokument Stile aus verschiedenen Stilvorlagen beziehen. Ist eine Stil-Definition in mehreren Quellen enthalten, wird die zuletzt aufgerufene Stil-Definition benutzt.

Es ist im Rahmen dieser Einführung nicht möglich, eine komplette Übersicht über alle Eigenschaften der Stilvorlagen zu geben. Die folgenden Demos sollen einige typische Anwendungen exemplarisch zeigen.

Bei diesem Dokument sieht der Header mit dem eingebetteten Style Sheet wie folgt aus. Ganz vorsichtigen Zeitgenossen sei empfohlen, die zwischen dem Tag-Paar <style> und </style> liegenden style-Anweisungen mit den HTML-Kommentarzeichen auszukommentieren, damit Browser, die keine Style Sheets kennen, nicht durcheinanderkommen.


Das folgende Listing zeigt die im Header dieses Dokumentes deklarierte Stilvorlage:

 <head>
    <title>080 Style Sheets</title>
    <meta http-equiv="Content-Style-Type" content="text/css">

    <style type="text/css">
    <!--
    h1    { font-size: 24pt;         /* So müssen in Style Sheets ...          */
            color: blue              /* Kommentare geschrieben werden (C-like) */
                    /* Alle Eigenschaftsanweisungen mit Semikolon abschließen, */
                    /* bei der letzten Anweisung aber nicht nötig              */
          }

    body  { background: whitesmoke;
            font-family: Arial, Helvetica, sans-serif;   /* sans-serif = generische          */
            font-size: 10pt;                             /* Proportionalschrift ohne Serifen */
            margin-left: 100;
            margin-right: 300;
          }

    p     { text-indent: 0   }        /* Absatz ohne Einzug (Standard)   */

    p.ein { text-indent: 3em }        /* Absatz mit 3 * Elementhöhe      */

    p.a1  { font-family: "Times New Roman", Times, serif;    /* Eigene Klasse "a2"   */
            font-size: 14pt;                                 /* serif = generische Proportional- */
            margin-left: 50pt;                               /* schrift mit Serifen.             */
            margin-top:  55pt;                               /* Schriftbezeichner mit mehr als   */
            background: aqua                                 /* einem Wort in Anführungszeichen  */
          }

    p.a2  { font-family: "Courier New", Courier, monospace;   /* Eigene Klasse "a2"   */
            font-size: 10pt;                     /* monospace = generische gleich-    */
            margin-left:  100pt;                 /* abständige Schrift.               */
            margin-top:  -20pt;                  /* negativer Wert: nach oben !!!!    */
            background: fuchsia
          }

       /* Die folgenden Klassen beginnen mit einem Punkt und können in geeigneten       */
       /* Tags wie "div" (blockweise Gültigkeit der Formatierung), "span" (zeichenweise */
       /* Formatierung), "p", "td", "pre" usw. verwendet werden.                             */
       /* Vor dem Punkt dürfte auch ein Sternchen "*" als (verständlicheres) Symbol          */
       /* für einen beliebigen Tag stehen.                                                   */

    .gross {text-transform: uppercase  }              /* Eigene Klasse "gross"  */
    .klein {text-transform: lowercase  }              /* Eigene Klasse "klein"  */
    .kap   {text-transform: capitalize }              /* Eigene Klasse "kap"    */


    .a12     { font-family: Arial, Helvetica, sans-serif;  /* ... Klasse "a12"      */
               font-size: 12pt }

    .a12Eng  { font-family: Arial, Helvetica, sans-serif;  /* ... Klasse "a12Eng"   */
               font-size: 12pt;      /* Die Zeilenhöhe ist hier zur Demo sehr klein */
               line-height: 100%  }  /* gewählt. Prozent bezogen auf Schriftgröße.  */

    .a12Weit { font-family: Arial, Helvetica, sans-serif;  /* ... Klasse "a12Weit"  */
               font-size: 12pt;      /* Die Zeilenhöhe ist hier zur Demo sehr groß  */
               line-height: 150%  }  /* gewählt. Prozent bezogen auf Schriftgröße.  */

    .t1214 { font-family: "Times New Roman", Times, serif;   /* ... Klasse "t1214"  */
             font: 12pt/14pt;  /* Diese praktische Eigenschaftskomination           */
                               /* "Schriftgröße/Zeilenabstand" versteht der NS 4.x  */
                               /* und 6.x nicht und somit den gesamten style        */
                               /* nicht (4.x) bzw falsch (6.x).                     */
                               /* Besser: Getrennte Eigenschaften "font-size" und   */
                               /* "line-height" benutzen.                           */
           }

    .cb9  { font-family: "Courier New", Courier, monospace; /* Eigene Klasse "cb9"   */
            font-size: 9pt;
            color: blue;
            background-color: mintcream
          }

    .cb10 { font-family: "Courier New", Courier, monospace; /* Eigene Klasse "cb10"   */
            font-size: 10pt;
            color: blue;
            background-color: mintcream
          }
    td   { font-family: "Courier New", Courier, monospace;
           font-size: 10pt;
           color: blue;
         }

    td.e { font-family: Arial, Helvetica, sans-serif;
           font-size: 10pt;
           color: blue;
         }

    th   { font-family: Arial, Helvetica, sans-serif;
           font-size: 10pt;
           color: blue;
         }

     -->
    </style>
 </head>
   

Die Darstellung von Style Sheets ist z.T. vom verwendeten Browser abhängig. Bei der Erklärung von Unterschieden werden die folgenden Abkürzungen benutzt:

Demo 1: Überschrift mit inline-style ...

Der HTML-Code:
    <h2 style="font-family: Verdana, Arial, Helvetica, sans-serif;
               font-size: 16pt;
               color: dodgerblue;
               text-align: left">Demo 1: Überschrift mit inline-style ...</h2>
    

Demo 2: Style aus Deklaration im Header

Das ist ein Absatz, dessen relative Position in der Klasse "a1" mit den Eigenschaften "margin-left" und "margin-top" festgelegt wurde.

Das ist ein anderer Absatz, der mit der Klasse "a2" mit einem negativen Wert für die "margin-top" in den Vorgängerabsatz hineinplaziert wurde. Die Browser IE 5.x zeigt die Eigenschaft "background" über die gesamte Bildschirmbreite, der NS 4.x dagegen nur bis zum letzten Zeichen der Zeile, was den Autor stark stört.

Der HTML-Code:
      <p class="a1"> Das ist ein Absatz, dessen relative Position in der Klasse "a1"
                     mit den Eigenschaften "margin-left" und "margin-top" festgelegt wurde.</p>
      <p class="a2"> Das ist ein anderer Absatz, der mit der Klasse "a2" mit einem negativen Wert
                     für die "margin-top" in den Vorgängerabsatz hineinplaziert wurde.
                     Der Browser IE 5.x zeigt die Eigenschaft "background" über die gesamte
                     Bildschirmbreite, der NS 4.x dagegen nur bis zum letzten Zeichen der Zeile,
                     was den Autor stark stört. </p>
   

Demo 3: Style aus Deklaration im Header

Das ist die Arial 12pt. Aufruf über die Klasse "a12Eng".
Mit "line-height: 100%"

Das ist die Arial 12pt. Aufruf über die Klasse "a12".
Ohne "line-height"

Das ist die Arial 12pt. Aufruf über die Klasse "a12Weit".
Mit "line-height: 150%"

Das ist die Times 12pt/14pt. Aufruf über die Klasse "t1214".
Die Eigenschaftskombination "font: 12pt/14pt" wird von NS 4.x und 6.x nicht bzw. falsch unterstützt.

Text in Grossbuchstaben mit "text-transform: uppercase"
Text in Kleinbuchstaben mit "text-transform: lowercase"
Text in Kapitälchen mit "text-transform: capitalize" (Kapitälchen kann man im Internet vergessen)

Das ist ein Absatz, der in der Klasse "ein" mit der Eigenschaft "text-indent: 3em" einen Einzug von "3em" (3 * Elementhöhe) zugewiesen bekommen hat. Dabei wird die aktuelle Schrift zum Maßstab genommen. Die Größenangabe des Einzugs kann auch in "..ex" (Höhe des kleinen "x") oder in px (Bildschirmpixel) oder in pt (1pt = 1/72inch) oder in Prozent der aktuellen Bildschirmbreite erfolgen.

Das ist ein Absatz ohne Einzug (Standard).

Der HTML-Code:
   <div class="a12Eng"> Das ist die Arial 12pt. Aufruf über die Klasse "a12Eng".<br>
   Mit "line-height: 100%"</div>
   <br>
   <div class="a12">    Das ist die Arial 12pt. Aufruf über die Klasse "a12".<br>
   Ohne "line-height"</div>
   <br>
   <div class="a12Weit">Das ist die Arial 12pt. Aufruf über die Klasse "a12Weit".<br>
   Mit "line-height: 150%"</div>
   <br>

   <div class="t1214">Das ist die Times   12pt/14pt. Aufruf über die Klasse "t1214".<br>
                      Die Eigenschaftskombination "font: 12pt/14pt" wird von NS 4.x und 6.x
                      nicht bzw. falsch unterstützt.</div>
   <br>
   <div class="gross"> Text in Grossbuchstaben mit "text-transform: uppercase" </div>
   <div class="klein"> Text in Kleinbuchstaben mit "text-transform: lowercase" </div>
   <div class="kap">   Text in Kapitälchen     mit "text-transform: capitalize"
                       (Kapitälchen kann man im Internet vergessen)</div>
   <br>
   <p class="ein">Das ist ein Absatz, der in der Klasse "ein" mit der Eigenschaft
            "text-indent: 3em" einen Einzug von "3em" (3 * Elementhöhe)
            zugewiesen bekommen hat. Dabei wird die aktuelle Schrift zum Maßstab genommen.
            Die Größenangabe des Einzugs kann auch in "..ex" (Höhe des kleinen "x")
            oder in px (Bildschirmpixel) oder in pt (1pt = 1/72inch) oder in Prozent
            der aktuellen Bildschirmbreite erfolgen.
   </p>
   <p>Das ist ein Absatz ohne Einzug (Standard).</p>
   

Demo 4: Weitere inline styles

Hallo.

Hallo. Dieser rote Text wurde mit "margin-left" um 1px (Pixel) weiter nach rechts und mit "margin-top" um -37px nach oben versetzt (bei NS 4.5 fehlerhafte Anzeige).

font-weight: 100
font-weight: 200
font-weight: 300
font-weight: 400, normal
font-weight: 500
font-weight: 600
font-weight: 700
font-weight: 800
font-weight: 900

text-decoration: overline
text-decoration: line through
text-decoration: none
text-decoration: blink (nicht bei IE 5.0)
text-decoration: underline

Text mit Schatten, IE-Filter "dropShadow" (nicht mit NS 4.x)

Text mit Glimmer, IE-Filter "glaw" (nicht mit NS 4.x)

Der HTML-Code:
   <p style="margin-left: 0px">Hallo.</p>

   <p style="margin-left: 1px; margin-top: -37px; color: red">
            Hallo. Dieser rote Text wurde mit "margin-left" um 1px (Pixel) weiter nach rechts
            und mit "margin-top" um -37px nach oben versetzt (bei NS 4.x fehlerhafte Anzeige).
   </p>
   <br>
   <div style="font-weight: 100">font-weight: 100</div>
   <div style="font-weight: 200">font-weight: 200</div>
   <div style="font-weight: 300">font-weight: 300</div>
   <div style="font-weight: 400">font-weight: 400, normal</div>
   <div style="font-weight: 500">font-weight: 500</div>
   <div style="font-weight: 600">font-weight: 600</div>
   <div style="font-weight: 700">font-weight: 700</div>
   <div style="font-weight: 800">font-weight: 800</div>
   <div style="font-weight: 900">font-weight: 900</div>
   <br>
   <div style="text-decoration: overline">text-decoration: overline</div>
   <div style="text-decoration: line-through">text-decoration: line through</div>
   <div style="text-decoration: none">text-decoration: none</div>
   <div style="text-decoration: blink">text-decoration: blink (nicht bei IE 5.0)</div>
   <div style="text-decoration: underline">text-decoration: underline</div>
   <br>
   <div style="width:       600;
                height:      30;
                font-family: Times, 'Times New Roman', serif;
                font-size:    22pt;
                filter:       dropShadow(color=Red, offX=1.5, offY=-1.0)">
        Text mit Schatten, IE-Filter "dropShadow" (nicht mit NS 4.x)
   </div>
   <br>
   <div style="width:       600;
                height:      30;
                font-family: Arial, Helvetica, sans-serif;
                font-size:    22pt;
                color:        blue;
                filter:       glow(color=green,  strength=3)">
        Text mit Glimmer, IE-Filter "glaw" (nicht mit NS 4.x)
   </div>
   <br>
   

Zurück zur Startseite