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:
Wenn Sie stattdessen im Kopfteil Ihrer HTML-Datei folgende CSS-Angabe einfügen:
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:
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:
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!(Hier steht Ihr Text.)
</font>
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.)
<!--
td {font: 10pt Verdana,Arial,Helvetica;color:navy}
-->
</style>
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; }
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:
 |
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.
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.
).