DynFX Workshop: Formatierung mit Stylesheets

Formatierung mit Stylesheets

Haben Sie genung davon, jede Tabellenzelle einzeln formatieren zu müssen? Dann sollten Sie die Stylesheets einsetzen!

Was bringt mir CSS?

Sie werden jetzt mit Recht fragen, was Ihnen diese Änderungen bringen, denn noch sieht es absolut nicht nach einer Arbeitserleichterung aus, doch können Sie zum Beispiel diese Formatierungsanweisungen direkt in die bereits bestehenden Tags einschleifen, sparen sich also die zusätzlichen SPAN Anweisungen. So könnte eine Tabellendefinition so aussehen:


<TABLE>
 <TR>
  <TD STYLE="color: #FF0000;">rote Schrift</TD>
  <TD STYLE="color: #00FFFF;">türkise Schrift</TD>
 </TR>
</TABLE>

Hier wird schon deutlich, dass Sie sich mit den Stylesheets einiges an unnötigem Overhead sparen können. Grundsätzlich funktioniert der STYLE Parameter bei allen Anweisungen die Text umklammern können.

Dennoch ist die Größenersparniss noch nicht so berauschend, doch das gibt sich, wenn man im HEAD der Datei bestimmte Formate, die häufig im Dokument verwendet werden, vordefiniert. Diese funktioniert mit dem STYLE Befehl und sieht dann folgendermaßen aus:


<STYLE TYPE="text/css">
 TD
 {
  font-family: Arial;
  font-size: 12pt;
 };
 TD.RED
 {
  color: #FF0000;
 };
 TD.CYAN
 {
  color: #00FFFF;
 };
</STYLE>

Anwendungen...

Angewendet werden diese vordefinierten Formate dann einfach, indem die jeweiligen Tags verwendet werden, so wurde zum Beispiel für alle Tags TD die Schriftart Arial und die Größe 12pt definiert. Die Unterformate verwenden Sie mit dem neuen CLASS Parameter, dass sieht dann folgendermaßen aus:


<TABLE>
 <TR>
  <TD CLASS=RED>rote Schrift</TD>
  <TD CLASS=CYAN>türkise Schrift</TD>
 </TR>
</TABLE>

Hier zeigt sich bereits, dass bei intensiver Verwendung solcher vordefiniderten Absatzformate kann man die früher auf jede Zeile verteilten FONT Anweisungen auf einige wenige Zeilen im Kopf jeder Datei eindampfen. Noch weiter lassen sich die Fähigkeiten der Stylesheets ausnutzen, wenn man die Möglichkeiten der Vererbung einsetzt, daher der Begriff "cascading". Hat man eine umfangreiche Sammlung an Seiten mit identischer Formatierung, dann lagert man diese Anweisungen einfach in eine Datei aus, diese sieht dann folgendermaßen aus:


TD
{
 font-family: Arial;
 font-size: 12pt;
};
TD.RED
{
 color: #FF0000;
};
TD.CYAN
{
 color: #00FFFF;
};

Auslagern des CSS-Codes

Nun muß man noch den vorhandenen Dateien klar machen, woher diese ihre Absatzformate beziehen sollen, dazu wird einfach im HEAD ein Befehl wie dieser eingefügt:


<LINK REL=STYLESHEET TYPE="text/css"
HREF="styles.css">

Diese Anweisung importiert nun die Formatvorlagen in das aktuelle Dokument. Zusätzlich können Sie natürlich auch noch weitere Formate in dieser Datei über STYLE definieren, also die Eigenschaften der Basisvorlage geringfügig anpassen, kaskadieren!

Ersatz für proprietäres HTML

Das erste Anwendungsgebiet von Stylesheet-Anweisung ist die Aktualisierung veralterer HTML-Anweisungen, die in zukünftigen Fassung nicht mehr unterstützt werden. Hierzu gehört zum Beispiel die überaus beliebte Anweisung FONT, mit der Schriftart, Farbe und Größe bestimmt werden können.


<FONT FACE="Arial" SIZE=3 COLOR="#FF00FF">
 Dieser Text wird mit der Schriftart Arial,
 12 Punkte groß, und in Magenta dargestellt.
</FONT>

Mit Hilfe der Cascading Stylesheets kann diese Anweisung nun auf den neuen Sprachstandard aktualisiert werden. Hierfür verwendet man die SPAN Anweisung, die eine Textspanne formatiert, in diesem Fall sieht es dann folgendermaßen aus:


<SPAN STYLE="font-family: Arial; font-size: 12pt;
color: #FF00FF;">
 Dieser Text wird mit der Schriftart Arial,
 12 Punkte groß, und in Magenta dargestellt.
</SPAN>

Letzte Änderung: 19.08.2003 17:39:59 · Impressum · AGB

	Aktuell

	Magazin

	Software

	Praxis

	Kommentar