Sie sind hier: edv-beratung-thomas.de / Internet services ... / Tutorial: in 10 Schritten ... / Extra Nr. 2


Wie Sie Ihre Webseiten einheitlich gestalten und auch noch Speicherplatz sparen!

Cascading Style Sheets (CSS-Formatvorlagen):

Cascading Style Sheets (CSS) sind Formatvorlagen, die im Kopfteil einer HTML-Datei festgelegt werden und dann für diese eine Datei gelten.

Bei textintensiven HTML-Dateien können Sie mit Verwendung von CSS 50% und mehr Speicherplatz einsparen: Ein Beispiel soll dies deutlich machen: Sie haben 100 Tabellenzellen, für die Sie einzeln die Schrift formatieren: Sie fügen also 100 mal hinter <td> folgenden Code ein:

<font size="2" color="navy" face="Verdana,Arial,Helvetica">
   (Hier steht Ihr Text.)
</font>

Für die HTML-Formatierung werden also 66 Bytes benötigt. Das ergibt bei 100 Tabellenzellen einen Speicherplatzbedarf von 6600 Bytes!

Wenn Sie stattdessen im Kopfteil Ihrer HTML-Datei folgende CSS-Angabe einfügen:

<style type="text/css">
<!--
td {font: 10pt Verdana,Arial,Helvetica;color:navy}
-->
</style>


dann benötigen Sie hierfür nur 88 Bytes, haben also sage und schreibe 6512 Bytes (entspricht 7 KB) eingespart! Die Besucher Ihrer Website werden es Ihnen wegen der kürzeren Ladezeit danken. ("Helvetica" ist übrigens die Mac-Entsprechung zu "Arial"; es soll tatsächlich einige Leute geben, die sich den "Luxus" leisten, mit dem Mac zu surfen.)

Durch Verwendung von Style Sheets können Sie außerdem Ihren Webseiten mit wenig Aufwand ein einheitliches Aussehen verleihen.


Sie können Ihre CSS-Vorlagen aber auch in einer gesonderten Datei hinterlegen, so daß sie projektweit für alle Ihre HTML-Dateien gelten:

Das erledigen Sie mit folgenden Schritten:

  • Binden Sie Ihre CSS-Vorlagen-Datei in den <head> aller HTML-Dateien ein, für die Ihre Style Sheets gelten sollen:

    <link href="sonst/vorlagen.css" rel="stylesheet" type="text/css">

  • Erstellen Sie mit einem Editor Ihre CSS-Vorlagen-Datei (im Beispiel vorlagen.css) und speichern Sie sie im Verzeichnis sonst ab (natürlich können Sie auch einen anderen Ordner wählen):

    body {
      font-family: verdana,helvetica; color: #505050; font-size: 13px;
      background-color: #FFFFFF;
      scrollbar-base-color: #E00060;
      scrollbar-arrow-color: #FFFFFF;
    }
    h1 {
      font-family: verdana,helvetica; color: #E00060; font-size: 24px;
      background-color: #E0E0E0;
    }
    ...
    ...
    a:link    { text-decoration: underline; font-weight: bold; color: #505050; }
    a:visited { text-decoration: underline; font-weight: bold; color: #505050; }
    a:hover   { text-decoration: underline; font-weight: bold; color: #E00060; }
    a:active  { text-decoration: underline; font-weight: bold; color: #000000; }


Die zentrale Hinterlegung der CSS-Vorlagen in einer gesonderten Datei bietet Ihnen den Vorteil, daß Sie mit Änderungen in dieser Datei auf einen Schlag Ihr Seiten-Layout ändern können.

Sie können beide Verfahrensweisen, also dateibezogene Definition und zentrale Hinterlegung, auch "mischen". Im "Konfliktfall" hat die dateibezogene Definition Vorrang.


Mit CSS-Angaben können Sie außerdem tolle Schrift-Effekte erzielen, die mit reinem HTML gar nicht möglich sind:

EDV-Beratung Thomas: WebDesign & Programmierung: ebth-web.gif (4741 Bytes)
Ganz ohne Bildbearbeitung, nur mit HTML- und CSS-Mitteln erstellt: Schriftzug in "glühender" Schrift:

<span style="width=100%; font-family:Verdana; font-size:17pt; color:#66FFDD; filter:glow(color=navy,strength=7);">WebDesign ...</span>
Die Filter-Effekte gehören nicht zum CSS-Standard und werden bislang nur vom Internet Explorer dargestellt. Bei Ihren Besuchern muß zudem in den IE-Sicherheitseinstellungen der Eintrag "ActiveX-Steuerelemente und Plugins ausführen" aktiviert sein. Sicherheitsbewußte Surfer sehen diese Effekte also nicht, sondern nur die Grundschrift.

Wenn Sie sicherstellen wollen, daß alle Ihre Besucher Ihr Kunstwerk sehen, erzeugen Sie eine GIF-Datei (so wie hier) und zeigen diese auf Ihrer Seite an.
Ausführliche Informationen zu CSS finden Sie bei "CSS 4 You" (deutschsprachig ).
Beachten Sie auch das neue Kapitel "CSS-basierte Layouts" in Selfhtml ab Version 8.1 .

Zur Startseite: Webdesign Erlangen - EDV-Beratung Thomas
Stand: 01. 01. 2006 nach oben ©2001-2018 Gösta Thomas