 |
Leider (nein notwendigerweise) arbeitet CSS mit einer Syntax,
die sich von der HTML-Syntax deutlich unterscheidet. Lernbedarf
besteht insofern, als die Mehrheit der Attribut- bzw. Eigenschaftnamen
verändert ist. Ein guter Grund ist auch, daß
eine große Zahl neuer Formatierungsmöglichkeiten
hinzu gekommen ist. Erlernen wird man CSS anhand von Beispielen.
Vorab nur ein paar wichtige Unterschiede:
Gegenüberstellung syntaktischer Elemente in HTML
und CSS
| Funktion |
HTML |
CSS |
| Zuweisung |
= |
: |
| Klammerung |
Tags erhalten Attributzuweisung innerhalb ihrer
Klammern:
<P>
<FONT COLOR="blue" SIZE="+2">
Test
</FONT>
</P>
Test |
Innerhalb eines <STYLE>-Tags werden ungeklammerte
Tag-Bezeichnungen mit Attributen in CSS-Schreibung
in geschweiften Klammern versehen. Der Browser muß
allerdings gesagt bekommen, welche Art von Style-Angaben
folgt:
<STYLE TYPE="text/css">I{color:red;font-size:8pt}</STYLE>
<i>
Test 1</i>
Das Universalattribut "STYLE" in HTML verlangt die
CSS-Syntax bei den Werte-Angaben und kommt ohne Klammer
aus.
<I STYLE="color:blue;font-size:13pt">Test2 |
| Schluß- bzw. Trennzeichen |
- Leerzeichen trennt Attribute
- "><" trennt unterschiedliche Tags
Beispiel:
<TABLE BORDER="0">
<TR>
<TD>
<FONT COLOR="red" POINT-SIZE="12">
Zellinhalt
</FONT>
</TD>
</TR>
</TABLE>
Schriftattribute gelten nur für diese Zelle |
- Semikolon beendet und trennt Attributeinträge
innerhalb der "{...}"- Klammern, Leerzeichen können
Störungen im Browser verursachen,
- Komma trennt unterschiedliche Tagnamen, wenn
sie gleiche Merkmale erhalten,
- Leerzeichen trennen aufeinander folgende style-Definitionen
Beispiel:<STYLE TYPE="text/css">
TABLE{border:6;border-style:double}
TD{color:red;font-size:14pt}</STYLE> <TABLE>
<TR>
<TD>
Zellinhalt
</TD>
</TR>
</TABLE>
Table-Anlage vereinfacht sich, Schriftattribute gelten
für alle Tabellenzellen bzw. für die Schriftart
"feste Breite".
Das Beispiel ist hier nicht ausgeführt, da es,
unabhängig vom Standort, alle Tabellen der Seite
verändern würde. |
| Kommentare |
<!--
Kommentar in HTML
--> |
Kommentar in CSS:
/* Bitte so stehen lassen! */ |
Wer sich auf "Style(s)" einläßt, bemerkt rasch,
daß der Umgang damit, zumindest am Anfang, etwa
so übersichtlich ist, wie der mit dem Internet (= Suche
nach einer Nadel im Misthaufen, welche nie drin war ...).
Deshalb noch vor allen Einzelheiten der Versuch einer Differenzierung
(Wenn mir dabei Fehler unterlaufen, mögen mir alle
Internet-Götter verzeihen, oder mich eines/vieles Besseren
belehren: Hier geht's
zu mir!)
Was alles bedeutet 'STYLE'?
"STYLE" ist ein Attribut in HTML, das bei fast
allen Tags verwendet werden kann. Man zählt es
zu den Universalattributen. Es bezieht sich auf das
jeweilige Tag und ermöglicht es, eine Tag-Formatierung
im Einzelfall mit den Formatiermöglichkeiten der
Style-Sheets vorzunehmen. Ein Aufruf könnte lauten:
<H1 STYLE="color:#00ff00;font-size:36pt">
Test
|
Um Style-Sheet-Bereiche zu definieren ("lokale Definition"),
gibt es zwei spezielle Tags: DIV und SPAN,
denen dann mit dem Attribut STYLE Formatierungsanweisungen
zugewiesen werden können. Der Aufruf lautete dann
etwa:
<SPAN STYLE="font-style:italic;color:blue">
Ich
bin blau und stehe schief!
</SPAN> |
"style" ist ein Objekt in der JavaScript-Erweiterung
von Microsoft. Es ist Unterobjekt von "all"; wird mit
all.html_element.style.eigenschaft=wert oder
all.html_element.style.funktion()
aufgerufen, wobei html_element hier für den Namen
eines (fast) beliebigen Tags steht. Wegen dieser speziellen
Art des Aufrufes kann man dieses "style" kaum mit den
anderen verwechseln. Natürlich geht es bei diesem
style auch um Styles im allgemeinen Sinne. Man kann
damit Style-Sheet-Werte für das benannte HTML-Element
erfragen, sie ändern oder löschen. |
"STYLE" ist ein normales HTML-Tag mit der Aufgabe,
Bereiche für Style-Sheet-Angaben zu definieren.
Dabei ist die Angabe des Style-Typs erforderlich. Der
Aufruf, vorzugsweise aber nicht notwendig im <HEAD>-Teil
des Dokuments, erfolgt in der Form:
<STYLE TYPE="text/css">
style_sheet_angaben
</STYLE>
Für die Style-Sheet-Angaben gilt die in der Tabelle
beschriebene Syntax. |
|
Es können für ein Tag mehrere Formate vorgesehen
werden. Zur Unterscheidung wird die Tag-Bezeichnung
duch '.typname' ergänzt. Dieser Name ist
frei wählbar. Man könnte also drei Absatzformate
mit den Namen P.rot{}, P.gelb{}, P.grün{}usw.
anlegen. Man nennt diese unterschiedlichen Definitionen
Klassen. Der Aufruf erfolgt
dann in der allgemeinen Form <P CLASS="rot">
etc. |
| Klassen können auch mit allgemeiner Gültigkeit
(globale Klassen) vereinbart werden. Die Sheet-Definition
erfolgt dann mit dem durch '.' eingeleiteten Klassennamen.
Diese Klasse ist für alle Tags verfügbar.
Also nach vereinbarter Klasse '.rot{}' könnte
im Dokument geschrieben werden <H1 CLASS="rot">...,
<P CLASS="rot">... etc.
|
Beispiel
Der wichtigste Fall ist der zuletzt aufgeführte. Während
bei den ersten drei Fällen nur die Eigenschaftsnamen
und die syntaktischen Regeln der Style-Sheets verwendet
werden, kommt es erst bei der kompletten Definition von
Style-Sheets zur Verwendung der speziellen Schreibweise:
Tag-Bezeichner, ggf. mehrere mit Komma getrennt, in geschweiften
Klammern alle Attribut-Bezeichner, denen mit Doppelpunkt
Werte zugewiesen werden. Attributzuweisungen werden mit
Semikolon voneinander getrennt. Klingt komplizierter als
es dann aussieht. Zeilen wie diese:
<STYLE TYPE="text/css">
BODY{color:#663366;background-color:#f0ffff}
TT{font-type:tt;font-size:11pt;color:green}
TABLE{color:#991133;background-color:#e0e0e0}
</STYLE> |
könnten etwa im head-Teil dieser Seite stehen. Zu
den Einträgen gilt im Einzelnen:
| TYPE="text/css" ist der MIME-Typ, der die
Befehlssyntax der Style-Sheets definiert |
| Es folgen die einzelnen Sheets, also hier eines für
BODY{} für die Eigenschaften des Dokuments,
eines für TT{} wie nichtproportionale
Schrift (typewriter) und eine für TABLE{}
mit speziellen Eigenschaften für die Tabellen.
Davon könnten noch mehr folgen. |
| Die Attribute heißen teilweise anders als in
HTML, mir ist bisher keine vollständige Liste der
funktionierenden über den Weg gelaufen. (Die komplette
Übersicht dessen, was theoretisch gehen sollte,
gibt es spätestens bei der W3-Behörde. |
| Die Wertzuweisungen erfolgen mit Doppelpunkt und funktionieren,
soweit bekannte Schlüsselwörter folgen, auch
für Strings ohne Anführungszeichen. Ein Ausnahme
bilden Namen von Schriften, wenn sie ein Leerzeichen
enthalten (Beispiel: "Times New Roman"): |
|
|
|
DIENSTE
